Merge pull request #4414 from ebonow/aria-messages-v4

Aria Live Configuration

Author: JedWatson

.changeset/shaggy-chairs-poke.md

@@ -0,0 +1,6 @@
+---
+'@react-select/docs': minor
+'react-select': minor
+---
+
+Add ariaLiveMessages prop for internationalization and other customizations

docs/examples/CustomAriaLive.js

@@ -0,0 +1,58 @@
+// @flow
+import React, { useState } from 'react';
+
+import Select from 'react-select';
+import { colourOptions } from '../data';
+
+export default function CustomAriaLive() {
+  const [ariaFocusMessage, setAriaFocusMessage] = useState('');
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const style = {
+    blockquote: {
+      fontStyle: 'italic',
+      fontSize: '.75rem',
+      margin: '1rem 0',
+    },
+    label: {
+      fontSize: '.75rem',
+      fontWeight: 'bold',
+      lineHeight: 2,
+    },
+  };
+
+  const onFocus = ({ focused, isDisabled }) => {
+    const msg = `You are currently focused on option ${focused.label}${
+      isDisabled ? ', disabled' : ''
+    }`;
+    setAriaFocusMessage(msg);
+    return msg;
+  };
+
+  const onMenuOpen = () => setIsMenuOpen(true);
+  const onMenuClose = () => setIsMenuOpen(false);
+
+  return (
+    <form>
+      <label style={style.label} id="aria-label" htmlFor="aria-example-input">
+        Select a color
+      </label>
+
+      {!!ariaFocusMessage && !!isMenuOpen && (
+        <blockquote style={style.blockquote}>"{ariaFocusMessage}"</blockquote>
+      )}
+
+      <Select
+        aria-labelledby="aria-label"
+        ariaLiveMessages={{
+          onFocus,
+        }}
+        inputId="aria-example-input"
+        name="aria-live-color"
+        onMenuOpen={onMenuOpen}
+        onMenuClose={onMenuClose}
+        options={colourOptions}
+      />
+    </form>
+  );
+}

docs/examples/index.js

@@ -7,6 +7,7 @@ export { default as AsyncPromises } from './AsyncPromises';
 export { default as BasicGrouped } from './BasicGrouped';
 export { default as BasicMulti } from './BasicMulti';
 export { default as BasicSingle } from './BasicSingle';
+export { default as CustomAriaLive } from './CustomAriaLive';
 export { default as CustomControl } from './CustomControl';
 export { default as CreatableAdvanced } from './CreatableAdvanced';
 export { default as CreatableInputOnly } from './CreatableInputOnly';

docs/pages/advanced/index.js

@@ -5,19 +5,20 @@ import md from '../../markdown/renderer';
 import ExampleWrapper from '../../ExampleWrapper';
 import {
   AccessingInternals,
-  ControlledMenu,
-  OnSelectResetsInput,
   BasicGrouped,
   CreateFilter,
+  ControlledMenu,
+  CustomAriaLive,
   CustomFilterOptions,
   CustomGetOptionLabel,
   CustomGetOptionValue,
   CustomIsOptionDisabled,
   Experimental,
-  Popout,
   MenuBuffer,
   MenuPortal,
   MultiSelectSort,
+  Popout,
+  OnSelectResetsInput,
 } from '../../examples';
 
 export default function Advanced() {
@@ -33,6 +34,20 @@ export default function Advanced() {
       {md`
       # Advanced
 
+      ## Accessibility
+      Accessibility is important. React-select is committed to providing a custom experience to all users and relies heavily on the aria-live spec to provide 
+      a custom experience for all users. As such, we also provide an api to address internationalization or further customization.
+
+      ${(
+        <ExampleWrapper
+          label="Custom aria live example"
+          urlPath="docs/examples/CustomAriaLive.js"
+          raw={require('!!raw-loader!../../examples/CustomAriaLive.js')}
+        >
+          <CustomAriaLive />
+        </ExampleWrapper>
+      )}
+
       ## Sortable MultiSelect
       Using the [react-sortable-hoc](https://www.npmjs.com/package/react-sortable-hoc) package we can easily allow sorting of MultiSelect values by drag and drop.