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
statisticsnorway · Feb 22, 2022 · 15e340b · 15e340b
1 parent e9ffb81
commit 15e340b
Show file tree

Hide file tree

Showing 7 changed files with 180 additions and 137 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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', () => {