feat: select component a11y changes

package.json

@@ -123,8 +123,7 @@
   "pre-commit": {
     "colors": true,
     "run": [
-      "lint:pre-commit",
-      "storybook:visual-docker"
+      "lint:pre-commit"
     ],
     "silent": false
   },

src/mixins/_forms.scss

@@ -85,6 +85,7 @@
   }
 
   &[readonly],
+  &[aria-readonly="true"],
   &.is-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);

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;
@@ -87,6 +88,10 @@ $block: #{$fd-namespace}-select;
     font-size: var(--sapFontSize);
   }
 
+  &__item[aria-selected=true] {
+    border-bottom: 0 !important;
+  }
+
   &--compact {
     .#{$block}__control {
       height: $fd-form-input-height--compact;
@@ -98,7 +103,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;

stories/select/select.html

@@ -0,0 +1,78 @@
+<script>
+   import { createEventDispatcher } from "svelte";
+   const dispatch = createEventDispatcher();
+
+   export let select;
+
+   function onSelectClick() {
+     select.openDropdown = !select.openDropdown;
+     dispatch("onSelectClick", select);
+   }
+ </script>
+
+ <div dir="{select.dir}">
+   <label class="fd-form-label" id="f45564A57">
+      Label examples
+  </label>
+  <br />
+   <div class="fd-popover">
+      <div
+         aria-disabled="{select.disabled}"
+         aria-readonly="{select.readOnly}"
+         class="fd-popover__control">
+         <div class="fd-select {select.compact ? 'fd-select--compact' : ''}">
+               <div
+                  aria-controls="h0C6A325"
+                  aria-disabled="{select.disabled}"
+                  aria-expanded="{select.openDropdown}"
+                  aria-haspopup="true"
+                  class="fd-select__control {select.readOnly ? 'is-readonly' : ''}"
+                  role="button"
+                  tabindex="0"
+                  on:click="{!select.readOnly && onSelectClick}">
+                  {select.placeholder ? select.placeholder : 'Select'}
+                  {#if !select.readOnly}
+                  <span class="fd-button fd-button--transparent sap-icon--slim-arrow-down fd-select__button"></span>
+                  {/if}
+               </div>
+            </div>
+      </div>
+      <div
+         aria-hidden="{!select.openDropdown}"   
+         class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown {select.dropdownFill ? 'fd-popover__body--dropdown-fill' : ''}"
+         id="h0C6A325">
+         {#if select.formMessage}
+         <div
+            aria-live="assertive"
+            class="fd-list__message fd-list__message--{select.formMessage.type}"
+            role="alert">
+            {select.formMessage.message}
+         </div>
+         {/if}
+         <ul
+            aria-labelledby="f45564A57"
+            class="fd-list fd-list--dropdown {select.compact ? 'fd-list--compact' : ''} {select.formMessage ? 'fd-list--has-message' : ''}"
+            role="listbox"
+            tabindex="-1">
+            {#each select.optionData as option}
+            <li
+               aria-selected="{option.selected}"
+               class="fd-list__item fd-select__item"
+               role="option"
+               tabindex="-1">
+               {#if option.icon}
+               <span class="fd-list__icon {option.icon}"></span>
+               {/if}
+               <span class="fd-list__title {option.noWrap ? 'fd-list__title--no-wrap' : ''}">{option.text}</span>
+               {#if option.secondaryText}
+               <span class="fd-list__secondary">{option.secondaryText}</span>
+               {/if}
+            </li>
+            {/each}
+         </ul>
+      </div>
+   </div>
+   {#if select.formMessage && !select.openDropdown}
+   <span class="fd-form-message fd-form-message--static fd-form-message--{select.formMessage.type}">{select.formMessage.message}</span>
+   {/if}
+</div>