From 22a42e74634912a8eb3325d2b1805a35676d6f4e Mon Sep 17 00:00:00 2001
From: bindoon <bindoon@sina.com>
Date: Wed, 27 Mar 2019 21:23:55 +0800
Subject: [PATCH] feat(Select): support a11y. Close #327

---
 src/select/auto-complete.jsx | 3 +++
 src/select/base.jsx          | 3 ++-
 src/select/select.jsx        | 3 +++
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/select/auto-complete.jsx b/src/select/auto-complete.jsx
index 0278f6c182..e9e4b43361 100644
--- 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
index d85d696211..f420725a33 100644
--- 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
index ed7ebd71f8..dd81f5bef1 100644
--- 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>
         );
     }