feat(@clayui/language-picker): LPD-45714 Add aria-labels or correct reading with the screen reader

Author: veroglez

packages/clay-language-picker/src/__tests__/__snapshots__/index.tsx.snap

@@ -6,7 +6,7 @@ exports[`ClayLanguagePicker renders 1`] = `
     aria-activedescendant=""
     aria-expanded="false"
     aria-haspopup="listbox"
-    aria-label="Select a language, current language: en-US."
+    aria-label="Select a language, current language: English (United States)."
     class="form-control-select btn btn-secondary"
     role="combobox"
     tabindex="0"
@@ -39,7 +39,7 @@ exports[`ClayLanguagePicker renders a class name for the trigger 1`] = `
     aria-activedescendant=""
     aria-expanded="false"
     aria-haspopup="listbox"
-    aria-label="Select a language, current language: en-US."
+    aria-label="Select a language, current language: English (United States)."
     class="trigger-class form-control-select btn btn-secondary"
     role="combobox"
     tabindex="0"
@@ -72,7 +72,7 @@ exports[`ClayLanguagePicker renders a small picker 1`] = `
     aria-activedescendant=""
     aria-expanded="false"
     aria-haspopup="listbox"
-    aria-label="Select a language, current language: en-US."
+    aria-label="Select a language, current language: English (United States)."
     class="form-control-select btn btn-sm btn-secondary"
     role="combobox"
     tabindex="0"
@@ -105,7 +105,7 @@ exports[`ClayLanguagePicker renders hidding the trigger text 1`] = `
     aria-activedescendant=""
     aria-expanded="false"
     aria-haspopup="listbox"
-    aria-label="Select a language, current language: en-US."
+    aria-label="Select a language, current language: English (United States)."
     class="form-control-select hidden-label btn btn-secondary"
     role="combobox"
     tabindex="0"
@@ -133,7 +133,7 @@ exports[`ClayLanguagePicker renders the picker with id 1`] = `
     aria-activedescendant=""
     aria-expanded="false"
     aria-haspopup="listbox"
-    aria-label="Select a language, current language: en-US."
+    aria-label="Select a language, current language: English (United States)."
     class="form-control-select btn btn-secondary"
     id="pickerId"
     role="combobox"
@@ -200,7 +200,7 @@ exports[`ClayLanguagePicker renders with translations 1`] = `
     aria-activedescendant=""
     aria-expanded="false"
     aria-haspopup="listbox"
-    aria-label="Select a language, current language: en-US."
+    aria-label="Select a language, current language: English (United States)."
     class="form-control-select btn btn-secondary"
     role="combobox"
     tabindex="0"

packages/clay-language-picker/src/__tests__/index.tsx

@@ -91,6 +91,7 @@ describe('ClayLanguagePicker', () => {
 			<ClayLanguagePicker
 				labels={{
 					default: 'Default Label',
+					option: 'Option Label',
 					translated: 'Translated Label',
 					translating: 'Translating Label',
 					trigger: 'Trigger Label',
@@ -167,10 +168,10 @@ describe('ClayLanguagePicker', () => {
 
 		fireEvent.click(screen.getByRole('combobox'));
 
-		const esOption = screen.getByRole('option', {name: /es-ES/});
-		const enOption = screen.getByRole('option', {name: /en-US/});
-		const frOption = screen.getByRole('option', {name: /fr-FR/});
-		const nlOption = screen.getByRole('option', {name: /nl-NL/});
+		const esOption = screen.getByRole('option', {name: /Spanish/});
+		const enOption = screen.getByRole('option', {name: /English/});
+		const frOption = screen.getByRole('option', {name: /French/});
+		const nlOption = screen.getByRole('option', {name: /Dutch/});
 
 		expect(enOption).toHaveTextContent('Default');
 		expect(esOption).toHaveTextContent('Translating 2/4');

packages/clay-language-picker/src/index.tsx

@@ -15,6 +15,7 @@ import React from 'react';
 type DisplayType = 'info' | 'secondary' | 'success' | 'warning';
 
 type Item = {
+	displayName?: string;
 	href?: string;
 	id: string;
 	label: string;
@@ -23,6 +24,7 @@ type Item = {
 
 type Labels = {
 	default: string;
+	option: string;
 	trigger: string;
 	translated: string;
 	translating: string;
@@ -129,7 +131,20 @@ const TranslationLabel = ({
 		}
 	}
 
-	return <ClayLabel displayType={displayType}>{label}</ClayLabel>;
+	return (
+		<>
+			<span className="sr-only">
+				{sub(labels.option, [
+					locale.displayName || locale.label,
+					label,
+				])}
+			</span>
+
+			<ClayLabel aria-hidden="true" displayType={displayType}>
+				{label}
+			</ClayLabel>
+		</>
+	);
 };
 
 TranslationLabel.displayName = 'Label';
@@ -184,6 +199,7 @@ Trigger.displayName = 'Trigger';
 const ClayLanguagePicker = ({
 	labels = {
 		default: 'Default',
+		option: '{0} language: {1}.',
 		translated: 'Translated',
 		translating: 'Translating {0}/{1}',
 		trigger: 'Select a language, current language: {0}.',
@@ -207,7 +223,9 @@ const ClayLanguagePicker = ({
 	return (
 		<Picker
 			active={active}
-			ariaLabelTrigger={sub(labels.trigger, [selectedLocale.label])}
+			ariaLabelTrigger={sub(labels.trigger, [
+				selectedLocale.displayName || selectedLocale.label,
+			])}
 			as={Trigger}
 			classNamesTrigger={classNamesTrigger}
 			hideTriggerText={hideTriggerText}
@@ -237,7 +255,9 @@ const ClayLanguagePicker = ({
 										symbol={locale.symbol}
 									/>
 
-									{locale.label}
+									<span aria-hidden="true">
+										{locale.label}
+									</span>
 								</ClayLayout.ContentSection>
 							</ClayLayout.ContentCol>
 							{hasTranslations ? (