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

Author: timwessman

packages/react/.loki/reference/chrome_iphone7_Components_DropdownComponents_ModularOptionList_With_Icons.png

@@ -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/.loki/reference/chrome_iphone7_Components_DropdownComponents_Search_Example.png

@@ -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/.loki/reference/chrome_iphone7_Components_Header_With_Search.png

@@ -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/.loki/reference/chrome_laptop_Components_DropdownComponents_ModularOptionList_With_Icons.png

@@ -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,
   };
 }