github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-25 02:09:32 -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, EuiModalHeader,
EuiModalHeaderTitle, EuiModalHeaderTitle,
EuiSpacer, EuiSpacer,
useGeneratedHtmlId,
} from '@elastic/eui'; } from '@elastic/eui';
import { SchemaFieldTypeSelect } from '..'; import { SchemaFieldTypeSelect } from '..';
@ -78,10 +79,12 @@ export const SchemaAddFieldModal: React.FC<Props> = ({
? FIELD_NAME_CORRECTED_NOTE(formattedFieldName) ? FIELD_NAME_CORRECTED_NOTE(formattedFieldName)
: FIELD_NAME_CORRECT_NOTE; : FIELD_NAME_CORRECT_NOTE;
const modalTitleId = useGeneratedHtmlId();
return ( return (
<EuiModal onClose={closeAddFieldModal} maxWidth={500}> <EuiModal onClose={closeAddFieldModal} maxWidth={500} aria-labelledby={modalTitleId}>
<EuiModalHeader> <EuiModalHeader>
<EuiModalHeaderTitle>{ADD_FIELD_MODAL_TITLE}</EuiModalHeaderTitle> <EuiModalHeaderTitle id={modalTitleId}>{ADD_FIELD_MODAL_TITLE}</EuiModalHeaderTitle>
</EuiModalHeader> </EuiModalHeader>
<EuiModalBody> <EuiModalBody>
<EuiCallOut <EuiCallOut
@ -130,7 +133,12 @@ export const SchemaAddFieldModal: React.FC<Props> = ({
</EuiForm> </EuiForm>
</EuiModalBody> </EuiModalBody>
<EuiModalFooter> <EuiModalFooter>
<EuiButtonEmpty onClick={closeAddFieldModal}>{CANCEL_BUTTON_LABEL}</EuiButtonEmpty> <EuiButtonEmpty
data-test-subj="enterpriseSearchSchemaAddFieldModalButton"
onClick={closeAddFieldModal}
>
{CANCEL_BUTTON_LABEL}
</EuiButtonEmpty>
<EuiButton <EuiButton
fill fill
type="submit" type="submit"