fix(ffe-searchable-dropdown-react): better screen reader support

SpareBank1 · Apr 6, 2021 · 3f6025f · 3f6025f
1 parent ad9d6ce
commit 3f6025f
Show file tree

Hide file tree

Showing 13 changed files with 890 additions and 316 deletions.
diff --git a/packages/ffe-searchable-dropdown-react/less/searchable-dropdown.less b/packages/ffe-searchable-dropdown-react/less/searchable-dropdown.less
@@ -7,6 +7,7 @@
     }
 
     &__list {
+        display: none;
         background: @ffe-white;
         position: absolute;
         width: 100%;
@@ -22,6 +23,7 @@
         }
 
         &--open {
+            display: block;
             height: auto;
             border: 1px solid @ffe-grey-silver;
             .native & {
@@ -117,6 +119,9 @@
         display: flex;
         justify-content: center;
         align-items: center;
+        &[aria-hidden='true'] {
+            .ffe-screenreader-only();
+        }
 
         &:hover {
             border: 2px solid @ffe-blue-azure;

diff --git a/packages/ffe-searchable-dropdown-react/package.json b/packages/ffe-searchable-dropdown-react/package.json
@@ -33,11 +33,10 @@
     "@sb1/ffe-form": "^16.0.1",
     "@sb1/ffe-icons-react": "^7.2.18",
     "classnames": "^2.2.5",
-    "downshift": "^6.0.3",
+    "compute-scroll-into-view": "^1.0.17",
     "lodash.isequal": "^4.5.0",
     "prop-types": "^15.6.0",
-    "react-custom-scrollbars": "^4.2.1",
-    "react-proptype-conditional-require": "^1.0.4"
+    "react-custom-scrollbars": "^4.2.1"
   },
   "devDependencies": {
     "eslint": "^5.9.0",

diff --git a/packages/ffe-searchable-dropdown-react/src/ListItemContainer.js b/packages/ffe-searchable-dropdown-react/src/ListItemContainer.js
@@ -1,21 +1,25 @@
-import React from 'react';
-import { func, object, bool, arrayOf, string } from 'prop-types';
+import React, { useRef } from 'react';
+import { any, bool, func, object, oneOfType, shape } from 'prop-types';
+import { v4 as uuid } from 'uuid';
 
 const ListItemContainer = ({
-    getItemProps,
     item,
     isHighlighted,
-    dropdownAttributes,
     children,
+    forwardedRef,
+    onMouseEnter,
+    onClick,
 }) => {
-    const [titleAttribute] = dropdownAttributes;
-    const itemProps = getItemProps({
-        item: item[titleAttribute],
-        key: item[titleAttribute],
-    });
+    const id = useRef(`ìtem-${uuid()}`);
     return (
+        // eslint-disable-next-line jsx-a11y/interactive-supports-focus
         <div
-            {...itemProps}
+            id={id.current}
+            role="option"
+            onMouseEnter={onMouseEnter}
+            aria-selected={isHighlighted}
+            ref={forwardedRef}
+            onClick={onClick}
             className="ffe-searchable-dropdown__list-item-container"
         >
             {children({
@@ -27,11 +31,14 @@ const ListItemContainer = ({
 };
 
 ListItemContainer.propTypes = {
-    getItemProps: func.isRequired,
     item: object.isRequired,
     isHighlighted: bool.isRequired,
-    dropdownAttributes: arrayOf(string).isRequired,
     children: func.isRequired,
+    forwardedRef: oneOfType([func, shape({ current: any })]),
+    onMouseEnter: func,
+    onClick: func,
 };
 
-export default ListItemContainer;
+export default React.forwardRef((props, ref) => {
+    return <ListItemContainer {...props} forwardedRef={ref} />;
+});