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

fix: [Search:AppSearch:Engines:Schema page]Add a new field modal dialog missing title from announcement (#201786)

Browse source 
Closes: #201338

## Description
Dialog modal visible title should be announced for the users, especially
using assistive technology to know what dialog modal, flyout opened.

## What was changed?:

1. aria-labelledby={modalTitleId} attribute was added for mentioned
EuiModal

# Screen
<img width="1330" alt="Screenshot 2024-11-26 at 15 40 20"
src="https://github.com/user-attachments/assets/dc5fd6e3-eaad-43c4-9f56-0eb8644789ae">

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Alexey Antonov 2024-11-27 16:18:48 +02:00 • committed by GitHub
parent 755385a232
commit 87af12d21d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 11 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

14
x-pack/plugins/enterprise_search/public/applications/shared/schema/add_field_modal/index.tsx
View file

@ -22,6 +22,7 @@ import {
EuiModalHeader,
EuiModalHeaderTitle,
EuiSpacer,
useGeneratedHtmlId,
} from '@elastic/eui';
import { SchemaFieldTypeSelect } from '..';
@ -78,10 +79,12 @@ export const SchemaAddFieldModal: React.FC<Props> = ({
? FIELD_NAME_CORRECTED_NOTE(formattedFieldName)
: FIELD_NAME_CORRECT_NOTE;
const modalTitleId = useGeneratedHtmlId();
return (
<EuiModal onClose={closeAddFieldModal} maxWidth={500}>
<EuiModal onClose={closeAddFieldModal} maxWidth={500} aria-labelledby={modalTitleId}>
<EuiModalHeader>
<EuiModalHeaderTitle>{ADD_FIELD_MODAL_TITLE}</EuiModalHeaderTitle>
<EuiModalHeaderTitle id={modalTitleId}>{ADD_FIELD_MODAL_TITLE}</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<EuiCallOut
@ -130,7 +133,12 @@ export const SchemaAddFieldModal: React.FC<Props> = ({
</EuiForm>
</EuiModalBody>
<EuiModalFooter>
<EuiButtonEmpty onClick={closeAddFieldModal}>{CANCEL_BUTTON_LABEL}</EuiButtonEmpty>
<EuiButtonEmpty
data-test-subj="enterpriseSearchSchemaAddFieldModalButton"
onClick={closeAddFieldModal}
>
{CANCEL_BUTTON_LABEL}
</EuiButtonEmpty>
<EuiButton
fill
type="submit"