Sa11y is an accessibility quality assurance tool that visually highlights common accessibility and usability issues. Geared towards content authors, Sa11y straightforwardly identifies errors or warnings at the source with a simple tooltip on how to fix them.
Part of #42, Encapsulate annotations, toggle and panel into web components`. This is an early draft to get feedback on the approach, and highlight areas needing design decision.
As a high level approach – I thought it’d be best to start by only using Web Components to benefit from shadow DOM’s style encapsulation, and leave other parts of Sa11y as untouched as possible. This lightweight refactoring brings two benefits:
Stylesheets can be greatly simplified – lower specificity, no !important, no risk of clashing with user styles at all.
It’s much more straightforward for Sa11y’s checks to ignore Sa11y’s own UI (not necessarily a big difference but it’s nice nonetheless).
The complexities are:
Changing how stylesheets are loaded, so they get loaded within the shadow tree of each component. Here, I chose to rely on a template element to keep things as similar to the current approach as possible for users of the library. This is critical to get right – no matter the approach, to make the most of styles encapsulation, we’d have to change how all Sa11y users load the stylesheets.
Dealing with FOUC while the stylesheets load.
Rewriting anything depending on global state (for example CSS variables set on html[data-sa11y-theme="dark"])
Rewriting all the UI code that queries elements on document to instead look inside its component’s own shadow tree.
As-is, some of Sa11y works and some doesn’t, as I’ve only partially dealt with points 2. to 4. above.
Part of #42, Encapsulate annotations, toggle and panel into web components`. This is an early draft to get feedback on the approach, and highlight areas needing design decision.
As a high level approach – I thought it’d be best to start by only using Web Components to benefit from shadow DOM’s style encapsulation, and leave other parts of Sa11y as untouched as possible. This lightweight refactoring brings two benefits:
!important, no risk of clashing with user styles at all.The complexities are:
templateelement to keep things as similar to the current approach as possible for users of the library. This is critical to get right – no matter the approach, to make the most of styles encapsulation, we’d have to change how all Sa11y users load the stylesheets.html[data-sa11y-theme="dark"])documentto instead look inside its component’s own shadow tree.As-is, some of Sa11y works and some doesn’t, as I’ve only partially dealt with points 2. to 4. above.