feat: select component a11y changes (#1066)

SAP · Jun 9, 2020 · 37ec4fa · 37ec4fa
1 parent 4ec7343
commit 37ec4fa
Show file tree

Hide file tree

Showing 33 changed files with 3,378 additions and 205 deletions.
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -215,6 +215,16 @@
     }
 })();
 
+function onSelectClick(controlId) {
+    let popoverRef = document.getElementById(controlId);
+
+    if (popoverRef.getAttribute("aria-hidden") === "true") {
+        popoverRef.setAttribute("aria-hidden", "false");
+    } else {
+        popoverRef.setAttribute("aria-hidden", "true");
+    }
+}
+
 function stepInputValue(inputId, stepDirection) {
     let inputRef = document.getElementById(inputId);
 

diff --git a/docs/pages/components/select.md b/docs/pages/components/select.md
diff --git a/src/_listDropdown.scss b/src/_listDropdown.scss
@@ -3,6 +3,10 @@
 
 .#{$block} {
   &--dropdown {
+    @include fd-focus() {
+      outline: none;
+    }
+
     .#{$block}__item {
       @include list-item-states();
 

diff --git a/src/dialog.scss b/src/dialog.scss
@@ -129,6 +129,7 @@ $button: #{$fd-namespace}-button;
 
     @extend %dialog-body;
 
+    position: relative;
     padding-top: $fd-dialog-body-padding-y;
     padding-bottom: $fd-dialog-body-padding-y;
     border-radius: $fd-dialog-content-border-radius;

diff --git a/src/mixins/_forms.scss b/src/mixins/_forms.scss
@@ -84,8 +84,7 @@
     }
   }
 
-  &[readonly],
-  &.is-readonly {
+  @include fd-readonly() {
     background-color: rgba(242, 242, 242, 0.5); // Hardcoded for IE11 Purposes, there is not callback for RGBA.
     background-color: var(--sapField_ReadOnly_Background);
     border-color: var(--sapField_ReadOnly_BorderColor);

diff --git a/src/select.scss b/src/select.scss
@@ -14,6 +14,7 @@ $block: #{$fd-namespace}-select;
 
   display: block;
   padding-right: 0;
+  min-width: 5rem;
 
   &__control {
     @include fd-form-base();
@@ -53,7 +54,8 @@ $block: #{$fd-namespace}-select;
       }
     }
 
-    &.is-expanded {
+    &.is-expanded,
+    &[aria-expanded="true"] {
       .#{$block}__button {
         background-color: $fd-select-button-active-background;
         color: $fd-select-button-active-text-color;
@@ -75,7 +77,6 @@ $block: #{$fd-namespace}-select;
       }
     }
 
-    &[readonly],
     &.is-readonly {
       padding-right: $fd-select-padding-x;
       padding-left: $fd-select-padding-x;
@@ -98,7 +99,6 @@ $block: #{$fd-namespace}-select;
         padding-left: 0;
       }
 
-      &[readonly],
       &.is-readonly {
         padding-right: $fd-select-padding-compact-x;
         padding-left: $fd-select-padding-compact-x;