Merge pull request #1109 from greatislander/FLUID-6772

FLUID-6772: resolve horizontal overflow issue
fluid-project · Aug 2, 2024 · 9aabd00 · 9aabd00
2 parents 75ce78b + 8623e36
commit 9aabd00
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/src/framework/core/css/fluid.css b/src/framework/core/css/fluid.css
@@ -58,16 +58,18 @@
 .fl-hidden-accessible {
     border: 0;
     clip: rect(0 0 0 0);
+    clip-path: inset(50%);
     height: 1px;
     margin: -1px;
     overflow: hidden;
     padding: 0;
     position: absolute;
+    white-space: nowrap;
     width: 1px;
 }
 
 /*
- * Extends the .visuallyhidden class to allow the element to be focusable
+ * Extends the .fl-hidden-accessible class to allow the element to be focusable
  * when navigated to via the keyboard
  */
 .fl-hidden-accessible.fl-focus:active,

diff --git a/src/framework/preferences/css/sass/PrefsEditor.scss b/src/framework/preferences/css/sass/PrefsEditor.scss
@@ -135,7 +135,7 @@ $icon-font: 'PrefsFramework-Icons';
 
             .fl-preview-A {
                 font-size: 1.7em;
-                letter-spacing: normal // prevents the preview content from shifting when letter-spacing is set
+                letter-spacing: normal; // prevents the preview content from shifting when letter-spacing is set
             }
 
             // Pseudo content to prevent AT from reading display 'a'
@@ -239,6 +239,12 @@ $icon-font: 'PrefsFramework-Icons';
             width: calc(100% - 5px); // deduct the right margin from the calculation
         }
 
+        label .fl-hidden-accessible {
+            display: inline-block;
+            position: relative;
+            width: 0;
+        }
+
         &:last-child .fl-indicator {
             width: 100%;
         }