Kashkovsky intl a11y, attempt 2

packages/react-select/src/Select.js

@@ -18,8 +18,12 @@ import {
   resultsAriaMessage,
   valueEventAriaMessage,
   instructionsAriaMessage,
+  type AccessibilityProp,
+  type AccessibilityConfig,
   type InstructionsContext,
   type ValueEventContext,
+  type ValueEventType,
+  type InstructionEventType,
 } from './accessibility/index';
 
 import {
@@ -75,6 +79,8 @@ type FormatOptionLabelMeta = {
 };
 
 export type Props = {
+  /* Custom ARIA message functions */
+  accessibility?: AccessibilityProp,
   /* Aria label (for assistive tech) */
   'aria-label'?: string,
   /* HTML ID of an element that should be used as the label (for assistive tech) */
@@ -130,6 +136,8 @@ export type Props = {
   filterOption:
     | (({ label: string, value: string, data: OptionType }, string) => boolean)
     | null,
+  /* Sets the form attribute on the input */
+  form?: string,
   /*
     Formats group labels in the menu as React components
 
@@ -243,8 +251,6 @@ export type Props = {
   tabSelectsValue: boolean,
   /* The value of the select; reflected by the selected option */
   value: ValueType,
-  /* Sets the form attribute on the input */
-  form?: string,
 };
 
 export const defaultProps = {
@@ -285,6 +291,13 @@ export const defaultProps = {
   styles: {},
   tabIndex: '0',
   tabSelectsValue: true,
+  accessibility: {
+    valueFocusAriaMessage,
+    optionFocusAriaMessage,
+    resultsAriaMessage,
+    valueEventAriaMessage,
+    instructionsAriaMessage
+  },
 };
 
 type MenuOptions = {
@@ -322,7 +335,7 @@ export default class Select extends Component<Props, State> {
 
   // Misc. Instance Properties
   // ------------------------------
-
+  accessibility: AccessibilityConfig;
   blockOptionHover: boolean = false;
   isComposing: boolean = false;
   clearFocusValueOnUpdate: boolean = false;
@@ -364,6 +377,7 @@ export default class Select extends Component<Props, State> {
     super(props);
     const { value } = props;
     this.cacheComponents = memoizeOne(this.cacheComponents, isEqual).bind(this);
+    this.accessibility = this.getAccessibilityConfig(props.accessibility);
     this.cacheComponents(props.components);
     this.instancePrefix =
       'react-select-' + (this.props.instanceId || ++instanceId);
@@ -404,6 +418,7 @@ export default class Select extends Component<Props, State> {
     const { options, value, menuIsOpen, inputValue } = this.props;
     // re-cache custom components
     this.cacheComponents(nextProps.components);
+    this.accessibility = this.getAccessibilityConfig(nextProps.accessibility);
     // rebuild the menu options
     if (
       nextProps.value !== value ||
@@ -823,26 +838,36 @@ export default class Select extends Component<Props, State> {
   // ==============================
   // Helpers
   // ==============================
+  getAccessibilityConfig (accessibilityObj?: AccessibilityProp): AccessibilityConfig {
+    return {
+      valueFocusAriaMessage,
+      optionFocusAriaMessage,
+      resultsAriaMessage,
+      valueEventAriaMessage,
+      instructionsAriaMessage,
+      ...accessibilityObj,
+    };
+  };
   announceAriaLiveSelection = ({
     event,
     context,
   }: {
-    event: string,
+    event: ValueEventType,
     context: ValueEventContext,
   }) => {
     this.setState({
-      ariaLiveSelection: valueEventAriaMessage(event, context),
+      ariaLiveSelection: this.accessibility.valueEventAriaMessage(event, context),
     });
   };
   announceAriaLiveContext = ({
     event,
     context,
   }: {
-    event: string,
+    event: InstructionEventType,
     context?: InstructionsContext,
   }) => {
     this.setState({
-      ariaLiveContext: instructionsAriaMessage(event, {
+      ariaLiveContext: this.accessibility.instructionsAriaMessage(event, {
         ...context,
         label: this.props['aria-label'],
       }),
@@ -1380,24 +1405,23 @@ export default class Select extends Component<Props, State> {
     const { options, menuIsOpen, inputValue, screenReaderStatus } = this.props;
 
     // An aria live message representing the currently focused value in the select.
-    const focusedValueMsg = focusedValue
-      ? valueFocusAriaMessage({
+    const focusedValueMsg = focusedValue && this.accessibility
+      ? this.accessibility.valueFocusAriaMessage({
           focusedValue,
           getOptionLabel: this.getOptionLabel,
           selectValue,
         })
       : '';
     // An aria live message representing the currently focused option in the select.
     const focusedOptionMsg =
-      focusedOption && menuIsOpen
-        ? optionFocusAriaMessage({
+      focusedOption && menuIsOpen ? this.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 = this.accessibility.resultsAriaMessage({
       inputValue,
       screenReaderMessage: screenReaderStatus({ count: this.countOptions() }),
     });
@@ -1815,10 +1839,14 @@ export default class Select extends Component<Props, State> {
   renderLiveRegion() {
     if (!this.state.isFocused) return null;
     return (
-      <A11yText aria-live="polite">
-        <p id="aria-selection-event">&nbsp;{this.state.ariaLiveSelection}</p>
-        <p id="aria-context">&nbsp;{this.constructAriaLiveMessage()}</p>
-      </A11yText>
+      <span>
+        <A11yText aria-live="assertive">
+          <p id="aria-selection-event">&nbsp;{this.state.ariaLiveSelection}</p>
+        </A11yText>
+        <A11yText aria-live="polite">
+          <p id="aria-context">&nbsp;{this.constructAriaLiveMessage()}</p>
+        </A11yText>
+      </span>
     );
   }
 

packages/react-select/src/__tests__/Select.test.js

@@ -1862,6 +1862,44 @@ test('accessibility > interacting with disabled options shows correct A11yText',
   );
 });
 
+test('accessibility > A11yTexts can be provided through accessibility prop', () => {
+
+  const accessibility = {
+    valueEventAriaMessage: (
+      event,
+      context
+    ) => {
+      const { value, isDisabled } = context;
+      if (event === 'select-option' && !isDisabled) {
+        return `CUSTOM: option ${value} is selected.`;
+      }
+    }
+  };
+
+  let { container } = render(
+    <Select
+      {...BASIC_PROPS}
+      accessibility={accessibility}
+      options={OPTIONS}
+      inputValue={''}
+      menuIsOpen
+    />
+  );
+  const liveRegionEventId = '#aria-selection-event';
+  fireEvent.focus(container.querySelector('.react-select__input input'));
+
+  let menu = container.querySelector('.react-select__menu');
+  fireEvent.keyDown(menu, { keyCode: 40, key: 'ArrowDown' });
+  fireEvent.keyDown(container.querySelector('.react-select__menu'), {
+    keyCode: 13,
+    key: 'Enter',
+  });
+
+  expect(container.querySelector(liveRegionEventId).textContent).toMatch(
+    'CUSTOM: option 0 is selected.'
+  );
+});
+
 test('accessibility > screenReaderStatus function prop > to pass custom text to A11yText', () => {
   const screenReaderStatus = ({ count }) =>
     `There are ${count} options available`;

packages/react-select/src/accessibility/index.js

@@ -2,6 +2,38 @@
 
 import { type OptionType, type OptionsType } from '../types';
 
+export type AccessibilityProp = {
+  valueFocusAriaMessage?: (args: {
+    focusedValue: OptionType,
+    getOptionLabel: (data: OptionType) => string,
+    selectValue: OptionsType
+  }) => string,
+  optionFocusAriaMessage?: (args: {
+    focusedOption: OptionType,
+    getOptionLabel: (data: OptionType) => string,
+    options: OptionsType
+  }) => string,
+  resultsAriaMessage?: (args: { inputValue: string, screenReaderMessage: string }) => string,
+  valueEventAriaMessage?: (event: ValueEventType, context: ValueEventContext) => string,
+  instructionsAriaMessage?: (event: InstructionEventType, context?: InstructionsContext) => string
+};
+
+export type AccessibilityConfig = {
+  valueFocusAriaMessage: (args: {
+    focusedValue: OptionType,
+    getOptionLabel: (data: OptionType) => string,
+    selectValue: OptionsType
+  }) => string,
+  optionFocusAriaMessage: (args: {
+    focusedOption: OptionType,
+    getOptionLabel: (data: OptionType) => string,
+    options: OptionsType
+  }) => string,
+  resultsAriaMessage: (args: { inputValue: string, screenReaderMessage: string }) => string,
+  valueEventAriaMessage: (event: ValueEventType, context: ValueEventContext) => string,
+  instructionsAriaMessage: (event: InstructionEventType, context?: InstructionsContext) => string
+}
+
 export type InstructionsContext = {
   isSearchable?: boolean,
   isMulti?: boolean,
@@ -10,8 +42,10 @@ export type InstructionsContext = {
 };
 export type ValueEventContext = { value: string, isDisabled?: boolean };
 
+export type InstructionEventType = 'menu' | 'input' | 'value';
+
 export const instructionsAriaMessage = (
-  event: string,
+  event: InstructionEventType,
   context?: InstructionsContext = {}
 ) => {
   const { isSearchable, isMulti, label, isDisabled } = context;
@@ -26,22 +60,28 @@ export const instructionsAriaMessage = (
         }`;
     case 'value':
       return 'Use left and right to toggle between focused values, press Backspace to remove the currently focused value';
+    default:
+      return '';
   }
 };
 
+export type ValueEventType = 'deselect-option' | 'pop-value' | 'remove-value' | 'select-option';
+
 export const valueEventAriaMessage = (
-  event: string,
+  event: ValueEventType,
   context: ValueEventContext
 ) => {
   const { value, isDisabled } = context;
-  if (!value) return;
+  if (!value) return '';
   switch (event) {
     case 'deselect-option':
     case 'pop-value':
     case 'remove-value':
       return `option ${value}, deselected.`;
     case 'select-option':
       return isDisabled ? `option ${value} is disabled. Select another option.` : `option ${value}, selected.`;
+    default:
+      return '';
   }
 };