From a8953c196b18aa3bc34f66cf853104863704204f Mon Sep 17 00:00:00 2001
From: Denis Kashkovsky <dannie.k@me.com>
Date: Wed, 16 Jan 2019 17:11:47 +0200
Subject: [PATCH] Issue #3352: Aria messages cannot be localized and one of the
 messages contains wrong statement

---
 src/Select.js                                 | 48 ++++++++++----
 .../__snapshots__/Async.test.js.snap          | 65 +++++++++++++++++++
 .../__snapshots__/AsyncCreatable.test.js.snap | 65 +++++++++++++++++++
 .../__snapshots__/Select.test.js.snap         | 56 ++++++++++++++++
 .../__snapshots__/StateManaged.test.js.snap   |  9 +++
 src/accessibility/index.js                    |  2 +-
 6 files changed, 232 insertions(+), 13 deletions(-)

diff --git a/src/Select.js b/src/Select.js
index efaa5f4b54..0b37a5d43b 100644
--- a/src/Select.js
+++ b/src/Select.js
@@ -75,6 +75,21 @@ type FormatOptionLabelMeta = {
   inputValue: string,
   selectValue: ValueType,
 };
+export type Accessibility = {
+  valueFocusAriaMessage: (args: {
+    focusedValue?: OptionType,
+    getOptionLabel: (data: OptionType) => string,
+    selectValue: OptionsType | Array<OptionType>
+  }) => string,
+  optionFocusAriaMessage: (args: {
+    focusedOption: OptionType,
+    getOptionLabel: (data: OptionType) => string,
+    options: OptionsType
+  }) => string,
+  resultsAriaMessage: (args: { inputValue: string, screenReaderMessage: string }) => string,
+  valueEventAriaMessage: (event: any, context: ValueEventContext) => string,
+  instructionsAriaMessage: (event: any, context?: InstructionsContext) => string
+};
 
 export type Props = {
   /* Aria label (for assistive tech) */
@@ -244,7 +259,9 @@ export type Props = {
   /* The value of the select; reflected by the selected option */
   value: ValueType,
   /* A CSP Nonce which will be used in injected style sheets */
-  nonce?: string
+  nonce?: string,
+  /* Custom ARIA message functions */
+  accessibility?: Accessibility
 };
 
 export const defaultProps = {
@@ -285,6 +302,13 @@ export const defaultProps = {
   styles: {},
   tabIndex: '0',
   tabSelectsValue: true,
+  accessibility: {
+    valueFocusAriaMessage,
+    optionFocusAriaMessage,
+    resultsAriaMessage,
+    valueEventAriaMessage,
+    instructionsAriaMessage
+  },
 };
 
 type MenuOptions = {
@@ -798,7 +822,7 @@ export default class Select extends Component<Props, State> {
     context: ValueEventContext,
   }) => {
     this.setState({
-      ariaLiveSelection: valueEventAriaMessage(event, context),
+      ariaLiveSelection: this.props.accessibility ? this.props.accessibility.valueEventAriaMessage(event, context) : '',
     });
   };
   announceAriaLiveContext = ({
@@ -809,10 +833,10 @@ export default class Select extends Component<Props, State> {
     context?: InstructionsContext,
   }) => {
     this.setState({
-      ariaLiveContext: instructionsAriaMessage(event, {
+      ariaLiveContext: this.props.accessibility ? this.props.accessibility.instructionsAriaMessage(event, {
         ...context,
         label: this.props['aria-label'],
-      }),
+      }) : '',
     });
   };
 
@@ -1337,11 +1361,11 @@ export default class Select extends Component<Props, State> {
       focusedValue,
       focusedOption,
     } = this.state;
-    const { options, menuIsOpen, inputValue, screenReaderStatus } = this.props;
+    const { options, menuIsOpen, inputValue, screenReaderStatus, accessibility } = this.props;
 
     // An aria live message representing the currently focused value in the select.
-    const focusedValueMsg = focusedValue
-      ? valueFocusAriaMessage({
+    const focusedValueMsg = focusedValue && accessibility
+      ? accessibility.valueFocusAriaMessage({
           focusedValue,
           getOptionLabel: this.getOptionLabel,
           selectValue,
@@ -1349,18 +1373,18 @@ export default class Select extends Component<Props, State> {
       : '';
     // An aria live message representing the currently focused option in the select.
     const focusedOptionMsg =
-      focusedOption && menuIsOpen
-        ? optionFocusAriaMessage({
+      focusedOption && menuIsOpen && accessibility
+        ? accessibility.optionFocusAriaMessage({
             focusedOption,
             getOptionLabel: this.getOptionLabel,
             options,
           })
         : '';
     // An aria live message representing the set of focusable results and current searchterm/inputvalue.
-    const resultsMsg = resultsAriaMessage({
+    const resultsMsg = accessibility ? accessibility.resultsAriaMessage({
       inputValue,
       screenReaderMessage: screenReaderStatus({ count: this.countOptions() }),
-    });
+    }) : '';
 
     return `${focusedValueMsg} ${focusedOptionMsg} ${resultsMsg} ${ariaLiveContext}`;
   }
@@ -1390,7 +1414,7 @@ export default class Select extends Component<Props, State> {
           readOnly
           disabled={isDisabled}
           tabIndex={tabIndex}
-          value=""
+          value=''
           emotion={this.emotion}
         />
       );
diff --git a/src/__tests__/__snapshots__/Async.test.js.snap b/src/__tests__/__snapshots__/Async.test.js.snap
index 8006c4ead6..47d785609b 100644
--- a/src/__tests__/__snapshots__/Async.test.js.snap
+++ b/src/__tests__/__snapshots__/Async.test.js.snap
@@ -17,6 +17,15 @@ exports[`defaults - snapshot 1`] = `
     options={Array []}
   >
     <Select
+      accessibility={
+        Object {
+          "instructionsAriaMessage": [Function],
+          "optionFocusAriaMessage": [Function],
+          "resultsAriaMessage": [Function],
+          "valueEventAriaMessage": [Function],
+          "valueFocusAriaMessage": [Function],
+        }
+      }
       backspaceRemovesValue={true}
       blurInputOnSelect={true}
       cacheOptions={false}
@@ -413,6 +422,13 @@ exports[`defaults - snapshot 1`] = `
         selectOption={[Function]}
         selectProps={
           Object {
+            "accessibility": Object {
+              "instructionsAriaMessage": [Function],
+              "optionFocusAriaMessage": [Function],
+              "resultsAriaMessage": [Function],
+              "valueEventAriaMessage": [Function],
+              "valueFocusAriaMessage": [Function],
+            },
             "backspaceRemovesValue": true,
             "blurInputOnSelect": true,
             "cacheOptions": false,
@@ -847,6 +863,13 @@ exports[`defaults - snapshot 1`] = `
             selectOption={[Function]}
             selectProps={
               Object {
+                "accessibility": Object {
+                  "instructionsAriaMessage": [Function],
+                  "optionFocusAriaMessage": [Function],
+                  "resultsAriaMessage": [Function],
+                  "valueEventAriaMessage": [Function],
+                  "valueFocusAriaMessage": [Function],
+                },
                 "backspaceRemovesValue": true,
                 "blurInputOnSelect": true,
                 "cacheOptions": false,
@@ -1273,6 +1296,13 @@ exports[`defaults - snapshot 1`] = `
                 selectOption={[Function]}
                 selectProps={
                   Object {
+                    "accessibility": Object {
+                      "instructionsAriaMessage": [Function],
+                      "optionFocusAriaMessage": [Function],
+                      "resultsAriaMessage": [Function],
+                      "valueEventAriaMessage": [Function],
+                      "valueFocusAriaMessage": [Function],
+                    },
                     "backspaceRemovesValue": true,
                     "blurInputOnSelect": true,
                     "cacheOptions": false,
@@ -1699,6 +1729,13 @@ exports[`defaults - snapshot 1`] = `
                     selectOption={[Function]}
                     selectProps={
                       Object {
+                        "accessibility": Object {
+                          "instructionsAriaMessage": [Function],
+                          "optionFocusAriaMessage": [Function],
+                          "resultsAriaMessage": [Function],
+                          "valueEventAriaMessage": [Function],
+                          "valueFocusAriaMessage": [Function],
+                        },
                         "backspaceRemovesValue": true,
                         "blurInputOnSelect": true,
                         "cacheOptions": false,
@@ -2129,6 +2166,13 @@ exports[`defaults - snapshot 1`] = `
                     onFocus={[Function]}
                     selectProps={
                       Object {
+                        "accessibility": Object {
+                          "instructionsAriaMessage": [Function],
+                          "optionFocusAriaMessage": [Function],
+                          "resultsAriaMessage": [Function],
+                          "valueEventAriaMessage": [Function],
+                          "valueFocusAriaMessage": [Function],
+                        },
                         "backspaceRemovesValue": true,
                         "blurInputOnSelect": true,
                         "cacheOptions": false,
@@ -2641,6 +2685,13 @@ exports[`defaults - snapshot 1`] = `
                 selectOption={[Function]}
                 selectProps={
                   Object {
+                    "accessibility": Object {
+                      "instructionsAriaMessage": [Function],
+                      "optionFocusAriaMessage": [Function],
+                      "resultsAriaMessage": [Function],
+                      "valueEventAriaMessage": [Function],
+                      "valueFocusAriaMessage": [Function],
+                    },
                     "backspaceRemovesValue": true,
                     "blurInputOnSelect": true,
                     "cacheOptions": false,
@@ -3066,6 +3117,13 @@ exports[`defaults - snapshot 1`] = `
                     selectOption={[Function]}
                     selectProps={
                       Object {
+                        "accessibility": Object {
+                          "instructionsAriaMessage": [Function],
+                          "optionFocusAriaMessage": [Function],
+                          "resultsAriaMessage": [Function],
+                          "valueEventAriaMessage": [Function],
+                          "valueFocusAriaMessage": [Function],
+                        },
                         "backspaceRemovesValue": true,
                         "blurInputOnSelect": true,
                         "cacheOptions": false,
@@ -3499,6 +3557,13 @@ exports[`defaults - snapshot 1`] = `
                     selectOption={[Function]}
                     selectProps={
                       Object {
+                        "accessibility": Object {
+                          "instructionsAriaMessage": [Function],
+                          "optionFocusAriaMessage": [Function],
+                          "resultsAriaMessage": [Function],
+                          "valueEventAriaMessage": [Function],
+                          "valueFocusAriaMessage": [Function],
+                        },
                         "backspaceRemovesValue": true,
                         "blurInputOnSelect": true,
                         "cacheOptions": false,
diff --git a/src/__tests__/__snapshots__/AsyncCreatable.test.js.snap b/src/__tests__/__snapshots__/AsyncCreatable.test.js.snap
index f3401a6d26..dfe14b6e62 100644
--- a/src/__tests__/__snapshots__/AsyncCreatable.test.js.snap
+++ b/src/__tests__/__snapshots__/AsyncCreatable.test.js.snap
@@ -39,6 +39,15 @@ exports[`defaults - snapshot 1`] = `
       value={null}
     >
       <Select
+        accessibility={
+          Object {
+            "instructionsAriaMessage": [Function],
+            "optionFocusAriaMessage": [Function],
+            "resultsAriaMessage": [Function],
+            "valueEventAriaMessage": [Function],
+            "valueFocusAriaMessage": [Function],
+          }
+        }
         allowCreateWhileLoading={false}
         backspaceRemovesValue={true}
         blurInputOnSelect={true}
@@ -440,6 +449,13 @@ exports[`defaults - snapshot 1`] = `
           selectOption={[Function]}
           selectProps={
             Object {
+              "accessibility": Object {
+                "instructionsAriaMessage": [Function],
+                "optionFocusAriaMessage": [Function],
+                "resultsAriaMessage": [Function],
+                "valueEventAriaMessage": [Function],
+                "valueFocusAriaMessage": [Function],
+              },
               "allowCreateWhileLoading": false,
               "backspaceRemovesValue": true,
               "blurInputOnSelect": true,
@@ -879,6 +895,13 @@ exports[`defaults - snapshot 1`] = `
               selectOption={[Function]}
               selectProps={
                 Object {
+                  "accessibility": Object {
+                    "instructionsAriaMessage": [Function],
+                    "optionFocusAriaMessage": [Function],
+                    "resultsAriaMessage": [Function],
+                    "valueEventAriaMessage": [Function],
+                    "valueFocusAriaMessage": [Function],
+                  },
                   "allowCreateWhileLoading": false,
                   "backspaceRemovesValue": true,
                   "blurInputOnSelect": true,
@@ -1310,6 +1333,13 @@ exports[`defaults - snapshot 1`] = `
                   selectOption={[Function]}
                   selectProps={
                     Object {
+                      "accessibility": Object {
+                        "instructionsAriaMessage": [Function],
+                        "optionFocusAriaMessage": [Function],
+                        "resultsAriaMessage": [Function],
+                        "valueEventAriaMessage": [Function],
+                        "valueFocusAriaMessage": [Function],
+                      },
                       "allowCreateWhileLoading": false,
                       "backspaceRemovesValue": true,
                       "blurInputOnSelect": true,
@@ -1741,6 +1771,13 @@ exports[`defaults - snapshot 1`] = `
                       selectOption={[Function]}
                       selectProps={
                         Object {
+                          "accessibility": Object {
+                            "instructionsAriaMessage": [Function],
+                            "optionFocusAriaMessage": [Function],
+                            "resultsAriaMessage": [Function],
+                            "valueEventAriaMessage": [Function],
+                            "valueFocusAriaMessage": [Function],
+                          },
                           "allowCreateWhileLoading": false,
                           "backspaceRemovesValue": true,
                           "blurInputOnSelect": true,
@@ -2176,6 +2213,13 @@ exports[`defaults - snapshot 1`] = `
                       onFocus={[Function]}
                       selectProps={
                         Object {
+                          "accessibility": Object {
+                            "instructionsAriaMessage": [Function],
+                            "optionFocusAriaMessage": [Function],
+                            "resultsAriaMessage": [Function],
+                            "valueEventAriaMessage": [Function],
+                            "valueFocusAriaMessage": [Function],
+                          },
                           "allowCreateWhileLoading": false,
                           "backspaceRemovesValue": true,
                           "blurInputOnSelect": true,
@@ -2693,6 +2737,13 @@ exports[`defaults - snapshot 1`] = `
                   selectOption={[Function]}
                   selectProps={
                     Object {
+                      "accessibility": Object {
+                        "instructionsAriaMessage": [Function],
+                        "optionFocusAriaMessage": [Function],
+                        "resultsAriaMessage": [Function],
+                        "valueEventAriaMessage": [Function],
+                        "valueFocusAriaMessage": [Function],
+                      },
                       "allowCreateWhileLoading": false,
                       "backspaceRemovesValue": true,
                       "blurInputOnSelect": true,
@@ -3123,6 +3174,13 @@ exports[`defaults - snapshot 1`] = `
                       selectOption={[Function]}
                       selectProps={
                         Object {
+                          "accessibility": Object {
+                            "instructionsAriaMessage": [Function],
+                            "optionFocusAriaMessage": [Function],
+                            "resultsAriaMessage": [Function],
+                            "valueEventAriaMessage": [Function],
+                            "valueFocusAriaMessage": [Function],
+                          },
                           "allowCreateWhileLoading": false,
                           "backspaceRemovesValue": true,
                           "blurInputOnSelect": true,
@@ -3561,6 +3619,13 @@ exports[`defaults - snapshot 1`] = `
                       selectOption={[Function]}
                       selectProps={
                         Object {
+                          "accessibility": Object {
+                            "instructionsAriaMessage": [Function],
+                            "optionFocusAriaMessage": [Function],
+                            "resultsAriaMessage": [Function],
+                            "valueEventAriaMessage": [Function],
+                            "valueFocusAriaMessage": [Function],
+                          },
                           "allowCreateWhileLoading": false,
                           "backspaceRemovesValue": true,
                           "blurInputOnSelect": true,
diff --git a/src/__tests__/__snapshots__/Select.test.js.snap b/src/__tests__/__snapshots__/Select.test.js.snap
index 4176965e1c..601c5e43c2 100644
--- a/src/__tests__/__snapshots__/Select.test.js.snap
+++ b/src/__tests__/__snapshots__/Select.test.js.snap
@@ -61,6 +61,13 @@ exports[`snapshot - defaults 1`] = `
   selectOption={[Function]}
   selectProps={
     Object {
+      "accessibility": Object {
+        "instructionsAriaMessage": [Function],
+        "optionFocusAriaMessage": [Function],
+        "resultsAriaMessage": [Function],
+        "valueEventAriaMessage": [Function],
+        "valueFocusAriaMessage": [Function],
+      },
       "backspaceRemovesValue": true,
       "blurInputOnSelect": true,
       "captureMenuScroll": false,
@@ -192,6 +199,13 @@ exports[`snapshot - defaults 1`] = `
     selectOption={[Function]}
     selectProps={
       Object {
+        "accessibility": Object {
+          "instructionsAriaMessage": [Function],
+          "optionFocusAriaMessage": [Function],
+          "resultsAriaMessage": [Function],
+          "valueEventAriaMessage": [Function],
+          "valueFocusAriaMessage": [Function],
+        },
         "backspaceRemovesValue": true,
         "blurInputOnSelect": true,
         "captureMenuScroll": false,
@@ -314,6 +328,13 @@ exports[`snapshot - defaults 1`] = `
       selectOption={[Function]}
       selectProps={
         Object {
+          "accessibility": Object {
+            "instructionsAriaMessage": [Function],
+            "optionFocusAriaMessage": [Function],
+            "resultsAriaMessage": [Function],
+            "valueEventAriaMessage": [Function],
+            "valueFocusAriaMessage": [Function],
+          },
           "backspaceRemovesValue": true,
           "blurInputOnSelect": true,
           "captureMenuScroll": false,
@@ -438,6 +459,13 @@ exports[`snapshot - defaults 1`] = `
         selectOption={[Function]}
         selectProps={
           Object {
+            "accessibility": Object {
+              "instructionsAriaMessage": [Function],
+              "optionFocusAriaMessage": [Function],
+              "resultsAriaMessage": [Function],
+              "valueEventAriaMessage": [Function],
+              "valueFocusAriaMessage": [Function],
+            },
             "backspaceRemovesValue": true,
             "blurInputOnSelect": true,
             "captureMenuScroll": false,
@@ -565,6 +593,13 @@ exports[`snapshot - defaults 1`] = `
         onFocus={[Function]}
         selectProps={
           Object {
+            "accessibility": Object {
+              "instructionsAriaMessage": [Function],
+              "optionFocusAriaMessage": [Function],
+              "resultsAriaMessage": [Function],
+              "valueEventAriaMessage": [Function],
+              "valueFocusAriaMessage": [Function],
+            },
             "backspaceRemovesValue": true,
             "blurInputOnSelect": true,
             "captureMenuScroll": false,
@@ -690,6 +725,13 @@ exports[`snapshot - defaults 1`] = `
       selectOption={[Function]}
       selectProps={
         Object {
+          "accessibility": Object {
+            "instructionsAriaMessage": [Function],
+            "optionFocusAriaMessage": [Function],
+            "resultsAriaMessage": [Function],
+            "valueEventAriaMessage": [Function],
+            "valueFocusAriaMessage": [Function],
+          },
           "backspaceRemovesValue": true,
           "blurInputOnSelect": true,
           "captureMenuScroll": false,
@@ -813,6 +855,13 @@ exports[`snapshot - defaults 1`] = `
         selectOption={[Function]}
         selectProps={
           Object {
+            "accessibility": Object {
+              "instructionsAriaMessage": [Function],
+              "optionFocusAriaMessage": [Function],
+              "resultsAriaMessage": [Function],
+              "valueEventAriaMessage": [Function],
+              "valueFocusAriaMessage": [Function],
+            },
             "backspaceRemovesValue": true,
             "blurInputOnSelect": true,
             "captureMenuScroll": false,
@@ -943,6 +992,13 @@ exports[`snapshot - defaults 1`] = `
         selectOption={[Function]}
         selectProps={
           Object {
+            "accessibility": Object {
+              "instructionsAriaMessage": [Function],
+              "optionFocusAriaMessage": [Function],
+              "resultsAriaMessage": [Function],
+              "valueEventAriaMessage": [Function],
+              "valueFocusAriaMessage": [Function],
+            },
             "backspaceRemovesValue": true,
             "blurInputOnSelect": true,
             "captureMenuScroll": false,
diff --git a/src/__tests__/__snapshots__/StateManaged.test.js.snap b/src/__tests__/__snapshots__/StateManaged.test.js.snap
index 0bafe02aa0..a6204f37f3 100644
--- a/src/__tests__/__snapshots__/StateManaged.test.js.snap
+++ b/src/__tests__/__snapshots__/StateManaged.test.js.snap
@@ -2,6 +2,15 @@
 
 exports[`defaults > snapshot 1`] = `
 <Select
+  accessibility={
+    Object {
+      "instructionsAriaMessage": [Function],
+      "optionFocusAriaMessage": [Function],
+      "resultsAriaMessage": [Function],
+      "valueEventAriaMessage": [Function],
+      "valueFocusAriaMessage": [Function],
+    }
+  }
   backspaceRemovesValue={true}
   blurInputOnSelect={true}
   captureMenuScroll={false}
diff --git a/src/accessibility/index.js b/src/accessibility/index.js
index 1eb576abf2..53eb44ea2f 100644
--- a/src/accessibility/index.js
+++ b/src/accessibility/index.js
@@ -9,7 +9,7 @@ export const instructionsAriaMessage = (event, context?: InstructionsContext = {
     case 'input':
       return `${label ? label : 'Select'} is focused ${ isSearchable ? ',type to refine list' : '' }, press Down to open the menu, ${ isMulti ? ' press left to focus selected values' : '' }`;
     case 'value':
-      return 'Use left and right to toggle between focused values, press Enter to remove the currently focused value';
+      return 'Use left and right to toggle between focused values, press Backspace to remove the currently focused value';
   }
 };