required prop accessibiltiy and functionality improvements (#5536)

* Hide `RequiredInput` from screen readers * Make `required` work without `name` prop Synonymous to default HTML form elements * Add changeset
JedWatson · Mar 22, 2023 · 925cd4a · 925cd4a
1 parent 11a7b34
commit 925cd4a
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/.changeset/gorgeous-bottles-bow.md b/.changeset/gorgeous-bottles-bow.md
@@ -0,0 +1,5 @@
+---
+'react-select': patch
+---
+
+`required` prop accessibiltiy and functionality improvements
diff --git a/packages/react-select/src/Select.tsx b/packages/react-select/src/Select.tsx
@@ -2022,12 +2022,12 @@ export default class Select<
     const { delimiter, isDisabled, isMulti, name, required } = this.props;
     const { selectValue } = this.state;
 
-    if (!name || isDisabled) return;
-
-    if (required && !this.hasValue()) {
+    if (required && !this.hasValue() && !isDisabled) {
       return <RequiredInput name={name} onFocus={this.onValueInputFocus} />;
     }
 
+    if (!name || isDisabled) return;
+
     if (isMulti) {
       if (delimiter) {
         const value = selectValue

diff --git a/packages/react-select/src/internal/RequiredInput.tsx b/packages/react-select/src/internal/RequiredInput.tsx
@@ -3,13 +3,14 @@ import { FocusEventHandler, FunctionComponent } from 'react';
 import { jsx } from '@emotion/react';
 
 const RequiredInput: FunctionComponent<{
-  readonly name: string;
+  readonly name?: string;
   readonly onFocus: FocusEventHandler<HTMLInputElement>;
 }> = ({ name, onFocus }) => (
   <input
     required
     name={name}
     tabIndex={-1}
+    aria-hidden="true"
     onFocus={onFocus}
     css={{
       label: 'requiredInput',