feat(Select): support a11y. Close #327

alibaba-fusion · Mar 27, 2019 · 22a42e7 · 22a42e7
1 parent 0789c92
commit 22a42e7
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 1 deletion.
diff --git a/src/select/auto-complete.jsx b/src/select/auto-complete.jsx
@@ -356,6 +356,9 @@ class AutoComplete extends Base {
                     aria-expanded={this.state.visible}
                     {..._inputProps}
                 />
+                <span className={`${prefix}sr-only`} aria-live="polite">
+                    {this.state.srReader}
+                </span>
             </span>
         );
     }

diff --git a/src/select/base.jsx b/src/select/base.jsx
@@ -148,6 +148,7 @@ export default class Base extends React.Component {
             width: 100,
             // current highlight key
             highlightKey: null,
+            srReader: '',
         };
 
         bindCtx(this, [
@@ -365,7 +366,7 @@ export default class Base extends React.Component {
         const highlightItem = this.dataStore.getEnableDS()[highlightIndex];
         highlightKey = highlightItem ? `${highlightItem.value}` : null;
 
-        this.setState({ highlightKey });
+        this.setState({ highlightKey, srReader: highlightItem.label });
 
         this.scrollMenuIntoView();
 

diff --git a/src/select/select.jsx b/src/select/select.jsx
@@ -905,6 +905,9 @@ class Select extends Base {
                     className={`${prefix}select-inner`}
                     ref={this.saveInputRef}
                 />
+                <span className={`${prefix}sr-only`} aria-live="polite">
+                    {this.state.srReader}
+                </span>
             </span>
         );
     }