fix: Modify screen-reader-only class to improve Orca's reading behavi…

…or (#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: `<rootDir>/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
microsoft · Nov 19, 2021 · 377a736 · 377a736
1 parent 8c99d9c
commit 377a736
Show file tree

Hide file tree

Showing 11 changed files with 32 additions and 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
@@ -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%);
       }
     </style></head
   ><body

diff --git a/packages/report-e2e-tests/src/examples/axe-results-without-issues.snap.html b/packages/report-e2e-tests/src/examples/axe-results-without-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%);
       }
     </style></head
   ><body

diff --git a/packages/report-e2e-tests/src/examples/combined-results-with-baseline-aware-issues.snap.html b/packages/report-e2e-tests/src/examples/combined-results-with-baseline-aware-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%);
       }
     </style></head
   ><body

diff --git a/packages/report-e2e-tests/src/examples/combined-results-with-issues.snap.html b/packages/report-e2e-tests/src/examples/combined-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%);
       }
     </style></head
   ><body

diff --git a/packages/report-e2e-tests/src/examples/combined-results-without-issues.snap.html b/packages/report-e2e-tests/src/examples/combined-results-without-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%);
       }
     </style></head
   ><body

diff --git a/packages/report-e2e-tests/src/examples/summary-scan-with-issues.snap.html b/packages/report-e2e-tests/src/examples/summary-scan-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%);
       }
     </style></head
   ><body

diff --git a/packages/report-e2e-tests/src/examples/summary-scan-without-issues.snap.html b/packages/report-e2e-tests/src/examples/summary-scan-without-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%);
       }
     </style></head
   ><body

diff --git a/src/common/components/cards/fix-instruction-color-box.scss b/src/common/components/cards/fix-instruction-color-box.scss
@@ -15,7 +15,7 @@ span.fix-instruction-color-box {
     position: absolute;
     left: -10000px;
     top: auto;
-    width: 1px;
     height: 1px;
     overflow: hidden;
+    clip-path: inset(100% 100% 100% 100%);
 }
diff --git a/src/common/components/fix-instruction-panel.scss b/src/common/components/fix-instruction-panel.scss
@@ -18,8 +18,8 @@
         position: absolute;
         left: -10000px;
         top: auto;
-        width: 1px;
         height: 1px;
         overflow: hidden;
+        clip-path: inset(100% 100% 100% 100%);
     }
 }
diff --git a/src/reports/components/outcome.scss b/src/reports/components/outcome.scss
@@ -9,9 +9,9 @@
     position: absolute;
     left: -10000px;
     top: auto;
-    width: 1px;
     height: 1px;
     overflow: hidden;
+    clip-path: inset(100% 100% 100% 100%);
 }
 
 $outcome-pass-color: $positive-outcome;

diff --git a/src/reports/components/report-sections/details-section.scss b/src/reports/components/report-sections/details-section.scss
@@ -54,8 +54,8 @@
         position: absolute;
         left: -10000px;
         top: auto;
-        width: 1px;
         height: 1px;
         overflow: hidden;
+        clip-path: inset(100% 100% 100% 100%);
     }
 }