search

cds-snc / gcds-components

GC Design System Components is a monorepo managing the web components of the GC Design System. | « GC Design System Components » (Composants de Système de design GC) est un référentiel unique qui gère les composants Web de Système de design GC.
https://design-system.alpha.canada.ca/
MIT License
37 stars 15 forks source link

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

Closed duboisp closed 2 months ago

duboisp commented 2 months ago

Summary | Résumé

Align the style of gcds-sr-only with the WCAG CSS technique C7 and it avoid the 0 pixel technique because it is not recommended according to a WebAim article about invisible content just for screen reader users.

It also remove the space taken by the component as it must be visually invisible but only visible to screen reader only.

Test instructions | Instructions pour tester la modification

The following tests were automated and integrated to the unit testing of the <gcds-sr-only> component

Component are visually invisible and don't interfere with visual design

  1. Put the <gcds-sr-only> component in between 2 other visually rendered component.
  2. Expected: The bottom of the preceding component and the top of the next one should be the same without any space in between.
Current With this fix
You can observe it does takes an undesirable vertical space. You can observe that vertical space is removed.
image image

Ensure the screen reader content are at least one pixel size

  1. Select the <gcds-sr-only> component in the DOM
  2. Expected: The element properties offsetWidth and offsetHeight must be greater than 0.