Skip to content

Commit

Permalink
[8.17] [Search][a11y] fix radio buttons to focus (#200573) (#201083)
Browse files Browse the repository at this point in the history
# Backport

This will backport the following commits from `main` to `8.17`:
- [[Search][a11y] fix radio buttons to focus
(#200573)](#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":"[email protected]"},"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 <[email protected]>
  • Loading branch information
kibanamachine and saarikabhasi authored Nov 21, 2024
1 parent b5c5948 commit 7739ecf
Show file tree
Hide file tree
Showing 4 changed files with 16 additions and 2 deletions.
4 changes: 2 additions & 2 deletions packages/kbn-search-api-panels/components/cloud_details.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand All @@ -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}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,7 @@ export const AutomaticCrawlScheduler: React.FC = () => {
<EuiFlexItem>
<EuiCheckableCard
id="specificTimeSchedulingCard"
name="scheduling-card"
label={
<>
<EuiTitle size="xxs">
Expand Down Expand Up @@ -137,6 +138,7 @@ export const AutomaticCrawlScheduler: React.FC = () => {
<EuiFlexItem>
<EuiCheckableCard
id="intervalSchedulingCard"
name="scheduling-card"
label={
<>
<EuiTitle size="xxs">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand Down

0 comments on commit 7739ecf

Please sign in to comment.