fix(ffe-searchable-dropdown-react): fixes isse in talkback

SpareBank1 · Mar 28, 2021 · 706bc18 · 706bc18
1 parent d51fd82
commit 706bc18
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 9 deletions.
diff --git a/packages/ffe-searchable-dropdown-react/src/SearchableDropdown.js b/packages/ffe-searchable-dropdown-react/src/SearchableDropdown.js
@@ -47,7 +47,6 @@ const SearchableDropdown = ({
     'aria-invalid': ariaInvalid,
 }) => {
     const inputEl = useRef(null);
-
     const initialSelectedItem = useMemo(
         () => dropdownList.find(item => isEqual(initialValue, item)),
         [dropdownList, initialValue],
@@ -79,8 +78,8 @@ const SearchableDropdown = ({
                 highlightedIndex,
                 selectedItem,
                 openMenu,
-                closeMenu,
                 clearSelection,
+                getToggleButtonProps,
             }) => {
                 const trimmedInput = inputValue.trim();
 
@@ -122,11 +121,9 @@ const SearchableDropdown = ({
                                     'ffe-input-field--dark': dark,
                                 }),
                                 onFocus: (...args) => {
-                                    openMenu();
                                     onFocus(...args);
                                 },
                                 onBlur: (...args) => {
-                                    closeMenu();
                                     onBlur(...args);
                                 },
                                 onClick: (...args) => {
@@ -148,11 +145,11 @@ const SearchableDropdown = ({
                                 className="ffe-searchable-dropdown__button ffe-searchable-dropdown__button--cross"
                                 onClick={clearSelection}
                             >
-                                <KryssIkon />
+                                <KryssIkon aria-hidden="true" />
                             </button>
                         ) : (
                             <button
-                                type="button"
+                                {...getToggleButtonProps()}
                                 aria-label={
                                     isOpen
                                         ? getButtonLabelClose(locale)
@@ -164,9 +161,8 @@ const SearchableDropdown = ({
                                         'ffe-searchable-dropdown__button--flip': isOpen,
                                     },
                                 )}
-                                onClick={isOpen ? closeMenu : openMenu}
                             >
-                                <ChevronIkon />
+                                <ChevronIkon aria-hidden="true" />
                             </button>
                         )}
                         <div

diff --git a/packages/ffe-searchable-dropdown-react/src/SearchableDropdown.spec.js b/packages/ffe-searchable-dropdown-react/src/SearchableDropdown.spec.js
@@ -328,7 +328,7 @@ describe('SearchableDropdown', () => {
 
         const input = getByPlaceholderText(placeholder);
 
-        fireEvent.focus(input);
+        fireEvent.click(input);
 
         expect(getByText('Bedriften')).toBeInTheDocument();
         expect(getByText('912602370')).toBeInTheDocument();