fix: The Language dropdown has no role, name and state announced

src/components/Picker/BasePicker.tsx

@@ -16,6 +16,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import {isMobile} from '@libs/Browser';
 import getOperatingSystem from '@libs/getOperatingSystem';
 import CONST from '@src/CONST';
+import getAccessibilityLabelConfig from './getAccessibilityLabelConfig';
 import type {BasePickerProps} from './types';
 
 type IconToRender = () => ReactElement;
@@ -46,7 +47,7 @@ function BasePicker<TPickerValue>({
     const {translate} = useLocalize();
     const theme = useTheme();
     const styles = useThemeStyles();
-
+    const {shouldAnnounceSelectedLabel, shouldUseCustomAccessibilityLabel} = getAccessibilityLabelConfig();
     const [isHighlighted, setIsHighlighted] = useState(false);
 
     // reference to the root View
@@ -166,6 +167,19 @@ function BasePicker<TPickerValue>({
     // Disable Tab focus on mobile to prevent soft keyboard navigation jumping to picker (#25759)
     const pickerTabIndex = isMobile() ? -1 : 0;
 
+    const selectedItem = items.find((item) => item.value === value);
+    const selectedLabel = selectedItem?.label ?? '';
+    const defaultAccessibilityLabel = accessibilityLabel ?? label ?? selectedLabel;
+    const enhancedAccessibilityLabel = useMemo(() => {
+        if (!defaultAccessibilityLabel) {
+            return selectedLabel || '';
+        }
+        if (selectedLabel) {
+            return `${defaultAccessibilityLabel}${shouldAnnounceSelectedLabel ? `, ${selectedLabel}` : ''}, ${translate(isHighlighted ? 'common.expanded' : 'common.collapsed')}`;
+        }
+        return defaultAccessibilityLabel;
+    }, [defaultAccessibilityLabel, selectedLabel, shouldAnnounceSelectedLabel, translate, isHighlighted]);
+
     if (isDisabled && shouldShowOnlyTextWhenDisabled) {
         return (
             <View>
@@ -183,6 +197,8 @@ function BasePicker<TPickerValue>({
         );
     }
 
+    const actualAccessibilityLabel = shouldUseCustomAccessibilityLabel ? enhancedAccessibilityLabel : defaultAccessibilityLabel;
+
     return (
         <>
             <View
@@ -211,6 +227,8 @@ function BasePicker<TPickerValue>({
                     onClose={disableHighlight}
                     textInputProps={{
                         allowFontScaling: false,
+                        accessibilityRole: CONST.ROLE.COMBOBOX,
+                        accessibilityLabel: actualAccessibilityLabel,
                         importantForAccessibility: 'no-hide-descendants',
                     }}
                     touchableDoneProps={{
@@ -220,8 +238,7 @@ function BasePicker<TPickerValue>({
                     touchableWrapperProps={{
                         accessible: true,
                         accessibilityRole: CONST.ROLE.COMBOBOX,
-                        accessibilityLabel,
-                        accessibilityState: {disabled: isDisabled, expanded: isHighlighted},
+                        accessibilityLabel: actualAccessibilityLabel,
                     }}
                     pickerProps={{
                         ref: picker,
@@ -231,7 +248,8 @@ function BasePicker<TPickerValue>({
                             disableHighlight();
                             onBlur();
                         },
-                        accessibilityLabel,
+                        accessibilityLabel: actualAccessibilityLabel,
+                        accessibilityRole: CONST.ROLE.COMBOBOX,
                         ...additionalPickerEvents(enableHighlight, (inputValue, index) => {
                             onValueChange(inputValue, index);
                             disableHighlight();

src/components/Picker/getAccessibilityLabelConfig/index.native.ts

@@ -0,0 +1,8 @@
+const getAccessibilityLabelConfig = () => {
+    return {
+        shouldAnnounceSelectedLabel: true,
+        shouldUseCustomAccessibilityLabel: true,
+    };
+};
+
+export default getAccessibilityLabelConfig;

src/components/Picker/getAccessibilityLabelConfig/index.ts

@@ -0,0 +1,12 @@
+import {isMobile} from '@libs/Browser';
+
+const getAccessibilityLabelConfig = () => {
+    // Mobile Web: the picker uses the `value` attribute, which VoiceOver already announces.
+    // Avoid duplicating the selected label in the accessibility label.
+    return {
+        shouldAnnounceSelectedLabel: false,
+        shouldUseCustomAccessibilityLabel: isMobile(),
+    };
+};
+
+export default getAccessibilityLabelConfig;

src/languages/de.ts

@@ -452,6 +452,8 @@ const translations: TranslationDeepObject<typeof en> = {
         downloadAsCSV: 'Als CSV herunterladen',
         print: 'Drucken',
         help: 'Hilfe',
+        collapsed: 'Eingeklappt',
+        expanded: 'Ausgeklappt',
         expenseReport: 'Spesenabrechnung',
         expenseReports: 'Spesenabrechnungen',
         rateOutOfPolicy: 'Satz außerhalb der Richtlinie',

src/languages/en.ts

@@ -471,6 +471,8 @@ const translations = {
         downloadAsCSV: 'Download as CSV',
         print: 'Print',
         help: 'Help',
+        collapsed: 'Collapsed',
+        expanded: 'Expanded',
         expenseReport: 'Expense Report',
         expenseReports: 'Expense Reports',
         // @context Rate as a noun, not a verb

src/languages/es.ts

@@ -357,6 +357,8 @@ const translations: TranslationDeepObject<typeof en> = {
         downloadAsCSV: 'Descargar como CSV',
         print: 'Imprimir',
         help: 'Ayuda',
+        collapsed: 'Contraído',
+        expanded: 'Expandido',
         expenseReport: 'Informe de Gastos',
         expenseReports: 'Informes de Gastos',
         rateOutOfPolicy: 'Tasa fuera de póliza',

src/languages/fr.ts

@@ -452,6 +452,8 @@ const translations: TranslationDeepObject<typeof en> = {
         downloadAsCSV: 'Télécharger au format CSV',
         print: 'Imprimer',
         help: 'Aide',
+        collapsed: 'Réduit',
+        expanded: 'Développé',
         expenseReport: 'Note de frais',
         expenseReports: 'Notes de frais',
         rateOutOfPolicy: 'Taux hors politique',

src/languages/it.ts

@@ -452,6 +452,8 @@ const translations: TranslationDeepObject<typeof en> = {
         downloadAsCSV: 'Scarica come CSV',
         print: 'Stampa',
         help: 'Aiuto',
+        collapsed: 'Comprresso',
+        expanded: 'Espanso',
         expenseReport: 'Nota spese',
         expenseReports: 'Note spese',
         rateOutOfPolicy: 'Tariffa fuori policy',

src/languages/ja.ts

@@ -451,6 +451,8 @@ const translations: TranslationDeepObject<typeof en> = {
         downloadAsCSV: 'CSVとしてダウンロード',
         print: '印刷',
         help: 'ヘルプ',
+        collapsed: '折りたたみ',
+        expanded: '展開',
         expenseReport: '経費精算書',
         expenseReports: '経費レポート',
         rateOutOfPolicy: 'ポリシー対象外のレート',

src/languages/nl.ts

@@ -451,6 +451,8 @@ const translations: TranslationDeepObject<typeof en> = {
         downloadAsCSV: 'Downloaden als CSV',
         print: 'Afdrukken',
         help: 'Help',
+        collapsed: 'Ingeklapt',
+        expanded: 'Uitgeklapt',
         expenseReport: 'Declaratie',
         expenseReports: 'Declaraties',
         rateOutOfPolicy: 'Tarief buiten beleid',

src/languages/pl.ts

@@ -451,6 +451,8 @@ const translations: TranslationDeepObject<typeof en> = {
         downloadAsCSV: 'Pobierz jako CSV',
         print: 'Drukuj',
         help: 'Pomoc',
+        collapsed: 'Zwinięte',
+        expanded: 'Rozwinięte',
         expenseReport: 'Raport wydatków',
         expenseReports: 'Raporty wydatków',
         rateOutOfPolicy: 'Stawka poza zasadami',

src/languages/pt-BR.ts

@@ -451,6 +451,8 @@ const translations: TranslationDeepObject<typeof en> = {
         downloadAsCSV: 'Baixar como CSV',
         print: 'Imprimir',
         help: 'Ajuda',
+        collapsed: 'Recolhido',
+        expanded: 'Expandido',
         expenseReport: 'Relatório de despesas',
         expenseReports: 'Relatórios de despesas',
         rateOutOfPolicy: 'Taxa fora da política',

src/languages/zh-hans.ts

@@ -451,6 +451,8 @@ const translations: TranslationDeepObject<typeof en> = {
         downloadAsCSV: '下载为 CSV',
         print: '打印',
         help: '帮助',
+        collapsed: '已折叠',
+        expanded: '已展开',
         expenseReport: '报销报告',
         expenseReports: '报销报告',
         rateOutOfPolicy: '超出政策的费率',