Refactor to move all accessibility functionality to new LiveRegion co…

…mponent

.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

@@ -5,7 +5,8 @@ import Select from 'react-select';
 import { colourOptions } from '../data';
 
 export default function CustomAriaLive() {
-  const [ariaFocusMessage, setAriaFocusMessage] = useState('');
+  const [ ariaFocusMessage, setAriaFocusMessage ] = useState('');
+  const [ isMenuOpen, setIsMenuOpen ] = useState(false);
 
   const style = {
     blockquote: {
@@ -20,32 +21,38 @@ export default function CustomAriaLive() {
     },
   };
 
-  const focusOption = ({ focusedOption, getOptionLabel }) => {
-    const msg = `custom aria option focus message: 
-      ${getOptionLabel(focusedOption)}`;
+  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={{
-          focusOption,
+          onFocus,
         }}
         inputId="aria-example-input"
         name="aria-live-color"
+        onMenuOpen={onMenuOpen}
+        onMenuClose={onMenuClose}
         options={colourOptions}
       />
-
-      {!!ariaFocusMessage && (
-        <blockquote style={style.blockquote}>"{ariaFocusMessage}"</blockquote>
-      )}
     </form>
   );
 }

docs/pages/advanced/index.js

@@ -35,7 +35,7 @@ export default function Advanced() {
       # Advanced
 
       ## Accessibility
-      Accessibility is import. React-select is committed to providing a custom experience to all users and relies heavily on the aria-live spec to provide 
+      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.
 
       ${(