Merge pull request openedx#380 from edx/jkantor/arialabel

fix(inputselect): add aria-label
mukeshmandiwal · Jan 11, 2019 · 41f977d · 41f977d
2 parents 34eb24f + 02e9f8b
commit 41f977d
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 0 deletions.
diff --git a/.storybook/__snapshots__/Storyshots.test.js.snap b/.storybook/__snapshots__/Storyshots.test.js.snap
@@ -22807,6 +22807,7 @@ exports[`Storyshots InputSelect basic usage 1`] = `
           </label>
           <select
             aria-describedby="error-asInput20"
+            aria-label={undefined}
             className="form-control is-invalid-nodanger"
             disabled={false}
             id="asInput20"
@@ -23957,6 +23958,7 @@ exports[`Storyshots InputSelect disabled usage 1`] = `
           </label>
           <select
             aria-describedby="error-asInput24"
+            aria-label="Fruits"
             className="form-control is-invalid-nodanger"
             disabled={true}
             id="asInput24"
@@ -24212,6 +24214,36 @@ exports[`Storyshots InputSelect disabled usage 1`] = `
                           </span>
                         </span>
                       </span>
+                      <span>
+                        <span>
+                          <br />
+
+                        </span>
+                        <span
+                          style={Object {}}
+                        >
+                          ariaLabel
+                        </span>
+                        <span>
+                          =
+                          <span
+                            style={Object {}}
+                          >
+                            <span
+                              style={
+                                Object {
+                                  "color": "#22a",
+                                  "wordBreak": "break-word",
+                                }
+                              }
+                            >
+                              "
+                              Fruits
+                              "
+                            </span>
+                          </span>
+                        </span>
+                      </span>
                       <span>
                         <span>
                           <br />
@@ -25118,6 +25150,7 @@ exports[`Storyshots InputSelect separate labels and values 1`] = `
           </label>
           <select
             aria-describedby="error-asInput21"
+            aria-label={undefined}
             className="form-control is-invalid-nodanger"
             disabled={false}
             id="asInput21"
@@ -26421,6 +26454,7 @@ exports[`Storyshots InputSelect separate option groups 1`] = `
           </label>
           <select
             aria-describedby="error-asInput22"
+            aria-label={undefined}
             className="form-control is-invalid-nodanger"
             disabled={false}
             id="asInput22"
@@ -28084,6 +28118,7 @@ exports[`Storyshots InputSelect with disabled option 1`] = `
           </label>
           <select
             aria-describedby="error-asInput25"
+            aria-label={undefined}
             className="form-control is-invalid-nodanger"
             disabled={false}
             id="asInput25"
@@ -29415,6 +29450,7 @@ exports[`Storyshots InputSelect with validation 1`] = `
           </label>
           <select
             aria-describedby="error-asInput23"
+            aria-label={undefined}
             className="form-control is-invalid-nodanger"
             disabled={false}
             id="asInput23"

diff --git a/src/InputSelect/InputSelect.stories.jsx b/src/InputSelect/InputSelect.stories.jsx
@@ -104,6 +104,7 @@ storiesOf('InputSelect', module)
     <InputSelect
       name="fruits"
       label="Fruits"
+      ariaLabel="Fruits"
       value="strawberry"
       options={[
         'apple',

diff --git a/src/InputSelect/README.md b/src/InputSelect/README.md
@@ -9,3 +9,6 @@ Provides an selector component called InputSelect that allows for various select
 
 ### `options` (string array or object array; required)
 `options` specifies the list of options that the component will allow users to select from.  This can be a simple array of strings, listing their options.  It can also be an array containing more complex object in order to show the options in a grouped format.
+
+ ### `ariaLabel` (string; optional)
+`ariaLabel` specifies the aria-label for the input element.
diff --git a/src/InputSelect/index.jsx b/src/InputSelect/index.jsx
@@ -53,6 +53,7 @@ class Select extends React.Component {
         type="select"
         name={props.name}
         value={props.value}
+        aria-label={props.ariaLabel}
         aria-describedby={props.describedBy}
         onChange={props.onChange}
         onBlur={props.onBlur}