From 8f06f558b279d0f975708851cdfa1483bd23c45e Mon Sep 17 00:00:00 2001
From: Vitaly Rtishchev <rtivital@gmail.com>
Date: Thu, 2 May 2024 18:45:12 +0400
Subject: [PATCH] [@mantine/core] Fix incorrect `aria-label` handling in
 Select, Autocomplete, MultiSelect and TagsInputs components (#6123)

---
 .../src/components/Autocomplete/Autocomplete.tsx    |  3 ++-
 .../Combobox/OptionsDropdown/OptionsDropdown.tsx    |  6 ++++--
 .../core/src/components/MultiSelect/MultiSelect.tsx |  3 ++-
 .../core/src/components/Select/Select.story.tsx     | 13 +++++++++++++
 .../@mantine/core/src/components/Select/Select.tsx  |  3 ++-
 .../core/src/components/TagsInput/TagsInput.tsx     |  3 ++-
 6 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/packages/@mantine/core/src/components/Autocomplete/Autocomplete.tsx b/packages/@mantine/core/src/components/Autocomplete/Autocomplete.tsx
index 0a0fa50596..bcbe82d0db 100644
--- 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
index c5e2febd39..712f3a9b9a 100644
--- 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
index c1ca0e39bd..395dfe1971 100644
--- 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
index a914e10082..ca3d2bf3b7 100644
--- 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
index ed06f9ba1b..6f13dbba59 100644
--- 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
index bdee954317..c6787e90f5 100644
--- 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}
         />