04-addon-accessibility

appyspaces · Jul 30, 2020 · b2af6a9 · b2af6a9
1 parent 571cdca
commit b2af6a9
Show file tree

Hide file tree

Showing 7 changed files with 191 additions and 9 deletions.
diff --git a/packages/react/.storybook/main.js b/packages/react/.storybook/main.js
@@ -3,6 +3,7 @@ module.exports = {
     addons: [
         '@storybook/preset-typescript',
         '@storybook/addon-storysource',
-        '@storybook/addon-knobs'
+        '@storybook/addon-knobs',
+        '@storybook/addon-a11y'
     ]
 }
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -7,6 +7,7 @@
     "@babel/preset-env": "^7.10.4",
     "@babel/preset-react": "^7.10.4",
     "@babel/preset-typescript": "^7.10.4",
+    "@storybook/addon-a11y": "^5.3.19",
     "@storybook/addon-knobs": "^5.3.19",
     "@storybook/addon-storysource": "^5.3.19",
     "@storybook/preset-typescript": "^3.0.0",

diff --git a/packages/react/src/molecules/Select/Select.stories.tsx b/packages/react/src/molecules/Select/Select.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import Select from './Select'
-
+import { withA11Y } from '@storybook/addon-a11y'
 
 // css
 import '@ds.e/scss/lib/Select.css'
@@ -17,7 +17,8 @@ const options = [{
 }]
 
 export default {
-    title: 'Molecules|Select'
+    title: 'Molecules|Select',
+    decorators: [withA11Y]
 }
 
 export const Common = () => <Select options={options} />

diff --git a/packages/react/src/molecules/Select/Select.tsx b/packages/react/src/molecules/Select/Select.tsx
@@ -143,8 +143,8 @@ const Select: React.FunctionComponent<SelectProps> = ({ options = [], label = 'P
             <svg className={`dse-select__caret ${isOpen ? 'dse-select__caret--open' : 'dse-select__caret--closed'}`} width='1rem' height='1rem' fill="none" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} viewBox="0 0 24 24" stroke="currentColor"><path d="M19 9l-7 7-7-7" /></svg>
         </button>
 
-        {isOpen ? (
-            <ul role='menu' aria-hidden={isOpen ? undefined : false} id='dse-select-list' style={{ top: overlayTop }} className='dse-select__overlay'>
+        {(
+            <ul role='menu' aria-hidden={isOpen ? undefined : false} id='dse-select-list' style={{ top: overlayTop }} className={`dse-select__overlay ${isOpen ? 'dse-select__overlay--open' : ''}`}>
                 {options.map((option, optionIndex) => {
                     const isSelected = selectedIndex === optionIndex
                     const isHighlighted = highlightedIndex === optionIndex
@@ -191,7 +191,7 @@ const Select: React.FunctionComponent<SelectProps> = ({ options = [], label = 'P
                         </li>
                 })}
             </ul>
-        ) : null}
+        )}
     </div>
 }
 

diff --git a/packages/react/src/molecules/Select/__snapshots__/Select.test.tsx.snap b/packages/react/src/molecules/Select/__snapshots__/Select.test.tsx.snap
@@ -32,6 +32,59 @@ exports[`snapshot of the base state 1`] = `
         />
       </svg>
     </button>
+    <ul
+      aria-hidden="false"
+      class="dse-select__overlay "
+      id="dse-select-list"
+      role="menu"
+      style="top: 10px;"
+    >
+      <li
+        aria-label="Strict Black"
+        class="dse-select__option
+                                
+                                
+                            "
+        role="menuitemradio"
+        tabindex="0"
+      >
+        <p
+          class="dse-text dse-text-base"
+        >
+          Strict Black
+        </p>
+      </li>
+      <li
+        aria-label="Heavenly Green"
+        class="dse-select__option
+                                
+                                
+                            "
+        role="menuitemradio"
+        tabindex="0"
+      >
+        <p
+          class="dse-text dse-text-base"
+        >
+          Heavenly Green
+        </p>
+      </li>
+      <li
+        aria-label="Sweet Pink"
+        class="dse-select__option
+                                
+                                
+                            "
+        role="menuitemradio"
+        tabindex="0"
+      >
+        <p
+          class="dse-text dse-text-base"
+        >
+          Sweet Pink
+        </p>
+      </li>
+    </ul>
   </div>
 </DocumentFragment>
 `;
@@ -70,7 +123,7 @@ exports[`snapshot of the options menu open state 1`] = `
       </svg>
     </button>
     <ul
-      class="dse-select__overlay"
+      class="dse-select__overlay dse-select__overlay--open"
       id="dse-select-list"
       role="menu"
       style="top: 10px;"
@@ -157,6 +210,74 @@ exports[`snapshot of the selected option state 1`] = `
         />
       </svg>
     </button>
+    <ul
+      aria-hidden="false"
+      class="dse-select__overlay "
+      id="dse-select-list"
+      role="menu"
+      style="top: 10px;"
+    >
+      <li
+        aria-checked="true"
+        aria-label="Strict Black"
+        class="dse-select__option
+                                dse-select__option--selected
+                                
+                            "
+        role="menuitemradio"
+        tabindex="0"
+      >
+        <p
+          class="dse-text dse-text-base"
+        >
+          Strict Black
+        </p>
+        <svg
+          fill="none"
+          height="1rem"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="1rem"
+        >
+          <path
+            d="M5 13l4 4L19 7"
+          />
+        </svg>
+      </li>
+      <li
+        aria-label="Heavenly Green"
+        class="dse-select__option
+                                
+                                
+                            "
+        role="menuitemradio"
+        tabindex="0"
+      >
+        <p
+          class="dse-text dse-text-base"
+        >
+          Heavenly Green
+        </p>
+      </li>
+      <li
+        aria-label="Sweet Pink"
+        class="dse-select__option
+                                
+                                
+                            "
+        role="menuitemradio"
+        tabindex="0"
+      >
+        <p
+          class="dse-text dse-text-base"
+        >
+          Sweet Pink
+        </p>
+      </li>
+    </ul>
   </div>
 </DocumentFragment>
 `;
diff --git a/packages/scss/src/molecules/Select.scss b/packages/scss/src/molecules/Select.scss
@@ -39,6 +39,7 @@
         border: 1px solid $form-border-color;
         background-color: $form-bg-color;
         z-index: 99;
+        display: none;
 
         list-style-type: none;
 
@@ -69,3 +70,9 @@
         color: $form-color-option-selected;
     }
 }
+
+.dse-select__overlay {
+    &--open {
+        display: block;
+    }
+}
diff --git a/yarn.lock b/yarn.lock
@@ -2262,6 +2262,28 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
+"@storybook/addon-a11y@^5.3.19":
+  version "5.3.19"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-a11y/-/addon-a11y-5.3.19.tgz#6a21d200c1e67362ae3680d3beb76bfb4ff6c508"
+  integrity sha512-obh2Uy8IeXU+UPQXoqT2Q0hRdAuQdfZjYdrGJ9RGoehVEzMxZlR0x1Cml5xf3u9v6+l72hi85RvA6YEGl+jKZw==
+  dependencies:
+    "@storybook/addons" "5.3.19"
+    "@storybook/api" "5.3.19"
+    "@storybook/client-logger" "5.3.19"
+    "@storybook/components" "5.3.19"
+    "@storybook/core-events" "5.3.19"
+    "@storybook/theming" "5.3.19"
+    axe-core "^3.3.2"
+    core-js "^3.0.1"
+    global "^4.3.2"
+    memoizerific "^1.11.3"
+    react "^16.8.3"
+    react-redux "^7.0.2"
+    react-sizeme "^2.5.2"
+    redux "^4.0.1"
+    ts-dedent "^1.1.0"
+    util-deprecate "^1.0.2"
+
 "@storybook/addon-knobs@^5.3.19":
   version "5.3.19"
   resolved "https://registry.yarnpkg.com/@storybook/addon-knobs/-/addon-knobs-5.3.19.tgz#b2483e401e2dca6390e1c0a81801130a0b515efb"
@@ -3769,6 +3791,11 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.10.0.tgz#a17b3a8ea811060e74d47d306122400ad4497ae2"
   integrity sha512-3YDiu347mtVtjpyV3u5kVqQLP242c06zwDOgpeRnybmXlYYsLbtTrUBUm8i8srONt+FWobl5aibnU1030PeeuA==
 
+axe-core@^3.3.2:
+  version "3.5.5"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-3.5.5.tgz#84315073b53fa3c0c51676c588d59da09a192227"
+  integrity sha512-5P0QZ6J5xGikH780pghEdbEKijCTrruK9KxtPZCFWUpef0f6GipO+xEZ5GKCb020mmqgbiNO6TcA55CriL784Q==
+
 babel-code-frame@^6.22.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
@@ -12359,7 +12386,7 @@ react-input-autosize@^2.2.2:
   dependencies:
     prop-types "^15.5.8"
 
-react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.1:
+react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.9.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -12390,6 +12417,17 @@ react-popper@^1.3.7:
     typed-styles "^0.0.7"
     warning "^4.0.2"
 
+react-redux@^7.0.2:
+  version "7.2.1"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.1.tgz#8dedf784901014db2feca1ab633864dee68ad985"
+  integrity sha512-T+VfD/bvgGTUA74iW9d2i5THrDQWbweXP0AVNI8tNd1Rk5ch1rnMiJkDD67ejw7YBKM4+REvcvqRuWJb7BLuEg==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    hoist-non-react-statics "^3.3.0"
+    loose-envify "^1.4.0"
+    prop-types "^15.7.2"
+    react-is "^16.9.0"
+
 react-select@^3.0.8:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/react-select/-/react-select-3.1.0.tgz#ab098720b2e9fe275047c993f0d0caf5ded17c27"
@@ -12404,7 +12442,7 @@ react-select@^3.0.8:
     react-input-autosize "^2.2.2"
     react-transition-group "^4.3.0"
 
-react-sizeme@^2.6.7:
+react-sizeme@^2.5.2, react-sizeme@^2.6.7:
   version "2.6.12"
   resolved "https://registry.yarnpkg.com/react-sizeme/-/react-sizeme-2.6.12.tgz#ed207be5476f4a85bf364e92042520499455453e"
   integrity sha512-tL4sCgfmvapYRZ1FO2VmBmjPVzzqgHA7kI8lSJ6JS6L78jXFNRdOZFpXyK6P1NBZvKPPCZxReNgzZNUajAerZw==
@@ -12643,6 +12681,14 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
+redux@^4.0.1:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f"
+  integrity sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==
+  dependencies:
+    loose-envify "^1.4.0"
+    symbol-observable "^1.2.0"
+
 refractor@^2.4.1:
   version "2.10.1"
   resolved "https://registry.yarnpkg.com/refractor/-/refractor-2.10.1.tgz#166c32f114ed16fd96190ad21d5193d3afc7d34e"
@@ -14234,6 +14280,11 @@ svgo@^1.0.0, svgo@^1.2.2, svgo@^1.3.2:
     unquote "~1.1.1"
     util.promisify "~1.0.0"
 
+symbol-observable@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
+  integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
+
 symbol-tree@^3.2.2, symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"