Merge pull request #883 from vrk-kpa/hotfix/dropdown-and-select-a11y-…

…fixes [Hotfix] Dropdown, SingleSelect & MultiSelect screen reader a11y
vrk-kpa · Nov 28, 2024 · c645c86 · c645c86
2 parents 51429d4 + 98fcb15
commit c645c86
Show file tree

Hide file tree

Showing 13 changed files with 391 additions and 428 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "suomifi-ui-components",
-  "version": "15.0.0",
+  "version": "15.0.1",
   "description": "Suomi.fi UI component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

diff --git a/src/core/Form/DateInput/__snapshots__/DateInput.test.tsx.snap b/src/core/Form/DateInput/__snapshots__/DateInput.test.tsx.snap
@@ -4514,10 +4514,10 @@ exports[`snapshots match date input with datepicker with controlled input value
             class="c0 fi-dropdown_input-wrapper"
           >
             <button
+              aria-controls="16-popover"
               aria-expanded="false"
               aria-haspopup="listbox"
               aria-labelledby="16-displayValue 16-label"
-              aria-owns="16-popover"
               class="c6 fi-dropdown_button"
               id="16_button"
               tabindex="0"
@@ -4562,10 +4562,10 @@ exports[`snapshots match date input with datepicker with controlled input value
             class="c0 fi-dropdown_input-wrapper"
           >
             <button
+              aria-controls="17-popover"
               aria-expanded="false"
               aria-haspopup="listbox"
               aria-labelledby="17-displayValue 17-label"
-              aria-owns="17-popover"
               class="c6 fi-dropdown_button"
               id="17_button"
               tabindex="0"
@@ -6789,10 +6789,10 @@ exports[`snapshots match date input with datepicker with smallScreen 1`] = `
               class="c0 fi-dropdown_input-wrapper"
             >
               <button
+                aria-controls="9-popover"
                 aria-expanded="false"
                 aria-haspopup="listbox"
                 aria-labelledby="9-displayValue 9-label"
-                aria-owns="9-popover"
                 class="c6 fi-dropdown_button"
                 id="9_button"
                 tabindex="0"
@@ -6837,10 +6837,10 @@ exports[`snapshots match date input with datepicker with smallScreen 1`] = `
               class="c0 fi-dropdown_input-wrapper"
             >
               <button
+                aria-controls="10-popover"
                 aria-expanded="false"
                 aria-haspopup="listbox"
                 aria-labelledby="10-displayValue 10-label"
-                aria-owns="10-popover"
                 class="c6 fi-dropdown_button"
                 id="10_button"
                 tabindex="0"

diff --git a/src/core/Form/Dropdown/Dropdown/Dropdown.test.tsx b/src/core/Form/Dropdown/Dropdown/Dropdown.test.tsx
@@ -95,7 +95,6 @@ describe('Dropdown with hidden label', () => {
   it('should have hidden label', async () => {
     const { findByText } = render(DropdownWithHiddenLabel);
     const label = await findByText('Dropdown test');
-    console.log(label);
     expect(label).toHaveClass('fi-visually-hidden');
   });
 

diff --git a/src/core/Form/Dropdown/Dropdown/Dropdown.tsx b/src/core/Form/Dropdown/Dropdown/Dropdown.tsx
@@ -619,7 +619,7 @@ class BaseDropdown<T extends string = string> extends Component<
               statusTextId,
               hintTextId,
             ])}
-            aria-owns={popoverItemListId}
+            aria-controls={popoverItemListId}
             aria-expanded={ariaExpanded}
             onClick={() => {
               if (!showPopover) {

diff --git a/src/core/Form/Dropdown/Dropdown/__snapshots__/Dropdown.test.tsx.snap b/src/core/Form/Dropdown/Dropdown/__snapshots__/Dropdown.test.tsx.snap
@@ -285,20 +285,16 @@ exports[`Basic dropdown should match snapshot 1`] = `
   border-bottom-right-radius: 2px;
   margin: 0;
   padding: 4px 0 0 0;
-}
-
-.c9:focus {
-  outline: none;
-}
-
-.c9 .fi-select-item-list_content_wrapper {
   display: block;
   width: 100%;
-  max-height: inherit;
   overflow-y: auto;
   overflow-x: hidden;
 }
 
+.c9:focus {
+  outline: none;
+}
+
 .c7 {
   -webkit-letter-spacing: 0;
   -moz-letter-spacing: 0;
@@ -607,10 +603,10 @@ exports[`Basic dropdown should match snapshot 1`] = `
         class="c0 fi-dropdown_input-wrapper"
       >
         <button
+          aria-controls="test-id-popover"
           aria-expanded="true"
           aria-haspopup="listbox"
           aria-labelledby="test-id-displayValue test-id-label"
-          aria-owns="test-id-popover"
           class="c5 fi-dropdown_button"
           id="test-id_button"
           tabindex="0"
@@ -654,30 +650,26 @@ exports[`Basic dropdown should match snapshot 1`] = `
         role="listbox"
         tabindex="0"
       >
-        <div
-          class="c2 fi-select-item-list_content_wrapper"
+        <li
+          aria-disabled="false"
+          aria-selected="false"
+          class="c10 c11 fi-dropdown_item fi-dropdown_item--hasKeyboardFocus"
+          id="test-id-item-1"
+          role="option"
+          tabindex="0"
         >
-          <li
-            aria-disabled="false"
-            aria-selected="false"
-            class="c10 c11 fi-dropdown_item fi-dropdown_item--hasKeyboardFocus"
-            id="test-id-item-1"
-            role="option"
-            tabindex="0"
-          >
-            Item 1
-          </li>
-          <li
-            aria-disabled="false"
-            aria-selected="false"
-            class="c10 c11 fi-dropdown_item"
-            id="test-id-item-2"
-            role="option"
-            tabindex="-1"
-          >
-            Item 2
-          </li>
-        </div>
+          Item 1
+        </li>
+        <li
+          aria-disabled="false"
+          aria-selected="false"
+          class="c10 c11 fi-dropdown_item"
+          id="test-id-item-2"
+          role="option"
+          tabindex="-1"
+        >
+          Item 2
+        </li>
       </ul>
     </div>
   </div>
@@ -969,20 +961,16 @@ exports[`Controlled Dropdown should match snapshot 1`] = `
   border-bottom-right-radius: 2px;
   margin: 0;
   padding: 4px 0 0 0;
-}
-
-.c9:focus {
-  outline: none;
-}
-
-.c9 .fi-select-item-list_content_wrapper {
   display: block;
   width: 100%;
-  max-height: inherit;
   overflow-y: auto;
   overflow-x: hidden;
 }
 
+.c9:focus {
+  outline: none;
+}
+
 .c12 {
   vertical-align: baseline;
 }
@@ -1315,10 +1303,10 @@ exports[`Controlled Dropdown should match snapshot 1`] = `
         class="c0 fi-dropdown_input-wrapper"
       >
         <button
+          aria-controls="test-id-popover"
           aria-expanded="true"
           aria-haspopup="listbox"
           aria-labelledby="test-id-displayValue test-id-label"
-          aria-owns="test-id-popover"
           class="c5 fi-dropdown_button"
           id="test-id_button"
           tabindex="0"
@@ -1363,46 +1351,42 @@ exports[`Controlled Dropdown should match snapshot 1`] = `
         role="listbox"
         tabindex="0"
       >
-        <div
-          class="c2 fi-select-item-list_content_wrapper"
+        <li
+          aria-disabled="false"
+          aria-selected="false"
+          class="c10 c11 fi-dropdown_item"
+          id="test-id-item-1"
+          role="option"
+          tabindex="-1"
         >
-          <li
-            aria-disabled="false"
-            aria-selected="false"
-            class="c10 c11 fi-dropdown_item"
-            id="test-id-item-1"
-            role="option"
-            tabindex="-1"
-          >
-            Item 1
-          </li>
-          <li
-            aria-disabled="false"
-            aria-selected="true"
-            class="c10 c11 fi-dropdown_item fi-dropdown_item--hasKeyboardFocus fi-dropdown_item--selected"
-            id="test-id-item-2"
-            role="option"
-            tabindex="0"
+          Item 1
+        </li>
+        <li
+          aria-disabled="false"
+          aria-selected="true"
+          class="c10 c11 fi-dropdown_item fi-dropdown_item--hasKeyboardFocus fi-dropdown_item--selected"
+          id="test-id-item-2"
+          role="option"
+          tabindex="0"
+        >
+          Item 2
+          <svg
+            aria-hidden="true"
+            class="fi-icon c12 fi-dropdown_item_icon"
+            focusable="false"
+            height="1em"
+            viewBox="0 0 20 20"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            Item 2
-            <svg
-              aria-hidden="true"
-              class="fi-icon c12 fi-dropdown_item_icon"
-              focusable="false"
-              height="1em"
-              viewBox="0 0 20 20"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                class="fi-icon-base-fill"
-                d="M19.447 5.384 8 17.42a1.82 1.82 0 0 1-2.667 0L.552 12.394a2.059 2.059 0 0 1 0-2.805 1.822 1.822 0 0 1 2.666 0l3.449 3.625L16.78 2.581a1.82 1.82 0 0 1 2.666 0 2.053 2.053 0 0 1 0 2.803"
-                fill="#222"
-                fill-rule="evenodd"
-              />
-            </svg>
-          </li>
-        </div>
+            <path
+              class="fi-icon-base-fill"
+              d="M19.447 5.384 8 17.42a1.82 1.82 0 0 1-2.667 0L.552 12.394a2.059 2.059 0 0 1 0-2.805 1.822 1.822 0 0 1 2.666 0l3.449 3.625L16.78 2.581a1.82 1.82 0 0 1 2.666 0 2.053 2.053 0 0 1 0 2.803"
+              fill="#222"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </li>
       </ul>
     </div>
   </div>
@@ -1694,20 +1678,16 @@ exports[`Dropdown with additional aria-label should match snapshot 1`] = `
   border-bottom-right-radius: 2px;
   margin: 0;
   padding: 4px 0 0 0;
-}
-
-.c9:focus {
-  outline: none;
-}
-
-.c9 .fi-select-item-list_content_wrapper {
   display: block;
   width: 100%;
-  max-height: inherit;
   overflow-y: auto;
   overflow-x: hidden;
 }
 
+.c9:focus {
+  outline: none;
+}
+
 .c7 {
   -webkit-letter-spacing: 0;
   -moz-letter-spacing: 0;
@@ -2016,10 +1996,10 @@ exports[`Dropdown with additional aria-label should match snapshot 1`] = `
         class="c0 fi-dropdown_input-wrapper"
       >
         <button
+          aria-controls="test-id-popover"
           aria-expanded="true"
           aria-haspopup="listbox"
           aria-labelledby="test-id-displayValue additional-label-id test-id-label"
-          aria-owns="test-id-popover"
           class="c5 fi-dropdown_button"
           id="test-id_button"
           tabindex="0"
@@ -2063,30 +2043,26 @@ exports[`Dropdown with additional aria-label should match snapshot 1`] = `
         role="listbox"
         tabindex="0"
       >
-        <div
-          class="c2 fi-select-item-list_content_wrapper"
+        <li
+          aria-disabled="false"
+          aria-selected="false"
+          class="c10 c11 fi-dropdown_item fi-dropdown_item--hasKeyboardFocus"
+          id="test-id-item-1"
+          role="option"
+          tabindex="0"
         >
-          <li
-            aria-disabled="false"
-            aria-selected="false"
-            class="c10 c11 fi-dropdown_item fi-dropdown_item--hasKeyboardFocus"
-            id="test-id-item-1"
-            role="option"
-            tabindex="0"
-          >
-            Item 1
-          </li>
-          <li
-            aria-disabled="false"
-            aria-selected="false"
-            class="c10 c11 fi-dropdown_item"
-            id="test-id-item-2"
-            role="option"
-            tabindex="-1"
-          >
-            Item 2
-          </li>
-        </div>
+          Item 1
+        </li>
+        <li
+          aria-disabled="false"
+          aria-selected="false"
+          class="c10 c11 fi-dropdown_item"
+          id="test-id-item-2"
+          role="option"
+          tabindex="-1"
+        >
+          Item 2
+        </li>
       </ul>
     </div>
   </div>
@@ -2551,10 +2527,10 @@ exports[`Dropdown with hidden label should match snapshot 1`] = `
         class="c0 fi-dropdown_input-wrapper"
       >
         <button
+          aria-controls="test-id-popover"
           aria-expanded="false"
           aria-haspopup="listbox"
           aria-labelledby="test-id-displayValue test-id-label"
-          aria-owns="test-id-popover"
           class="c5 fi-dropdown_button"
           id="test-id_button"
           tabindex="0"

diff --git a/src/core/Form/Select/BaseSelect/SelectItemList/SelectItemList.baseStyles.tsx b/src/core/Form/Select/BaseSelect/SelectItemList/SelectItemList.baseStyles.tsx
@@ -16,15 +16,12 @@ export const baseStyles = (theme: SuomifiTheme) => css`
   margin: 0;
   padding: 4px 0 0 0;
 
+  display: block;
+  width: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+
   &:focus {
     outline: none;
   }
-
-  & .fi-select-item-list_content_wrapper {
-    display: block;
-    width: 100%;
-    max-height: inherit;
-    overflow-y: auto;
-    overflow-x: hidden;
-  }
 `;