fix(gcds-sr-only): Align with WCAG technique C7 (#642)

cds-snc · Sep 17, 2024 · 3cbe8bc · 3cbe8bc
1 parent 135e673
commit 3cbe8bc
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 4 deletions.
diff --git a/packages/web/src/components/gcds-sr-only/gcds-sr-only.css b/packages/web/src/components/gcds-sr-only/gcds-sr-only.css
@@ -10,10 +10,12 @@
 
 @layer default {
   :host {
-    display: inline-block;
-    width: 0;
-    height: 0;
-    margin: 0;
+    clip-path: inset(100%);
+    clip: rect(1px, 1px, 1px, 1px);
+    height: 1px;
     overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
   }
 }
diff --git a/packages/web/src/components/gcds-sr-only/test/gcds-sr-only.e2e.ts b/packages/web/src/components/gcds-sr-only/test/gcds-sr-only.e2e.ts
@@ -8,4 +8,29 @@ describe('gcds-sr-only', () => {
     const element = await page.find('gcds-sr-only');
     expect(element).toHaveClass('hydrated');
   });
+
+  it('Check that the element confines its display to a pixel and hides the text', async () => {
+    const page = await newE2EPage();
+    await page.setContent( `
+      <div style="padding: 20px; background-color:#8d201c; color:white">Hello</div>
+      <gcds-sr-only></gcds-sr-only>
+      <div style="padding: 20px; background-color:#2a7da6; color:white;">World</div>
+    `);
+
+    const sizingInfo = await page.evaluate( () => {
+      const elm = document.querySelector( 'gcds-sr-only' );
+      const rectPrevElm = elm.previousElementSibling.getBoundingClientRect();
+      const rectNextElm = elm.nextElementSibling.getBoundingClientRect();
+      return {
+        offsetHeight: elm.offsetHeight,
+        offsetWidth: elm.offsetWidth,
+        bottomPrevElm: rectPrevElm.bottom,
+        topNextElm: rectNextElm.top
+      }
+    });
+
+    expect( sizingInfo.bottomPrevElm ).toEqual( sizingInfo.topNextElm );
+    expect( sizingInfo.offsetHeight ).toBeGreaterThan( 0 );
+    expect( sizingInfo.offsetWidth ).toBeGreaterThan( 0 );
+  });
 });