mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 17:28:26 -04:00
fix: [Security:Assets:Fleet:AgentPolicy:Edit Integration page]Modal dialog missing title from announcement (#205403)
Closes: #204920 ## Description Dialog modal, flyout visible title should be announced for the users, especially using assistive technology to know what dialog modal, flyout opened. ## Changes made: 1. added required `a11y` attributes. See https://eui.elastic.co/#/layout/modal#confirm-modal for more details ## Screen: <img width="1678" alt="image" src="https://github.com/user-attachments/assets/3e29215a-c45d-4e13-8350-94d00e1c4ff0" />
This commit is contained in:
Alexey Antonov
GitHub
parent
3ba3e86495
commit
9c6de6aabc
2 changed files with 160 additions and 2 deletions
|
|
@ -134,10 +134,16 @@ Array [
|
|||
}
|
||||
>
|
||||
<EuiConfirmModal
|
||||
aria-labelledby="generated-id"
|
||||
cancelButtonText="Cancel"
|
||||
confirmButtonText="Confirm"
|
||||
onCancel={[Function]}
|
||||
onConfirm={[Function]}
|
||||
titleProps={
|
||||
Object {
|
||||
"id": "generated-id",
|
||||
}
|
||||
}
|
||||
>
|
||||
<MountWrapper
|
||||
className="kbnOverlayMountWrapper"
|
||||
|
|
@ -155,6 +161,7 @@ exports[`ModalService openConfirm() renders a mountpoint confirm message 2`] = `
|
|||
data-eui="EuiFocusTrap"
|
||||
>
|
||||
<div
|
||||
aria-labelledby="generated-id"
|
||||
aria-modal="true"
|
||||
class="euiModal euiModal--confirmation emotion-euiModal-defaultMaxWidth-confirmation"
|
||||
role="alertdialog"
|
||||
|
|
@ -304,10 +311,16 @@ Array [
|
|||
>
|
||||
<KibanaErrorBoundary>
|
||||
<EuiConfirmModal
|
||||
aria-labelledby="generated-id"
|
||||
cancelButtonText="Cancel"
|
||||
confirmButtonText="Confirm"
|
||||
onCancel={[Function]}
|
||||
onConfirm={[Function]}
|
||||
titleProps={
|
||||
Object {
|
||||
"id": "generated-id",
|
||||
}
|
||||
}
|
||||
>
|
||||
<MountWrapper
|
||||
className="kbnOverlayMountWrapper"
|
||||
|
|
@ -374,10 +387,16 @@ Array [
|
|||
>
|
||||
<KibanaErrorBoundary>
|
||||
<EuiConfirmModal
|
||||
aria-labelledby="generated-id"
|
||||
cancelButtonText="Cancel"
|
||||
confirmButtonText="Confirm"
|
||||
onCancel={[Function]}
|
||||
onConfirm={[Function]}
|
||||
titleProps={
|
||||
Object {
|
||||
"id": "generated-id",
|
||||
}
|
||||
}
|
||||
>
|
||||
<MountWrapper
|
||||
className="kbnOverlayMountWrapper"
|
||||
|
|
@ -434,10 +453,16 @@ Array [
|
|||
}
|
||||
>
|
||||
<EuiConfirmModal
|
||||
aria-labelledby="generated-id"
|
||||
cancelButtonText="Cancel"
|
||||
confirmButtonText="Confirm"
|
||||
onCancel={[Function]}
|
||||
onConfirm={[Function]}
|
||||
titleProps={
|
||||
Object {
|
||||
"id": "generated-id",
|
||||
}
|
||||
}
|
||||
>
|
||||
Some message
|
||||
</EuiConfirmModal>
|
||||
|
|
@ -452,6 +477,7 @@ exports[`ModalService openConfirm() renders a string confirm message 2`] = `
|
|||
data-eui="EuiFocusTrap"
|
||||
>
|
||||
<div
|
||||
aria-labelledby="generated-id"
|
||||
aria-modal="true"
|
||||
class="euiModal euiModal--confirmation emotion-euiModal-defaultMaxWidth-confirmation"
|
||||
role="alertdialog"
|
||||
|
|
@ -597,10 +623,16 @@ Array [
|
|||
>
|
||||
<KibanaErrorBoundary>
|
||||
<EuiConfirmModal
|
||||
aria-labelledby="generated-id"
|
||||
cancelButtonText="Cancel"
|
||||
confirmButtonText="Confirm"
|
||||
onCancel={[Function]}
|
||||
onConfirm={[Function]}
|
||||
titleProps={
|
||||
Object {
|
||||
"id": "generated-id",
|
||||
}
|
||||
}
|
||||
>
|
||||
<MountWrapper
|
||||
className="kbnOverlayMountWrapper"
|
||||
|
|
@ -632,10 +664,16 @@ Array [
|
|||
>
|
||||
<KibanaErrorBoundary>
|
||||
<EuiConfirmModal
|
||||
aria-labelledby="generated-id"
|
||||
cancelButtonText="Cancel"
|
||||
confirmButtonText="Confirm"
|
||||
onCancel={[Function]}
|
||||
onConfirm={[Function]}
|
||||
titleProps={
|
||||
Object {
|
||||
"id": "generated-id",
|
||||
}
|
||||
}
|
||||
>
|
||||
Some message
|
||||
</EuiConfirmModal>
|
||||
|
|
@ -699,10 +737,16 @@ Array [
|
|||
>
|
||||
<KibanaErrorBoundary>
|
||||
<EuiConfirmModal
|
||||
aria-labelledby="generated-id"
|
||||
cancelButtonText="Cancel"
|
||||
confirmButtonText="Confirm"
|
||||
onCancel={[Function]}
|
||||
onConfirm={[Function]}
|
||||
titleProps={
|
||||
Object {
|
||||
"id": "generated-id",
|
||||
}
|
||||
}
|
||||
>
|
||||
<MountWrapper
|
||||
className="kbnOverlayMountWrapper"
|
||||
|
|
@ -734,10 +778,16 @@ Array [
|
|||
>
|
||||
<KibanaErrorBoundary>
|
||||
<EuiConfirmModal
|
||||
aria-labelledby="generated-id"
|
||||
cancelButtonText="Cancel"
|
||||
confirmButtonText="Confirm"
|
||||
onCancel={[Function]}
|
||||
onConfirm={[Function]}
|
||||
titleProps={
|
||||
Object {
|
||||
"id": "generated-id",
|
||||
}
|
||||
}
|
||||
>
|
||||
Some message
|
||||
</EuiConfirmModal>
|
||||
|
|
@ -799,10 +849,16 @@ Array [
|
|||
}
|
||||
>
|
||||
<EuiConfirmModal
|
||||
aria-labelledby="generated-id"
|
||||
cancelButtonText="Cancel"
|
||||
confirmButtonText="Confirm"
|
||||
onCancel={[Function]}
|
||||
onConfirm={[Function]}
|
||||
titleProps={
|
||||
Object {
|
||||
"id": "generated-id",
|
||||
}
|
||||
}
|
||||
>
|
||||
confirm 1
|
||||
</EuiConfirmModal>
|
||||
|
|
@ -881,10 +937,16 @@ Array [
|
|||
>
|
||||
<KibanaErrorBoundary>
|
||||
<EuiConfirmModal
|
||||
aria-labelledby="generated-id"
|
||||
cancelButtonText="Cancel"
|
||||
confirmButtonText="Confirm"
|
||||
onCancel={[Function]}
|
||||
onConfirm={[Function]}
|
||||
titleProps={
|
||||
Object {
|
||||
"id": "generated-id",
|
||||
}
|
||||
}
|
||||
>
|
||||
<MountWrapper
|
||||
className="kbnOverlayMountWrapper"
|
||||
|
|
@ -916,10 +978,16 @@ Array [
|
|||
>
|
||||
<KibanaErrorBoundary>
|
||||
<EuiConfirmModal
|
||||
aria-labelledby="generated-id"
|
||||
cancelButtonText="Cancel"
|
||||
confirmButtonText="Confirm"
|
||||
onCancel={[Function]}
|
||||
onConfirm={[Function]}
|
||||
titleProps={
|
||||
Object {
|
||||
"id": "generated-id",
|
||||
}
|
||||
}
|
||||
>
|
||||
Some message
|
||||
</EuiConfirmModal>
|
||||
|
|
@ -983,10 +1051,16 @@ Array [
|
|||
>
|
||||
<KibanaErrorBoundary>
|
||||
<EuiConfirmModal
|
||||
aria-labelledby="generated-id"
|
||||
cancelButtonText="Cancel"
|
||||
confirmButtonText="Confirm"
|
||||
onCancel={[Function]}
|
||||
onConfirm={[Function]}
|
||||
titleProps={
|
||||
Object {
|
||||
"id": "generated-id",
|
||||
}
|
||||
}
|
||||
>
|
||||
<MountWrapper
|
||||
className="kbnOverlayMountWrapper"
|
||||
|
|
@ -1018,10 +1092,16 @@ Array [
|
|||
>
|
||||
<KibanaErrorBoundary>
|
||||
<EuiConfirmModal
|
||||
aria-labelledby="generated-id"
|
||||
cancelButtonText="Cancel"
|
||||
confirmButtonText="Confirm"
|
||||
onCancel={[Function]}
|
||||
onConfirm={[Function]}
|
||||
titleProps={
|
||||
Object {
|
||||
"id": "generated-id",
|
||||
}
|
||||
}
|
||||
>
|
||||
Some message
|
||||
</EuiConfirmModal>
|
||||
|
|
@ -1083,10 +1163,16 @@ Array [
|
|||
}
|
||||
>
|
||||
<EuiConfirmModal
|
||||
aria-labelledby="generated-id"
|
||||
cancelButtonText="Cancel"
|
||||
confirmButtonText="Confirm"
|
||||
onCancel={[Function]}
|
||||
onConfirm={[Function]}
|
||||
titleProps={
|
||||
Object {
|
||||
"id": "generated-id",
|
||||
}
|
||||
}
|
||||
>
|
||||
some confirm
|
||||
</EuiConfirmModal>
|
||||
|
|
@ -1170,10 +1256,16 @@ Array [
|
|||
>
|
||||
<KibanaErrorBoundary>
|
||||
<EuiConfirmModal
|
||||
aria-labelledby="generated-id"
|
||||
cancelButtonText="Cancel"
|
||||
confirmButtonText="Confirm"
|
||||
onCancel={[Function]}
|
||||
onConfirm={[Function]}
|
||||
titleProps={
|
||||
Object {
|
||||
"id": "generated-id",
|
||||
}
|
||||
}
|
||||
>
|
||||
<MountWrapper
|
||||
className="kbnOverlayMountWrapper"
|
||||
|
|
@ -1205,10 +1297,16 @@ Array [
|
|||
>
|
||||
<KibanaErrorBoundary>
|
||||
<EuiConfirmModal
|
||||
aria-labelledby="generated-id"
|
||||
cancelButtonText="Cancel"
|
||||
confirmButtonText="Confirm"
|
||||
onCancel={[Function]}
|
||||
onConfirm={[Function]}
|
||||
titleProps={
|
||||
Object {
|
||||
"id": "generated-id",
|
||||
}
|
||||
}
|
||||
>
|
||||
Some message
|
||||
</EuiConfirmModal>
|
||||
|
|
@ -1272,10 +1370,16 @@ Array [
|
|||
>
|
||||
<KibanaErrorBoundary>
|
||||
<EuiConfirmModal
|
||||
aria-labelledby="generated-id"
|
||||
cancelButtonText="Cancel"
|
||||
confirmButtonText="Confirm"
|
||||
onCancel={[Function]}
|
||||
onConfirm={[Function]}
|
||||
titleProps={
|
||||
Object {
|
||||
"id": "generated-id",
|
||||
}
|
||||
}
|
||||
>
|
||||
<MountWrapper
|
||||
className="kbnOverlayMountWrapper"
|
||||
|
|
@ -1307,10 +1411,16 @@ Array [
|
|||
>
|
||||
<KibanaErrorBoundary>
|
||||
<EuiConfirmModal
|
||||
aria-labelledby="generated-id"
|
||||
cancelButtonText="Cancel"
|
||||
confirmButtonText="Confirm"
|
||||
onCancel={[Function]}
|
||||
onConfirm={[Function]}
|
||||
titleProps={
|
||||
Object {
|
||||
"id": "generated-id",
|
||||
}
|
||||
}
|
||||
>
|
||||
Some message
|
||||
</EuiConfirmModal>
|
||||
|
|
@ -1454,10 +1564,16 @@ Array [
|
|||
>
|
||||
<KibanaErrorBoundary>
|
||||
<EuiConfirmModal
|
||||
aria-labelledby="generated-id"
|
||||
cancelButtonText="Cancel"
|
||||
confirmButtonText="Confirm"
|
||||
onCancel={[Function]}
|
||||
onConfirm={[Function]}
|
||||
titleProps={
|
||||
Object {
|
||||
"id": "generated-id",
|
||||
}
|
||||
}
|
||||
>
|
||||
<MountWrapper
|
||||
className="kbnOverlayMountWrapper"
|
||||
|
|
@ -1489,10 +1605,16 @@ Array [
|
|||
>
|
||||
<KibanaErrorBoundary>
|
||||
<EuiConfirmModal
|
||||
aria-labelledby="generated-id"
|
||||
cancelButtonText="Cancel"
|
||||
confirmButtonText="Confirm"
|
||||
onCancel={[Function]}
|
||||
onConfirm={[Function]}
|
||||
titleProps={
|
||||
Object {
|
||||
"id": "generated-id",
|
||||
}
|
||||
}
|
||||
>
|
||||
Some message
|
||||
</EuiConfirmModal>
|
||||
|
|
@ -1556,10 +1678,16 @@ Array [
|
|||
>
|
||||
<KibanaErrorBoundary>
|
||||
<EuiConfirmModal
|
||||
aria-labelledby="generated-id"
|
||||
cancelButtonText="Cancel"
|
||||
confirmButtonText="Confirm"
|
||||
onCancel={[Function]}
|
||||
onConfirm={[Function]}
|
||||
titleProps={
|
||||
Object {
|
||||
"id": "generated-id",
|
||||
}
|
||||
}
|
||||
>
|
||||
<MountWrapper
|
||||
className="kbnOverlayMountWrapper"
|
||||
|
|
@ -1591,10 +1719,16 @@ Array [
|
|||
>
|
||||
<KibanaErrorBoundary>
|
||||
<EuiConfirmModal
|
||||
aria-labelledby="generated-id"
|
||||
cancelButtonText="Cancel"
|
||||
confirmButtonText="Confirm"
|
||||
onCancel={[Function]}
|
||||
onConfirm={[Function]}
|
||||
titleProps={
|
||||
Object {
|
||||
"id": "generated-id",
|
||||
}
|
||||
}
|
||||
>
|
||||
Some message
|
||||
</EuiConfirmModal>
|
||||
|
|
@ -1656,10 +1790,16 @@ Array [
|
|||
}
|
||||
>
|
||||
<EuiConfirmModal
|
||||
aria-labelledby="generated-id"
|
||||
cancelButtonText="Cancel"
|
||||
confirmButtonText="Confirm"
|
||||
onCancel={[Function]}
|
||||
onConfirm={[Function]}
|
||||
titleProps={
|
||||
Object {
|
||||
"id": "generated-id",
|
||||
}
|
||||
}
|
||||
>
|
||||
some confirm
|
||||
</EuiConfirmModal>
|
||||
|
|
@ -1885,10 +2025,16 @@ Array [
|
|||
}
|
||||
>
|
||||
<EuiConfirmModal
|
||||
aria-labelledby="generated-id"
|
||||
cancelButtonText="Cancel"
|
||||
confirmButtonText="Confirm"
|
||||
onCancel={[Function]}
|
||||
onConfirm={[Function]}
|
||||
titleProps={
|
||||
Object {
|
||||
"id": "generated-id",
|
||||
}
|
||||
}
|
||||
>
|
||||
confirm 1
|
||||
</EuiConfirmModal>
|
||||
|
|
@ -2019,10 +2165,16 @@ Array [
|
|||
}
|
||||
>
|
||||
<EuiConfirmModal
|
||||
aria-labelledby="generated-id"
|
||||
cancelButtonText="Cancel"
|
||||
confirmButtonText="Confirm"
|
||||
onCancel={[Function]}
|
||||
onConfirm={[Function]}
|
||||
titleProps={
|
||||
Object {
|
||||
"id": "generated-id",
|
||||
}
|
||||
}
|
||||
>
|
||||
some confirm
|
||||
</EuiConfirmModal>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
/* eslint-disable max-classes-per-file */
|
||||
|
||||
import { i18n as t } from '@kbn/i18n';
|
||||
import { EuiModal, EuiConfirmModal } from '@elastic/eui';
|
||||
import { EuiModal, EuiConfirmModal, htmlIdGenerator } from '@elastic/eui';
|
||||
import React from 'react';
|
||||
import { render, unmountComponentAtNode } from 'react-dom';
|
||||
import { Subject } from 'rxjs';
|
||||
|
|
@ -108,9 +108,11 @@ export class ModalService {
|
|||
this.activeModal.close();
|
||||
this.cleanupDom();
|
||||
}
|
||||
const modalTitleId = htmlIdGenerator()();
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
let resolved = false;
|
||||
|
||||
const closeModal = (confirmed: boolean) => {
|
||||
resolved = true;
|
||||
modal.close();
|
||||
|
|
@ -153,7 +155,11 @@ export class ModalService {
|
|||
|
||||
render(
|
||||
<KibanaRenderContextProvider {...startDeps}>
|
||||
<EuiConfirmModal {...props} />
|
||||
<EuiConfirmModal
|
||||
aria-labelledby={modalTitleId}
|
||||
titleProps={{ id: modalTitleId }}
|
||||
{...props}
|
||||
/>
|
||||
</KibanaRenderContextProvider>,
|
||||
targetDomElement
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue