fix: assistive text, search button focus, mol item height

Author: timwessman

packages/react/src/components/dropdownComponents/modularOptionList/ModularOptionList.module.scss

@@ -88,6 +88,7 @@
         display: flex;
         flex-grow: 1;
         justify-content: space-between;
+        min-height: 24px;
 
         > span.selected {
           color: var(--computed-menu-item-icon-color-selected);

packages/react/src/components/dropdownComponents/search/Search.tsx

@@ -114,6 +114,7 @@ const SearchField = forwardRef<SearchInputHandle, SearchFieldProps>(
           searchInputLabel: `${containerId}-search-input-label`,
           clearButton: `${containerId}-clear-button`,
           label: `${containerId}-label`,
+          assistiveText: `${containerId}-assistive-text`,
         },
         textProvider: createTextProvider(texts),
         getOptionId: (option: Option) => {

packages/react/src/components/dropdownComponents/search/__snapshots__/Search.test.tsx.snap

@@ -18,6 +18,7 @@ exports[`<Search /> spec renders the component 1`] = `
             class="inputWrapper"
           >
             <input
+              aria-describedby="hds-search-1-assistive-text"
               aria-label="Hae"
               class="input hasClearButton"
               id="hds-search-1-search-input"

packages/react/src/components/dropdownComponents/search/components/AssistiveText.tsx

@@ -13,9 +13,12 @@ import {
 
 function createAssistiveTextProps(dataHandlers: SearchDataHandlers): DivElementProps & { children: string | null } {
   const assistive = getTextFromDataHandlers('assistive', dataHandlers);
+  const { getMetaData } = useSearchDataHandlers();
+  const { elementIds } = getMetaData();
   return {
     className: styles.assistiveText,
     children: assistive || null,
+    id: elementIds.assistiveText,
   };
 }
 

packages/react/src/components/dropdownComponents/search/components/SearchInput.tsx

@@ -197,6 +197,7 @@ export const SearchInput = forwardRef<
       buttonIcon={onSend ? <IconSearch className={styles.searchButtonIcon} /> : undefined}
       onButtonClick={handleSearch}
       buttonAriaLabel={getTextKey('searchButtonAriaLabel', metaData)}
+      aria-describedby={metaData.elementIds.assistiveText}
     />
   );
 });

packages/react/src/components/dropdownComponents/search/types.ts

@@ -96,6 +96,7 @@ export type SearchMetaData = Pick<SearchProps, 'icon'> &
       container: string;
       searchContainer: string;
       clearButton: string;
+      assistiveText: string;
     };
     textProvider: TextProvider;
     search: string;

packages/react/src/components/header/components/headerActionBarItem/HeaderActionBarItem.module.scss

@@ -144,7 +144,6 @@
     :focus-visible,
     :focus {
       border: none;
-      outline: none;
       outline-offset: none;
     }
   }

packages/react/src/components/header/components/headerSearch/HeaderSearch.module.scss

@@ -51,6 +51,7 @@
     }
 
     > button {
+      border: 0;
       padding: var(--spacing-s) var(--spacing-m);
       white-space: nowrap;
     }

packages/react/src/components/header/components/headerSearch/__snapshots__/HeaderSearch.test.tsx.snap

@@ -139,6 +139,7 @@ exports[`<Header.HeaderSearch /> spec renders the component 1`] = `
                                 class="inputWrapper"
                               >
                                 <input
+                                  aria-describedby="header-search-search-component-assistive-text"
                                   aria-label="Hae"
                                   class="input hasClearButton"
                                   id="header-search-search-component-search-input"
@@ -181,6 +182,7 @@ exports[`<Header.HeaderSearch /> spec renders the component 1`] = `
                         </div>
                         <div
                           class="assistiveText"
+                          id="header-search-search-component-assistive-text"
                         >
                           Avustava teksti
                         </div>