fix: [ES Serverless home] Programming language options give no context to blind user (#188306)

Closes: https://github.com/elastic/search-team/issues/7618

# Description
A blind screen reader user receives no contextual information when
navigating through the list of programming languages.

# Steps to Reproduce
1. Open a `Search Serverless` project.
2. Navigate to the `Search` project homepage.

# Update Summary
Added the required `aria-label` attribute to the `LanguageGrid` select
button to provide context for screen reader users.

# Screen 

<img width="998" alt="image"
src="https://github.com/user-attachments/assets/e3b34cdc-7f57-46d9-93eb-83becd5ce6d0">
This commit is contained in:
Alexey Antonov 2024-07-17 17:54:38 +03:00 committed by GitHub
parent 3f6b6ffb5b
commit 4903542a79
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -18,6 +18,7 @@ import {
} from '@elastic/eui';
import { LanguageDefinition, Languages } from '@kbn/search-api-panels';
import { i18n } from '@kbn/i18n';
export interface LanguageGridProps {
assetBasePath: string;
@ -52,6 +53,15 @@ export const LanguageGrid: React.FC<LanguageGridProps> = ({
onClick={() => setSelectedLanguage(language)}
color={language.id === selectedLanguage ? 'primary' : 'plain'}
data-test-subj={`${language.id}-client-panel`}
aria-label={i18n.translate(
'xpack.serverlessSearch.languageGrid.selectButton.ariaLabel',
{
defaultMessage: 'Select "{client}" client',
values: {
client: language.id,
},
}
)}
>
<EuiFlexGroup justifyContent="flexStart" responsive={false}>
<EuiFlexItem grow={false}>