github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

[8.x] fix: [Search:WorkplaceSearch:API keys page]API key page modal dialog, flyout missing title from announcement (#202716) (#203848)

Browse source 
# Backport

This will backport the following commits from `main` to `8.x`:
- [fix: [Search:WorkplaceSearch:API keys page]API key page modal dialog,
flyout missing title from announcement
(#202716)](https://github.com/elastic/kibana/pull/202716)

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

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

<!--BACKPORT [{"author":{"name":"Alexey
Antonov","email":"alexwizp@gmail.com"},"sourceCommit":{"committedDate":"2024-12-11T16:52:17Z","message":"fix:
[Search:WorkplaceSearch:API keys page]API key page modal dialog, flyout
missing title from announcement (#202716)\n\nCloses:
#201570\r\n\r\n**Description**\r\nDialog modal, flyout visible title
should be announced for the users,\r\nespecially using assistive
technology to know what dialog modal,
flyout\r\nopened.\r\n\r\n**Preconditions**\r\nStateful Workplace Search
-> API keys page is opened.\r\nUse Screen Reader (NVDA).\r\n\r\n**Steps
to reproduce**\r\n\r\n1.Using only keyboard navigate to Create key
button by pressing Tab key.\r\n2.Press Enter.\r\n3.Observe screen
reader.\r\n4.Close the flyout.\r\n5.Navigate to Delete
button.\r\n6.Press Enter.\r\n7.Observe screen reader.\r\n\r\n## Changes
made:\r\n\r\n1. aria-labelledby={modalTitleId} attribute was added for
mentioned\r\nEuiModal\r\n\r\n## Screen:\r\n\r\n<img width=\"988\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/a1dc3586-a725-410c-be39-645bee637b88\">\r\n\r\n<img
width=\"1194\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/aa4fba8e-4683-4bee-a5bc-8d4d2e9bd63c\">","sha":"791aff08e454f87199572e03b884eefd6cd0b116","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.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:
[Search:WorkplaceSearch:API keys page]API key page modal dialog, flyout
missing title from
announcement","number":202716,"url":"https://github.com/elastic/kibana/pull/202716","mergeCommit":{"message":"fix:
[Search:WorkplaceSearch:API keys page]API key page modal dialog, flyout
missing title from announcement (#202716)\n\nCloses:
#201570\r\n\r\n**Description**\r\nDialog modal, flyout visible title
should be announced for the users,\r\nespecially using assistive
technology to know what dialog modal,
flyout\r\nopened.\r\n\r\n**Preconditions**\r\nStateful Workplace Search
-> API keys page is opened.\r\nUse Screen Reader (NVDA).\r\n\r\n**Steps
to reproduce**\r\n\r\n1.Using only keyboard navigate to Create key
button by pressing Tab key.\r\n2.Press Enter.\r\n3.Observe screen
reader.\r\n4.Close the flyout.\r\n5.Navigate to Delete
button.\r\n6.Press Enter.\r\n7.Observe screen reader.\r\n\r\n## Changes
made:\r\n\r\n1. aria-labelledby={modalTitleId} attribute was added for
mentioned\r\nEuiModal\r\n\r\n## Screen:\r\n\r\n<img width=\"988\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/a1dc3586-a725-410c-be39-645bee637b88\">\r\n\r\n<img
width=\"1194\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/aa4fba8e-4683-4bee-a5bc-8d4d2e9bd63c\">","sha":"791aff08e454f87199572e03b884eefd6cd0b116"}},"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/202716","number":202716,"mergeCommit":{"message":"fix:
[Search:WorkplaceSearch:API keys page]API key page modal dialog, flyout
missing title from announcement (#202716)\n\nCloses:
#201570\r\n\r\n**Description**\r\nDialog modal, flyout visible title
should be announced for the users,\r\nespecially using assistive
technology to know what dialog modal,
flyout\r\nopened.\r\n\r\n**Preconditions**\r\nStateful Workplace Search
-> API keys page is opened.\r\nUse Screen Reader (NVDA).\r\n\r\n**Steps
to reproduce**\r\n\r\n1.Using only keyboard navigate to Create key
button by pressing Tab key.\r\n2.Press Enter.\r\n3.Observe screen
reader.\r\n4.Close the flyout.\r\n5.Navigate to Delete
button.\r\n6.Press Enter.\r\n7.Observe screen reader.\r\n\r\n## Changes
made:\r\n\r\n1. aria-labelledby={modalTitleId} attribute was added for
mentioned\r\nEuiModal\r\n\r\n## Screen:\r\n\r\n<img width=\"988\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/a1dc3586-a725-410c-be39-645bee637b88\">\r\n\r\n<img
width=\"1194\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/aa4fba8e-4683-4bee-a5bc-8d4d2e9bd63c\">","sha":"791aff08e454f87199572e03b884eefd6cd0b116"}}]}]
BACKPORT-->

Co-authored-by: Alexey Antonov <alexwizp@gmail.com>
This commit is contained in:
Kibana Machine 2024-12-12 05:48:34 +11:00 • committed by GitHub
parent 177d97dc49
commit c8f3163a1c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 31 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

6
x-pack/plugins/enterprise_search/public/applications/analytics/components/add_analytics_collections/add_analytics_collection_modal.tsx
View file

@ -83,13 +83,17 @@ export const AddAnalyticsCollectionModal: React.FC<AddAnalyticsCollectionModalPr
</EuiModalBody>
<EuiModalFooter>
<EuiButtonEmpty onClick={onClose}>
<EuiButtonEmpty
data-test-subj="enterpriseSearchAddAnalyticsCollectionModalCancelButton"
onClick={onClose}
>
{i18n.translate('xpack.enterpriseSearch.analytics.collectionsCreate.form.cancelButton', {
defaultMessage: 'Cancel',
})}
</EuiButtonEmpty>
<EuiButton
data-test-subj="enterpriseSearchAddAnalyticsCollectionModalCreateButton"
fill
type="submit"
form={modalFormId}

19
x-pack/plugins/enterprise_search/public/applications/workplace_search/views/api_keys/components/api_key_flyout.tsx
View file

@ -23,6 +23,7 @@ import {
EuiButton,
EuiForm,
EuiTitle,
useGeneratedHtmlId,
} from '@elastic/eui';
import { CLOSE_BUTTON_LABEL, SAVE_BUTTON_LABEL } from '../../../../shared/constants';
@ -44,12 +45,20 @@ export const ApiKeyFlyout: React.FC = () => {
activeApiTokenRawName: rawName,
} = useValues(ApiKeysLogic);
const flyoutTitleId = useGeneratedHtmlId();
return (
<EuiPortal>
<EuiFlyout onClose={hideApiKeyForm} hideCloseButton ownFocus size="s">
<EuiFlyout
onClose={hideApiKeyForm}
hideCloseButton
ownFocus
size="s"
aria-labelledby={flyoutTitleId}
>
<EuiFlyoutHeader hasBorder>
<EuiTitle size="m">
<h2>{API_KEY_FLYOUT_TITLE}</h2>
<h2 id={flyoutTitleId}>{API_KEY_FLYOUT_TITLE}</h2>
</EuiTitle>
</EuiFlyoutHeader>
<EuiFlyoutBody>
@ -86,7 +95,11 @@ export const ApiKeyFlyout: React.FC = () => {
<EuiFlyoutFooter>
<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiButtonEmpty iconType="cross" onClick={hideApiKeyForm}>
<EuiButtonEmpty
data-test-subj="enterpriseSearchApiKeyFlyoutButton"
iconType="cross"
onClick={hideApiKeyForm}
>
{CLOSE_BUTTON_LABEL}
</EuiButtonEmpty>
</EuiFlexItem>

11
x-pack/plugins/enterprise_search/public/applications/workplace_search/views/api_keys/components/api_keys_list.tsx
View file

@ -9,7 +9,13 @@ import React from 'react';
import { useActions, useValues } from 'kea';
import { EuiBasicTable, EuiBasicTableColumn, EuiCopy, EuiConfirmModal } from '@elastic/eui';
import {
EuiBasicTable,
EuiBasicTableColumn,
EuiCopy,
EuiConfirmModal,
useGeneratedHtmlId,
} from '@elastic/eui';
import { DELETE_BUTTON_LABEL, CANCEL_BUTTON_LABEL } from '../../../../shared/constants';
import { HiddenText } from '../../../../shared/hidden_text';
@ -32,16 +38,19 @@ export const ApiKeysList: React.FC = () => {
const { deleteApiKey, onPaginate, stageTokenNameForDeletion, hideDeleteModal } =
useActions(ApiKeysLogic);
const { apiTokens, meta, dataLoading, deleteModalVisible } = useValues(ApiKeysLogic);
const modalTitleId = useGeneratedHtmlId();
const deleteModal = (
<EuiConfirmModal
title={API_KEYS_CONFIRM_DELETE_TITLE}
titleProps={{ id: modalTitleId }}
onCancel={hideDeleteModal}
onConfirm={deleteApiKey}
cancelButtonText={CANCEL_BUTTON_LABEL}
confirmButtonText={DELETE_BUTTON_LABEL}
buttonColor="danger"
defaultFocusedButton="confirm"
aria-labelledby={modalTitleId}
>
<p>{API_KEYS_CONFIRM_DELETE_LABEL}</p>
</EuiConfirmModal>