Use React's AriaAttributes type directly rather than recreating (#4941

)

* Update types for aria-invalid

* Reference React's AriaAttributes type rather than redefining

* Use AriaAttributes reference in AriaGuidanceProps

* Add changeset

* Update sour-socks-boil.md

Co-authored-by: Nathan Bierema <nbierema@gmail.com>

.changeset/sour-socks-boil.md

@@ -0,0 +1,5 @@
+---
+'react-select': patch
+---
+
+Use React's AriaAttributes type directly rather than recreating

packages/react-select/src/Select.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {
+  AriaAttributes,
   Component,
   FocusEventHandler,
   FormEventHandler,
@@ -14,11 +15,7 @@ import LiveRegion from './components/LiveRegion';
 
 import { createFilter, FilterOptionOption } from './filters';
 import { DummyInput, ScrollManager } from './internal/index';
-import {
-  AriaLive,
-  AriaLiveMessages,
-  AriaSelection,
-} from './accessibility/index';
+import { AriaLiveMessages, AriaSelection } from './accessibility/index';
 
 import {
   classNames,
@@ -75,15 +72,15 @@ export interface Props<
   Group extends GroupBase<Option>
 > {
   /** HTML ID of an element containing an error message related to the input**/
-  'aria-errormessage'?: string;
+  'aria-errormessage'?: AriaAttributes['aria-errormessage'];
   /** Indicate if the value entered in the field is invalid **/
-  'aria-invalid'?: boolean;
+  'aria-invalid'?: AriaAttributes['aria-invalid'];
   /** Aria label (for assistive tech) */
-  'aria-label'?: string;
+  'aria-label'?: AriaAttributes['aria-label'];
   /** HTML ID of an element that should be used as the label (for assistive tech) */
-  'aria-labelledby'?: string;
+  'aria-labelledby'?: AriaAttributes['aria-labelledby'];
   /** Used to set the priority with which screen reader should treat updates to live regions. The possible settings are: off, polite (default) or assertive */
-  'aria-live'?: AriaLive;
+  'aria-live'?: AriaAttributes['aria-live'];
   /** Customize the messages used by the aria-live component */
   ariaLiveMessages?: AriaLiveMessages<Option, IsMulti, Group>;
   /** Focus the control when it is mounted */

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

@@ -1,3 +1,4 @@
+import type { AriaAttributes } from 'react';
 import {
   ActionMeta,
   GroupBase,
@@ -11,8 +12,6 @@ export type OptionContext = 'menu' | 'value';
 
 export type GuidanceContext = 'menu' | 'input' | 'value';
 
-export type AriaLive = 'polite' | 'off' | 'assertive';
-
 export type AriaSelection<Option, IsMulti extends boolean> =
   | InitialInputFocusedActionMeta<Option, IsMulti>
   | (ActionMeta<Option> & {
@@ -23,7 +22,7 @@ export type AriaSelection<Option, IsMulti extends boolean> =
 
 export interface AriaGuidanceProps {
   /** String value of selectProp aria-label */
-  'aria-label': string | undefined;
+  'aria-label': AriaAttributes['aria-label'];
   /** String indicating user's current context and available keyboard interactivity */
   context: GuidanceContext;
   /** Boolean value of selectProp isSearchable */

packages/react-select/src/index.ts

@@ -46,7 +46,6 @@ export * from './types';
 export type {
   OptionContext,
   GuidanceContext,
-  AriaLive,
   AriaGuidanceProps,
   AriaOnChangeProps,
   AriaOnFilterProps,