SectionHeader improvement

services/app-web/src/components/SectionHeader/SectionHeader.module.scss

@@ -19,6 +19,10 @@
             margin-top: 17.5px;
         }
     }
+
+    h2 {
+        word-wrap: 'break-word';
+    }
 }
 
 .summarySectionHeaderBorder {

services/app-web/src/components/SectionHeader/SectionHeader.test.tsx

@@ -41,6 +41,7 @@ describe('SectionHeader', () => {
             screen.getByRole('link', { name: 'Edit Page 2' })
         ).toHaveAttribute('href', '/some-edit-path')
     })
+
     it('respects the hideBorder prop', () => {
         renderWithProviders(
             <SectionHeader header="This is a section" hideBorder />
@@ -51,4 +52,12 @@ describe('SectionHeader', () => {
                 .closest('div')
         ).not.toHaveClass('summarySectionHeaderBorder')
     })
+
+    it('does not render invisible zero-width space character in accesible name', () => {
+        renderWithProviders(<SectionHeader header="THIS-IS-123-456-67-RATE" />)
+
+        expect(
+            screen.getByRole('heading', { name: 'THIS-IS-123-456-67-RATE' })
+        ).toHaveAccessibleName('THIS-IS-123-456-67-RATE')
+    })
 })

services/app-web/src/components/SectionHeader/SectionHeader.tsx

@@ -30,7 +30,9 @@ export const SectionHeader = ({
     return (
         <div className={classes} id={sectionId}>
             <div className={styles.primaryDiv}>
-                <h2 id={headerId}>{header}</h2>
+                <h2 id={headerId} style={{ wordWrap: 'break-word' }}>
+                    {header}
+                </h2>
                 {subHeaderComponent}
             </div>
             <div>