mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 09:19:04 -04:00
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:
parent
3f6b6ffb5b
commit
4903542a79
1 changed files with 10 additions and 0 deletions
|
@ -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}>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue