[@mantine/core] Fix incorrect aria-label handling in Select, Autoco…

…mplete, MultiSelect and TagsInputs components (#6123)
mantinedev · May 2, 2024 · 8f06f55 · 8f06f55
1 parent 41db831
commit 8f06f55
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 6 deletions.
diff --git a/packages/@mantine/core/src/components/Autocomplete/Autocomplete.tsx b/packages/@mantine/core/src/components/Autocomplete/Autocomplete.tsx
@@ -187,7 +187,8 @@ export const Autocomplete = factory<AutocompleteFactory>((_props, ref) => {
         withScrollArea={withScrollArea}
         maxDropdownHeight={maxDropdownHeight}
         unstyled={unstyled}
-        labelId={`${_id}-label`}
+        labelId={others.label ? `${_id}-label` : undefined}
+        aria-label={others.label ? undefined : others['aria-label']}
         renderOption={renderOption}
         scrollAreaProps={scrollAreaProps}
       />

diff --git a/packages/@mantine/core/src/components/Combobox/OptionsDropdown/OptionsDropdown.tsx b/packages/@mantine/core/src/components/Combobox/OptionsDropdown/OptionsDropdown.tsx
@@ -100,7 +100,8 @@ export interface OptionsDropdownProps {
   checkIconPosition?: 'left' | 'right';
   nothingFoundMessage?: React.ReactNode;
   unstyled: boolean | undefined;
-  labelId: string;
+  labelId: string | undefined;
+  'aria-label': string | undefined;
   renderOption?: (input: ComboboxLikeRenderOptionInput<any>) => React.ReactNode;
   scrollAreaProps: ScrollAreaProps | undefined;
 }
@@ -123,6 +124,7 @@ export function OptionsDropdown({
   labelId,
   renderOption,
   scrollAreaProps,
+  'aria-label': ariaLabel,
 }: OptionsDropdownProps) {
   validateOptions(data);
 
@@ -150,7 +152,7 @@ export function OptionsDropdown({
 
   return (
     <Combobox.Dropdown hidden={hidden || (hiddenWhenEmpty && isEmpty)}>
-      <Combobox.Options labelledBy={labelId}>
+      <Combobox.Options labelledBy={labelId} aria-label={ariaLabel}>
         {withScrollArea ? (
           <ScrollArea.Autosize
             mah={maxDropdownHeight ?? 220}

diff --git a/packages/@mantine/core/src/components/MultiSelect/MultiSelect.tsx b/packages/@mantine/core/src/components/MultiSelect/MultiSelect.tsx
@@ -421,7 +421,8 @@ export const MultiSelect = factory<MultiSelectFactory>((_props, ref) => {
           withCheckIcon={withCheckIcon}
           nothingFoundMessage={nothingFoundMessage}
           unstyled={unstyled}
-          labelId={`${_id}-label`}
+          labelId={label ? `${_id}-label` : undefined}
+          aria-label={label ? undefined : others['aria-label']}
           renderOption={renderOption}
           scrollAreaProps={scrollAreaProps}
         />

diff --git a/packages/@mantine/core/src/components/Select/Select.story.tsx b/packages/@mantine/core/src/components/Select/Select.story.tsx
@@ -17,6 +17,19 @@ export function Usage() {
   );
 }
 
+export function WithAreaLabel() {
+  return (
+    <div style={{ padding: 40 }}>
+      <Select
+        data={['React', 'Angular', 'Svelte']}
+        aria-label="Library"
+        placeholder="Select something"
+        dropdownOpened
+      />
+    </div>
+  );
+}
+
 export function FixedValue() {
   return (
     <div style={{ padding: 40 }}>

diff --git a/packages/@mantine/core/src/components/Select/Select.tsx b/packages/@mantine/core/src/components/Select/Select.tsx
@@ -298,7 +298,8 @@ export const Select = factory<SelectFactory>((_props, ref) => {
           withCheckIcon={withCheckIcon}
           nothingFoundMessage={nothingFoundMessage}
           unstyled={unstyled}
-          labelId={`${_id}-label`}
+          labelId={others.label ? `${_id}-label` : undefined}
+          aria-label={others.label ? undefined : others['aria-label']}
           renderOption={renderOption}
           scrollAreaProps={scrollAreaProps}
         />

diff --git a/packages/@mantine/core/src/components/TagsInput/TagsInput.tsx b/packages/@mantine/core/src/components/TagsInput/TagsInput.tsx
@@ -429,7 +429,8 @@ export const TagsInput = factory<TagsInputFactory>((_props, ref) => {
           withScrollArea={withScrollArea}
           maxDropdownHeight={maxDropdownHeight}
           unstyled={unstyled}
-          labelId={`${_id}-label`}
+          labelId={label ? `${_id}-label` : undefined}
+          aria-label={label ? undefined : others['aria-label']}
           renderOption={renderOption}
           scrollAreaProps={scrollAreaProps}
         />