[8.17] [Search][a11y] fix radio buttons to focus (#200573) (#201083)

# Backport

This will backport the following commits from `main` to `8.17`:
- [[Search][a11y] fix radio buttons to focus
(#200573)](https://github.com/elastic/kibana/pull/200573)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Saarika
Bhasi","email":"55930906+saarikabhasi@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-11-21T08:37:13Z","message":"[Search][a11y]
fix radio buttons to focus (#200573)\n\n## Summary\r\n\r\nAdded name
attribute in `EuiCheckableCard` components so that focus\r\nstays on
selected radio component when navigated using
keyboard.\r\n\r\n\r\n\r\n\r\n\r\n\r\n### Checklist\r\n- [ ] Any text
added follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)","sha":"d88ce9e549575db8d151e4c353f539850c7b6bac","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Search","v8.16.0","backport:version","v8.17.0","v8.16.1","v8.18.0"],"title":"[Search][a11y]
fix radio buttons to
focus","number":200573,"url":"https://github.com/elastic/kibana/pull/200573","mergeCommit":{"message":"[Search][a11y]
fix radio buttons to focus (#200573)\n\n## Summary\r\n\r\nAdded name
attribute in `EuiCheckableCard` components so that focus\r\nstays on
selected radio component when navigated using
keyboard.\r\n\r\n\r\n\r\n\r\n\r\n\r\n### Checklist\r\n- [ ] Any text
added follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)","sha":"d88ce9e549575db8d151e4c353f539850c7b6bac"}},"sourceBranch":"main","suggestedTargetBranches":["8.16","8.17","8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/200573","number":200573,"mergeCommit":{"message":"[Search][a11y]
fix radio buttons to focus (#200573)\n\n## Summary\r\n\r\nAdded name
attribute in `EuiCheckableCard` components so that focus\r\nstays on
selected radio component when navigated using
keyboard.\r\n\r\n\r\n\r\n\r\n\r\n\r\n### Checklist\r\n- [ ] Any text
added follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)","sha":"d88ce9e549575db8d151e4c353f539850c7b6bac"}},{"branch":"8.16","label":"v8.16.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.17","label":"v8.17.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.x","label":"v8.18.0","branchLabelMappingKey":"^v8.18.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Saarika Bhasi <55930906+saarikabhasi@users.noreply.github.com>
This commit is contained in:
Kibana Machine 2024-11-22 05:42:33 +11:00 committed by GitHub
parent b5c594889c
commit 7739ecff03
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 16 additions and 2 deletions

View file

@ -82,7 +82,7 @@ export const CloudDetailsPanel = ({
<EuiSpacer size="l" />
<EuiCheckableCard
id={CloudDetail.ElasticsearchEndpoint}
name={CloudDetail.ElasticsearchEndpoint}
name="copy-connection-details-choices"
label={
<EuiFlexGroup alignItems="center">
<EuiFlexItem>
@ -123,7 +123,7 @@ export const CloudDetailsPanel = ({
{Boolean(cloudId) && (
<EuiCheckableCard
id={CloudDetail.CloudId}
name={CloudDetail.CloudId}
name="copy-connection-details-choices"
label={
<EuiTitle size="xxs">
<h5>

View file

@ -42,6 +42,11 @@ export const RunOptionsButtons: React.FC<RunOptionsButtonsProps> = ({
onChange={() => selectDeploymentMethod('docker')}
id="xpack.enterpriseSearch.content.connector_detail.configurationConnector.steps.runConnectorService.docker"
checked={selectedDeploymentMethod === 'docker'}
aria-label={i18n.translate(
'xpack.enterpriseSearch.connectorConfiguration.dockerTextLabel.ariaLabel',
{ defaultMessage: 'Run with Docker' }
)}
name="deployment-method-run-connector"
label={
<EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
<EuiFlexItem grow={false}>
@ -64,6 +69,11 @@ export const RunOptionsButtons: React.FC<RunOptionsButtonsProps> = ({
onChange={() => selectDeploymentMethod('source')}
id="xpack.enterpriseSearch.content.connector_detail.configurationConnector.steps.runConnectorService.source"
checked={selectedDeploymentMethod === 'source'}
aria-label={i18n.translate(
'xpack.enterpriseSearch.connectorConfiguration.sourceTextLabel.ariaLabel',
{ defaultMessage: 'Run from source' }
)}
name="deployment-method-run-connector"
label={
<EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
<EuiFlexItem grow={false}>

View file

@ -93,6 +93,7 @@ export const AutomaticCrawlScheduler: React.FC = () => {
<EuiFlexItem>
<EuiCheckableCard
id="specificTimeSchedulingCard"
name="scheduling-card"
label={
<>
<EuiTitle size="xxs">
@ -137,6 +138,7 @@ export const AutomaticCrawlScheduler: React.FC = () => {
<EuiFlexItem>
<EuiCheckableCard
id="intervalSchedulingCard"
name="scheduling-card"
label={
<>
<EuiTitle size="xxs">

View file

@ -42,6 +42,7 @@ export const AuthenticationPanelEditContent: React.FC = () => {
<EuiCheckableCard
data-telemetry-id="entSearchContent-crawler-domainDetail-authentication-basicAuthentication"
id="basicAuthenticationCheckableCard"
name="authenticationCard"
className="authenticationCheckable"
label={
<EuiTitle size="xxs">
@ -75,6 +76,7 @@ export const AuthenticationPanelEditContent: React.FC = () => {
<EuiCheckableCard
data-telemetry-id="entSearchContent-crawler-domainDetail-authentication-authenticationHeader"
id="authenticationHeaderCheckableCard"
name="authenticationCard"
className="authenticationCheckable"
label={
<EuiTitle size="xxs">