From 15e340b321f5ad9bfcc55706152c1b25e78ad97c Mon Sep 17 00:00:00 2001
From: Carina <47381367+ssb-cgn@users.noreply.github.com>
Date: Tue, 22 Feb 2022 15:07:58 +0100
Subject: [PATCH] Mimir 1082 uu dropdown (#363)

* MIMIR-1082:First version to get dropdown more UU friendly

* MIMIR-1082:Fix styling list elements

* MIMIR-1082:Fixed keynavigatin in list and scroll on page

TODO:Fix keynavigation in safari

* MIMIR-1082:Fixed onKeyDown for Button on safari

Had to set focus to button

* MIMIR-1082:Better voice over support

* MIMIR-1084:Updated tests and fixed some stuff

* MIMIR-1082:Some small changes

* MIMIR-1082:Updated snapshot and documentation

* MIMIR-1082:Small fixes

* MIMIR-1082:More small fixes

* MIMIR-1082:Som cleanup on code for header

* MIMIR-1082:Fixes styling hover and focus, and fixes disabled items

* MIMIR-1082:Fixes tests and updatet bundle.css
---
 lib/bundle.css                                |  59 +++----
 src/components/Dropdown/README.md             |  54 +++++--
 .../__snapshots__/dropdown.test.jsx.snap      |  14 +-
 src/components/Dropdown/_dropdown.scss        |  24 ++-
 src/components/Dropdown/dropdown.test.jsx     |   4 +-
 src/components/Dropdown/index.jsx             | 150 +++++++++++-------
 src/style/_global-styles.scss                 |  12 ++
 7 files changed, 180 insertions(+), 137 deletions(-)

diff --git a/lib/bundle.css b/lib/bundle.css
index 67d9dc57..2caa2f59 100644
--- a/lib/bundle.css
+++ b/lib/bundle.css
@@ -46,6 +46,18 @@ a {
   margin: 0 !important;
 }
 
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
 .ssb-accordion {
   display: grid;
   width: 100%;
@@ -671,28 +683,15 @@ a {
   min-width: 230px;
   position: relative;
 }
-.ssb-dropdown label {
+.ssb-dropdown label, .ssb-dropdown #dropdown-label {
   font-size: 14px;
   line-height: normal;
   margin-bottom: 5px;
 }
 .ssb-dropdown .dropdown-interactive-area {
-  background-color: transparent;
-  border: none;
-  color: inherit;
-  cursor: pointer;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  padding: 0;
-  text-align: left;
   cursor: pointer;
   position: relative;
 }
-.ssb-dropdown .dropdown-interactive-area:focus {
-  outline: #9272fc solid 2px;
-  outline-offset: 2px;
-}
 .ssb-dropdown .dropdown-interactive-area button {
   background-color: transparent;
   border: none;
@@ -713,9 +712,9 @@ a {
   padding: 4px 44px 4px 12px;
   text-overflow: ellipsis;
 }
-.ssb-dropdown .dropdown-interactive-area button:focus {
-  outline: #9272fc solid 2px;
-  outline-offset: 2px;
+.ssb-dropdown .dropdown-interactive-area button:hover, .ssb-dropdown .dropdown-interactive-area button:focus {
+  border: 1px solid #00824d;
+  outline: 1px solid #00824d;
 }
 .ssb-dropdown .dropdown-interactive-area .dd-icon {
   color: #00824d;
@@ -739,12 +738,9 @@ a {
 .ssb-dropdown .dropdown-interactive-area input::placeholder {
   color: #162327;
 }
-.ssb-dropdown .dropdown-interactive-area input:hover {
-  border: 1px solid #00824d;
-}
-.ssb-dropdown .dropdown-interactive-area input:focus, .ssb-dropdown .dropdown-interactive-area input.focused {
+.ssb-dropdown .dropdown-interactive-area input:hover, .ssb-dropdown .dropdown-interactive-area input:focus {
   border: 1px solid #00824d;
-  outline: #00824d auto 1px;
+  outline: 1px solid #00824d;
 }
 .ssb-dropdown.error input, .ssb-dropdown.error button.opener {
   border: 1px solid #ed5935;
@@ -771,15 +767,6 @@ a {
   width: 100%;
 }
 .ssb-dropdown .list-of-options .option-list-element {
-  background-color: transparent;
-  border: none;
-  color: inherit;
-  cursor: pointer;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  padding: 0;
-  text-align: left;
   font-family: "Roboto", sans-serif !important;
   font-stretch: normal;
   font-weight: normal;
@@ -793,24 +780,22 @@ a {
   padding: 12px;
   text-overflow: ellipsis;
   transition: all 0.18s;
+  box-sizing: border-box;
   width: 100%;
 }
-.ssb-dropdown .list-of-options .option-list-element:focus {
-  outline: #9272fc solid 2px;
-  outline-offset: 2px;
-}
 .ssb-dropdown .list-of-options .option-list-element:hover, .ssb-dropdown .list-of-options .option-list-element:focus, .ssb-dropdown .list-of-options .option-list-element.active {
   background: #274247;
   color: #fff;
   z-index: 2;
 }
-.ssb-dropdown .list-of-options .option-list-element:disabled {
+.ssb-dropdown .list-of-options .option-list-element.disabled {
   background: #fff;
   color: #c3dcdc;
   cursor: not-allowed;
   font-weight: normal;
+  pointer-events: none;
 }
-.ssb-dropdown .list-of-options .option-list-element:disabled:hover, .ssb-dropdown .list-of-options .option-list-element:disabled:focus {
+.ssb-dropdown .list-of-options .option-list-element.disabled:hover, .ssb-dropdown .list-of-options .option-list-element.disabled:focus {
   text-decoration: none;
   background: none;
 }
diff --git a/src/components/Dropdown/README.md b/src/components/Dropdown/README.md
index 6dfce5ff..8b92b3cf 100644
--- a/src/components/Dropdown/README.md
+++ b/src/components/Dropdown/README.md
@@ -25,25 +25,43 @@ Dropdown
   
 ### Usage
 
-#### HTML
+#### HTML standard dropdown
 This component needs some javascript functionality to work.
 ```html
-<div class="ssb-dropdown">
-    <label for="input-dropdown">Menu header</label>
-    <div class="dropdown-interactive-area">
-        <button onclick="toggle the open class">
-            <input class="focused" id="input-dropdown" disabled="" placeholder="Select item" value="">
-            <!-- If closed -->
-            <i class="dd-icon">{feather.chevronDown 18px}</i>
-            <!-- If open -->
-            <i class="dd-icon">{feather.chevronUp 18px}</i>
-        </button>
-        <div class="list-of-options">
-            <button class="option-list-element" value="item1" id="item1" onclick="select item and close">Apples</button>
-            <button class="option-list-element" value="item2" id="item2" onclick="select item and close">Rainbows</button>
-            <button class="option-list-element" value="item3" id="item3" onclick="select item and close">Ocean</button>
-        </div>
-    </div>
+<div id="dropdown" class="ssb-dropdown">
+   <span id="dropdown-label">Menu header</span>
+   <div class="dropdown-interactive-area">
+      <button class="opener" id="button_dropdown" tabindex="0" type="button" aria-expanded="false" aria-haspopup="listbox" aria-labelledby="dropdown-label button_dropdown">-- Select --</button>
+      <!-- If closed -->
+      <i class="dd-icon">{feather.chevronDown 18px}</i>
+      <!-- If open -->
+      <i class="dd-icon">{feather.chevronUp 18px}</i>
+      <ul id="list_of_options_dropdown" class="list-of-options" role="listbox" aria-labelledby="dropdown-label" tabindex="-1" aria-activedescendant="item1">
+         <li class="option-list-element active focused" id="item1" role="option" aria-selected="true">Apples</li>
+         <li class="option-list-element" id="item2" role="option">Rainbows</li>
+         <li class="option-list-element" id="item3" role="option">Ocean</li>
+      </ul>
+   </div>
+</div>
+```
+
+#### HTML dropdown with search (combobox with autocomplete)
+This component needs some javascript functionality to work.
+```html
+<div id="dropdown" class="ssb-dropdown">
+   <label for="input_dropdown">Menu header</label>
+   <div class="dropdown-interactive-area">
+      <input class="focused" id="input_dropdown" placeholder="Search and select" role="combobox" aria-autocomplete="list" aria-expanded="true" aria-controls="list_of_options_dropdown" type="text" aria-activedescendant="item1" value="">
+      <!-- If closed -->
+      <i class="dd-icon">{feather.chevronDown 18px}</i>
+      <!-- If open -->
+      <i class="dd-icon">{feather.chevronUp 18px}</i>
+      <ul id="list_of_options_dropdown" class="list-of-options" role="listbox" tabindex="-1">
+         <li class="option-list-element active focused" id="item1" role="option" aria-selected="true">Apples</li>
+         <li class="option-list-element" id="item2" role="option">Rainbows</li>
+         <li class="option-list-element" id="item3" role="option">Ocean</li>
+      </ul>
+   </div>
 </div>
 ```
 
@@ -78,6 +96,7 @@ Available props:
 
 | Name       | Type           | Description  |
 | ---------- | ------------- | ----- |
+| id | string | Optional id | 
 | className   | string | Optional container class|
 | error | bool | show error message if true |
 | errorMessage | string | Renders an error message underneath input field |
@@ -90,3 +109,4 @@ Available props:
 | searchable | bool | If true, dropdown is searchable |
 | selectedItem | object | Selected element in dropdown |
 | tabIndex | number | Tab index for focus |
+| ariaLabel | string | Defines a string value that labels input or span to button element, use if not visible header |
diff --git a/src/components/Dropdown/__snapshots__/dropdown.test.jsx.snap b/src/components/Dropdown/__snapshots__/dropdown.test.jsx.snap
index deee809d..679b9360 100644
--- a/src/components/Dropdown/__snapshots__/dropdown.test.jsx.snap
+++ b/src/components/Dropdown/__snapshots__/dropdown.test.jsx.snap
@@ -3,22 +3,22 @@
 exports[`Dropdown component Matches the snapshot 1`] = `
 <div
   className="ssb-dropdown"
+  id="dropdown"
 >
-  <label
-    htmlFor={1}
+  <span
+    id="dropdown-label"
   >
     Menu header
-  </label>
+  </span>
   <div
     className="dropdown-interactive-area"
-    onKeyPress={[Function]}
-    role="button"
   >
     <button
       aria-expanded="false"
-      aria-label="open or close dropdown"
+      aria-haspopup="listbox"
+      aria-labelledby="dropdown-label button_dropdown"
       className="opener"
-      id={1}
+      id="button_dropdown"
       onClick={[Function]}
       onKeyDown={[Function]}
       tabIndex={0}
diff --git a/src/components/Dropdown/_dropdown.scss b/src/components/Dropdown/_dropdown.scss
index 15e4b514..fcbd5fc5 100644
--- a/src/components/Dropdown/_dropdown.scss
+++ b/src/components/Dropdown/_dropdown.scss
@@ -7,20 +7,17 @@
   min-width: 230px;
   position: relative;
 
-  label {
+  label, #dropdown-label {
     font-size: 14px;
     line-height: normal;
     margin-bottom: 5px;
   }
 
   .dropdown-interactive-area {
-    @include focus-marker;
-    @include reset-button;
     cursor: pointer;
     position: relative;
 
     button {
-      @include focus-marker;
       @include reset-button;
       width: 100%;
       background-color: $ssb-white;
@@ -31,6 +28,11 @@
       min-height: $input-field-height;
       padding: 4px $input-field-height 4px 12px;
       text-overflow: ellipsis;
+
+      &:hover, &:focus {
+        border: 1px solid $ssb-green-4;
+        outline: 1px solid $ssb-green-4;
+      }
     }
 
     .dd-icon {
@@ -57,13 +59,9 @@
         color: $ssb-dark-6;
       }
 
-      &:hover {
-        border: 1px solid $ssb-green-4;
-      }
-
-      &:focus, &.focused {
+      &:hover, &:focus {
         border: 1px solid $ssb-green-4;
-        outline: $ssb-green-4 auto 1px;
+        outline: 1px solid $ssb-green-4;
       }
     }
   }
@@ -95,8 +93,6 @@
       width: 100%;
 
       .option-list-element {
-        @include focus-marker;
-        @include reset-button;
         @include roboto;
         background: $ssb-white;
         cursor: pointer;
@@ -108,6 +104,7 @@
         padding: 12px;
         text-overflow: ellipsis;
         transition: all .18s;
+        box-sizing: border-box;
         width: 100%;
 
         &:hover, &:focus, &.active {
@@ -116,11 +113,12 @@
           z-index: 2;
         }
 
-        &:disabled {
+        &.disabled {
           background: $ssb-white;
           color: $ssb-dark-2;
           cursor: not-allowed;
           font-weight: normal;
+          pointer-events: none;
 
           &:hover, &:focus {
             text-decoration: none;
diff --git a/src/components/Dropdown/dropdown.test.jsx b/src/components/Dropdown/dropdown.test.jsx
index cea4a970..4c893a36 100644
--- a/src/components/Dropdown/dropdown.test.jsx
+++ b/src/components/Dropdown/dropdown.test.jsx
@@ -43,13 +43,13 @@ describe('Dropdown component', () => {
 
 	test('Choose first item', () => {
 		const wrapper = shallow(<Dropdown header="Menu header" items={items} open />);
-		wrapper.find('.list-of-options').find('button').first().simulate('click');
+		wrapper.find('.list-of-options').find('li').first().simulate('click');
 		expect(wrapper.find('.dropdown-interactive-area').find('button').text()).toEqual('Apples');
 	});
 
 	test('Verify disabled item', () => {
 		const wrapper = shallow(<Dropdown header="Menu header" items={items} open />);
-		expect(wrapper.find('.list-of-options').find('button').find({ id: 'item2' }).prop('disabled')).toBe(true);
+		expect(wrapper.find('.list-of-options').find('li').find({ id: 'item2' }).hasClass('disabled')).toBe(true);
 	});
 
 	test('Triggers filter function on search', () => {
diff --git a/src/components/Dropdown/index.jsx b/src/components/Dropdown/index.jsx
index 78a71c94..8aaabe89 100644
--- a/src/components/Dropdown/index.jsx
+++ b/src/components/Dropdown/index.jsx
@@ -1,6 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import uuid from 'uuid/v4';
 import { ChevronDown, ChevronUp } from 'react-feather';
 import {
 	KEY_ARROW_DOWN,
@@ -12,11 +11,8 @@ import {
 } from '../../utils/keybindings';
 import InputError from '../InputError';
 
-const Dropdown = ({
-	className, header, icon, items, onSelect, open, placeholder, searchable, selectedItem, tabIndex, error, errorMessage,
+const Dropdown = ({ className, header, icon, items, onSelect, open, placeholder, searchable, selectedItem, tabIndex, error, errorMessage, ariaLabel, id,
 }) => {
-	const id = uuid();
-
 	// all the refs we need!
 	const wrapper = useRef();
 	const node = useRef();
@@ -24,10 +20,12 @@ const Dropdown = ({
 		acc[idx] = useRef();
 		return acc;
 	}, []);
+	const optionList = useRef();
 
 	const [isOpen, setOpen] = useState(open);
 	const [availableOptions, filterAvailableOptions] = useState(items);
 	const [selectedOption, selectItem] = useState(selectedItem || { title: '', id: '' });
+	const [activeOption, setActiveOption] = useState(selectedItem || { title: '', id: '' });
 	const [inputFieldValue, updateInputValue] = useState('');
 	const [keyNavPosition, setKeyNavPosition] = useState(0);
 
@@ -41,9 +39,11 @@ const Dropdown = ({
 	};
 
 	const handleSelection = item => {
-		selectItem({ title: item.title, id: item.id });
-		onSelect(item);
-		setOpen(false);
+		if (!item.disabled) {
+			selectItem({ title: item.title, id: item.id });
+			onSelect(item);
+			setOpen(false);
+		}
 
 		if (items[keyNavPosition].id !== item.id) {
 			const idx = items.findIndex(it => it.id === item.id);
@@ -74,24 +74,24 @@ const Dropdown = ({
 	// TODO : See if handleKeyboardNav and handleSearchSpecialKeys can be squashed
 	// 		  for DRY principle.
 
-	const handleKeyboardNav = (e, elem = node) => {
-		if (e.target === elem.current) {
-			if ((e.keyCode === KEY_ARROW_UP) && (keyNavPosition > 0)) {
-				setKeyNavPosition(keyNavPosition - 1);
-			} else if ((e.keyCode === KEY_ARROW_DOWN) && (keyNavPosition < (items.length - 1))) {
-				setKeyNavPosition(keyNavPosition + 1);
-			} else if (e.keyCode === KEY_ENTER) {
+	const handleKeyboardNav = e => {
+		if ((e.keyCode === KEY_ARROW_UP) && (keyNavPosition > 0)) {
+			e.preventDefault();
+			setKeyNavPosition(keyNavPosition - 1);
+		} else if ((e.keyCode === KEY_ARROW_DOWN) && (keyNavPosition < (items.length - 1))) {
+			e.preventDefault();
+			setKeyNavPosition(keyNavPosition + 1);
+		} else if (e.keyCode === KEY_ENTER) {
+			e.preventDefault();
+			if (isOpen) {
+				handleSelection(items[keyNavPosition]);
+			} else {
+				setOpen(true);
+			}
+		} else if (e.keyCode === KEY_ESCAPE) {
+			if (!searchable) {
 				e.preventDefault();
-				if (isOpen) {
-					handleSelection(items[keyNavPosition]);
-				} else {
-					setOpen(true);
-				}
-			} else if (e.keyCode === KEY_ESCAPE) {
-				if (!searchable) {
-					e.preventDefault();
-					setOpen(false);
-				}
+				setOpen(false);
 			}
 		}
 	};
@@ -101,7 +101,6 @@ const Dropdown = ({
 			setOpen(false);
 		} else if (e.keyCode === KEY_TAB) {
 			setOpen(false);
-			// wrapper.sibling.focus();
 		} else if ((e.keyCode === KEY_ARROW_DOWN) && (keyNavPosition < (availableOptions.length - 1))) {
 			setKeyNavPosition(keyNavPosition + 1);
 		} else if ((e.keyCode === KEY_ARROW_UP) && (keyNavPosition > 0)) {
@@ -123,19 +122,29 @@ const Dropdown = ({
 	};
 
 	useEffect(() => {
-		if (itemRefs[keyNavPosition].current) {
+		if (isOpen && itemRefs[keyNavPosition].current) {
 			itemRefs[keyNavPosition].current.scrollIntoView({
 				behavior: 'smooth',
-				block: 'start',
+				block: 'nearest',
+				inline: 'start',
 			});
+			setActiveOption(items[keyNavPosition]);
 		}
 	}, [keyNavPosition]);
 
 	useEffect(() => {
 		if (isOpen) {
+			if (!searchable) {
+				// List must be in focus for the elements in the option-list to be read out to the screen reader
+				optionList.current.focus();
+			}
 			document.addEventListener('mousedown', handleClickOutside);
 		}
 
+		if (isOpen && keyNavPosition === 0) {
+			setActiveOption(items[0]);
+		}
+
 		return () => {
 			document.removeEventListener('mousedown', handleClickOutside);
 		};
@@ -154,36 +163,42 @@ const Dropdown = ({
 		return isOpen ? <ChevronUp className="dd-icon" size={24} /> : <ChevronDown className="dd-icon" size={24} />;
 	};
 
+	const renderHeader = () => {
+		if (!header && ariaLabel) {
+			return <span className="sr-only" id="dropdown-label">{ariaLabel}</span>;
+		}
+		return <span id="dropdown-label">{header}</span>;
+	};
+	const renderHeaderSearchable = () => header && <label htmlFor={`input_${id}`}>{header}</label>;
+
 	return (
-		<div className={`ssb-dropdown${className ? ` ${className}` : ''}${error ? ' error' : ''}`}>
-			{header && <label htmlFor={id}>{header}</label>}
+		<div id={id} className={`ssb-dropdown${className ? ` ${className}` : ''}${error ? ' error' : ''}`}>
+			{searchable ? renderHeaderSearchable() : renderHeader() }
 			<div
 				className="dropdown-interactive-area"
 				ref={wrapper}
-				role="button"
 				tabIndex={tabIndex}
-				onKeyPress={e => { handleKeyboardNav(e, wrapper); }}
 			>
 				{!searchable && (
 					<button
 						className={isOpen ? 'focused opener' : 'opener'}
-						aria-label="open or close dropdown"
-						id={id}
+						id={`button_${id}`}
 						ref={node}
 						tabIndex={0}
-						onClick={() => setOpen(!isOpen)}
-						onKeyDown={handleKeyboardNav}
+						onClick={() => { setOpen(!isOpen); }}
+						onKeyDown={e => { handleKeyboardNav(e); }}
 						type="button"
 						aria-expanded={isOpen ? 'true' : 'false'}
 						aria-describedby={error && errorMessage ? `error_${id}` : undefined}
-					>{selectedOption.title ? selectedOption.title : placeholder}
+						aria-haspopup="listbox"
+						aria-labelledby={!header && !ariaLabel ? `button_${id}` : `dropdown-label button_${id}`}
+					>{selectedOption.title !== '' ? selectedOption.title : placeholder}
 					</button>
 				) }
 				{searchable && (
 					<input
-						aria-label="Search or select in dropdown"
 						className={isOpen ? 'focused' : ''}
-						id={id}
+						id={`input_${id}`}
 						onKeyDown={handleSearchSpecialKeys}
 						onChange={filterItems}
 						onFocus={() => setOpen(!isOpen)} // Bedre praksis enn onClick
@@ -191,32 +206,42 @@ const Dropdown = ({
 						placeholder={selectedOption.title ? selectedOption.title : placeholder}
 						value={inputFieldValue}
 						aria-describedby={error && errorMessage ? `error_${id}` : undefined}
+						role="combobox"
+						aria-autocomplete="list"
+						aria-expanded={isOpen ? 'true' : 'false'}
+						aria-controls={`list_of_options_${id}`}
+						aria-label={ariaLabel}
+						type="text"
+						aria-activedescendant={activeOption ? activeOption.id : undefined}
 					/>
 				)}
 				{ renderIcon() }
 				{isOpen && (
-					<div className="list-of-options" id={`${id}--options`}>
-						{availableOptions.map((it, idx) => {
-							const classNames = [
-								'option-list-element',
-								selectedOption.id === it.id ? 'selected' : '',
-								keyNavPosition === idx ? 'active' : '',
-							].join(' ');
-
-							return (
-								<button
-									disabled={it.disabled}
-									className={classNames}
-									key={it.id}
-									onClick={() => { handleSelection(it); }}
-									id={it.id}
-									ref={itemRefs[idx]}
-									type="button"
-								>{it.title}
-								</button>
-							);
-						})}
-					</div>
+					<ul
+						id={`list_of_options_${id}`}
+						className={`list-of-options${!isOpen ? ' hidden' : ''}`}
+						role="listbox"
+						aria-labelledby={!searchable && (header || ariaLabel) ? 'dropdown-label' : undefined}
+						aria-activedescendant={!searchable && activeOption.id !== '' ? activeOption.id : undefined}
+						tabIndex={-1}
+						ref={optionList}
+						onKeyDown={e => { handleKeyboardNav(e); }}
+					>
+						{availableOptions.map((it, idx) => (
+							<li
+								key={it.id}
+								className={`option-list-element${selectedOption.id === it.id ? ' selected' : ''}${isOpen && keyNavPosition === idx ? ' active' : ''}${it.disabled ? ' disabled' : ''}`}
+								onClick={() => { handleSelection(it); }}
+								id={it.id}
+								ref={itemRefs[idx]}
+								role="option"
+								aria-selected={isOpen && keyNavPosition === idx ? 'true' : undefined}
+								aria-disabled={it.disabled}
+							>
+								{it.title}
+							</li>
+						))}
+					</ul>
 				)}
 				{error && (errorMessage && (
 					<InputError errorMessage={errorMessage} id={`error_${id}`} />
@@ -233,9 +258,11 @@ Dropdown.defaultProps = {
 	open: false,
 	searchable: false,
 	placeholder: '-- Select --',
+	id: 'dropdown',
 };
 
 Dropdown.propTypes = {
+	ariaLabel: PropTypes.string,
 	className: PropTypes.string,
 	error: PropTypes.bool,
 	errorMessage: PropTypes.string,
@@ -252,6 +279,7 @@ Dropdown.propTypes = {
 	searchable: PropTypes.bool,
 	selectedItem: PropTypes.object,
 	tabIndex: PropTypes.number,
+	id: PropTypes.string,
 };
 
 export default Dropdown;
diff --git a/src/style/_global-styles.scss b/src/style/_global-styles.scss
index 56982846..5dd6a57d 100644
--- a/src/style/_global-styles.scss
+++ b/src/style/_global-styles.scss
@@ -32,3 +32,15 @@ a {
 .no-margin {
   margin: 0 !important;
 }
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}