From 377a736a86e71bc102b4d0f8112cc5b8119e11c3 Mon Sep 17 00:00:00 2001 From: John Alkire <4615491+jalkire@users.noreply.github.com> Date: Fri, 19 Nov 2021 14:57:30 -0800 Subject: [PATCH] fix: Modify screen-reader-only class to improve Orca's reading behavior (#4901) #### Details Currently, we use a screen-reader-only class that makes elements offscreen and 1px x 1px. Unfortunately, shortening the element's width to 1px causes the Orca screen reader to behave in an undesirable manner wherein it reads one word at a time and re-reads the element type with each word. To fix this, this PR removes width: 1px from the screen-reader-only class. Instead, clip-path is used to ensure the element is not visible. ##### Motivation Addresses accessibility issue in AI-Android (and AI-Web) on Linux. ##### Context I considered simply eliminating width since the class already sets left:-10000px, but decided to add the clip-path as a redundancy. This should have no visible impact and no impact to other screen readers' behavior. #### Pull request checklist - [x] Addresses an existing issue: ADO 1886155 - [x] Ran `yarn fastpass` - [x] Added/updated relevant unit test(s) (and ran `yarn test`) - [x] Verified code coverage for the changes made. Check coverage report at: `/test-results/unit/coverage` - [x] PR title *AND* final merge commit title both start with a semantic tag (`fix:`, `chore:`, `feat(feature-name):`, `refactor:`). See `CONTRIBUTING.md`. - [n/a] (UI changes only) Added screenshots/GIFs to description above - [x] (UI changes only) Verified usability with NVDA/JAWS --- .../src/examples/axe-results-with-issues.snap.html | 8 ++++---- .../src/examples/axe-results-without-issues.snap.html | 8 ++++---- .../combined-results-with-baseline-aware-issues.snap.html | 8 ++++---- .../src/examples/combined-results-with-issues.snap.html | 8 ++++---- .../examples/combined-results-without-issues.snap.html | 8 ++++---- .../src/examples/summary-scan-with-issues.snap.html | 8 ++++---- .../src/examples/summary-scan-without-issues.snap.html | 8 ++++---- .../components/cards/fix-instruction-color-box.scss | 2 +- src/common/components/fix-instruction-panel.scss | 2 +- src/reports/components/outcome.scss | 2 +- .../components/report-sections/details-section.scss | 2 +- 11 files changed, 32 insertions(+), 32 deletions(-) diff --git a/packages/report-e2e-tests/src/examples/axe-results-with-issues.snap.html b/packages/report-e2e-tests/src/examples/axe-results-with-issues.snap.html index 04a618617df..584f402ab1c 100644 --- a/packages/report-e2e-tests/src/examples/axe-results-with-issues.snap.html +++ b/packages/report-e2e-tests/src/examples/axe-results-with-issues.snap.html @@ -400,9 +400,9 @@ position: absolute; left: -10000px; top: auto; - width: 1px; height: 1px; overflow: hidden; + clip-path: inset(100% 100% 100% 100%); } .check-container svg { width: 100%; @@ -622,9 +622,9 @@ position: absolute; left: -10000px; top: auto; - width: 1px; height: 1px; overflow: hidden; + clip-path: inset(100% 100% 100% 100%); } .report-footer-container { max-width: 960px; @@ -939,9 +939,9 @@ position: absolute; left: -10000px; top: auto; - width: 1px; height: 1px; overflow: hidden; + clip-path: inset(100% 100% 100% 100%); } .how-to-fix-content--OHBLC { margin-bottom: 16px; @@ -1467,9 +1467,9 @@ position: absolute; left: -10000px; top: auto; - width: 1px; height: 1px; overflow: hidden; + clip-path: inset(100% 100% 100% 100%); }