Skip to content

Commit

Permalink
[8.x] fix: [Stateful: Home page] Create an API key dialog information…
Browse files Browse the repository at this point in the history 
… announcement duplication (elastic#196133) (elastic#196272)

# Backport

This will backport the following commits from `main` to `8.x`:
- [fix: [Stateful: Home page] Create an API key dialog information
announcement duplication
(elastic#196133)](elastic#196133)

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

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

<!--BACKPORT [{"author":{"name":"Alexey
Antonov","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-10-15T10:32:32Z","message":"fix:
[Stateful: Home page] Create an API key dialog information announcement
duplication (elastic#196133)\n\nCloses: elastic#195754\r\nCloses: elastic#195252\r\n\r\n##
Description\r\nInformation about an element (in this case, a dialog)
should be\r\nannounced once to the user. If the user navigates to
another element and\r\nthen returns to the same dialog, they should hear
the information about\r\nthe dialog again (one time).\r\n\r\n## What was
changed?:\r\n\r\n1. Added `aria-labelledby` for `EuiFlyout` based on the
EUI\r\nrecommendation. This will correctly pronounce the Flyout header
without\r\nextra text.\r\n2. Added `aria-labelledby` and
`role=\"region\"` for `EuiAccordion` for\r\nthe same reason.\r\n\r\n##
Screen: \r\n\r\n<img width=\"1792\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/8a7ba05f-381a-4bb1-81fc-eb2c5fdb9fb0\">","sha":"0ccfb70c810b037c5aa02270e5a59da284d2b31c","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Project:Accessibility","release_note:skip","v9.0.0","Team:Search","backport:prev-minor"],"title":"fix:
[Stateful: Home page] Create an API key dialog information announcement
duplication","number":196133,"url":"https://github.com/elastic/kibana/pull/196133","mergeCommit":{"message":"fix:
[Stateful: Home page] Create an API key dialog information announcement
duplication (elastic#196133)\n\nCloses: elastic#195754\r\nCloses: elastic#195252\r\n\r\n##
Description\r\nInformation about an element (in this case, a dialog)
should be\r\nannounced once to the user. If the user navigates to
another element and\r\nthen returns to the same dialog, they should hear
the information about\r\nthe dialog again (one time).\r\n\r\n## What was
changed?:\r\n\r\n1. Added `aria-labelledby` for `EuiFlyout` based on the
EUI\r\nrecommendation. This will correctly pronounce the Flyout header
without\r\nextra text.\r\n2. Added `aria-labelledby` and
`role=\"region\"` for `EuiAccordion` for\r\nthe same reason.\r\n\r\n##
Screen: \r\n\r\n<img width=\"1792\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/8a7ba05f-381a-4bb1-81fc-eb2c5fdb9fb0\">","sha":"0ccfb70c810b037c5aa02270e5a59da284d2b31c"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/196133","number":196133,"mergeCommit":{"message":"fix:
[Stateful: Home page] Create an API key dialog information announcement
duplication (elastic#196133)\n\nCloses: elastic#195754\r\nCloses: elastic#195252\r\n\r\n##
Description\r\nInformation about an element (in this case, a dialog)
should be\r\nannounced once to the user. If the user navigates to
another element and\r\nthen returns to the same dialog, they should hear
the information about\r\nthe dialog again (one time).\r\n\r\n## What was
changed?:\r\n\r\n1. Added `aria-labelledby` for `EuiFlyout` based on the
EUI\r\nrecommendation. This will correctly pronounce the Flyout header
without\r\nextra text.\r\n2. Added `aria-labelledby` and
`role=\"region\"` for `EuiAccordion` for\r\nthe same reason.\r\n\r\n##
Screen: \r\n\r\n<img width=\"1792\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/8a7ba05f-381a-4bb1-81fc-eb2c5fdb9fb0\">","sha":"0ccfb70c810b037c5aa02270e5a59da284d2b31c"}}]}]
BACKPORT-->

Co-authored-by: Alexey Antonov <[email protected]>
  • Loading branch information
@kibanamachine @alexwizp
kibanamachine and alexwizp authored Oct 15, 2024
1 parent 529d04f commit 3ebe580
Showing 1 changed file with 14 additions and 4 deletions.
18 changes: 14 additions & 4 deletions ...ck/plugins/enterprise_search/public/applications/shared/api_key/create_api_key_flyout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import {
EuiSwitchEvent,
EuiText,
EuiTitle,
useGeneratedHtmlId,
} from '@elastic/eui';

import { i18n } from '@kbn/i18n';
Expand Down Expand Up @@ -161,6 +162,8 @@ export const CreateApiKeyFlyout: React.FC<CreateApiKeyFlyoutProps> = ({ onClose

const apiKeyRef = useRef<HTMLDivElement>(null);

const uniqueId = useGeneratedHtmlId();

useEffect(() => {
if (createdApiKey && apiKeyRef) {
apiKeyRef.current?.scrollIntoView();
Expand All @@ -178,10 +181,11 @@ export const CreateApiKeyFlyout: React.FC<CreateApiKeyFlyoutProps> = ({ onClose
css={css`
max-width: calc(${euiTheme.size.xxxxl} * 10);
`}
aria-labelledby={`${uniqueId}-header`}
>
<EuiFlyoutHeader hasBorder>
<EuiTitle size="m">
<h2>
<h2 id={`${uniqueId}-header`}>
{i18n.translate('xpack.enterpriseSearch.apiKey.flyoutTitle', {
defaultMessage: 'Create an API key',
})}
Expand Down Expand Up @@ -239,6 +243,8 @@ export const CreateApiKeyFlyout: React.FC<CreateApiKeyFlyoutProps> = ({ onClose
id="apiKey.setup"
paddingSize="l"
initialIsOpen
aria-labelledby={`${uniqueId}-setupHeader`}
role="region"
buttonContent={
<div>
<EuiFlexGroup justifyContent="flexStart" alignItems="center" gutterSize="s">
Expand All @@ -247,7 +253,7 @@ export const CreateApiKeyFlyout: React.FC<CreateApiKeyFlyoutProps> = ({ onClose
</EuiFlexItem>
<EuiFlexItem>
<EuiTitle size="xs">
<h4>
<h4 id={`${uniqueId}-setupHeader`}>
{i18n.translate('xpack.enterpriseSearch.apiKey.setup.title', {
defaultMessage: 'Setup',
})}
Expand Down Expand Up @@ -283,6 +289,8 @@ export const CreateApiKeyFlyout: React.FC<CreateApiKeyFlyoutProps> = ({ onClose
<EuiAccordion
id="apiKey.privileges"
paddingSize="l"
role="region"
aria-labelledby={`${uniqueId}-privilegesHeader`}
buttonContent={
<div style={{ paddingRight: euiTheme.size.s }}>
<EuiFlexGroup justifyContent="flexStart" alignItems="center" gutterSize="s">
Expand All @@ -291,7 +299,7 @@ export const CreateApiKeyFlyout: React.FC<CreateApiKeyFlyoutProps> = ({ onClose
</EuiFlexItem>
<EuiFlexItem>
<EuiTitle size="xs">
<h4>
<h4 id={`${uniqueId}-privilegesHeader`}>
{i18n.translate('xpack.enterpriseSearch.apiKey.privileges.title', {
defaultMessage: 'Security Privileges',
})}
Expand Down Expand Up @@ -338,6 +346,8 @@ export const CreateApiKeyFlyout: React.FC<CreateApiKeyFlyoutProps> = ({ onClose
<EuiAccordion
id="apiKey.metadata"
paddingSize="l"
role="region"
aria-labelledby={`${uniqueId}-metadataHeader`}
buttonContent={
<div style={{ paddingRight: euiTheme.size.s }}>
<EuiFlexGroup justifyContent="flexStart" alignItems="center" gutterSize="s">
Expand All @@ -346,7 +356,7 @@ export const CreateApiKeyFlyout: React.FC<CreateApiKeyFlyoutProps> = ({ onClose
</EuiFlexItem>
<EuiFlexItem>
<EuiTitle size="xs">
<h4>
<h4 id={`${uniqueId}-metadataHeader`}>
{i18n.translate('xpack.enterpriseSearch.apiKey.metadata.title', {
defaultMessage: 'Metadata',
})}
Expand Down

0 comments on commit 3ebe580

Please sign in to comment.