Skip to content

Commit

Permalink
fix: [Search:AppSearch:Engines:Schema page]Add a new field modal dial…
Browse files Browse the repository at this point in the history
…og missing title from announcement (#201786)

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>
  • Loading branch information
alexwizp and kibanamachine authored Nov 27, 2024
1 parent 755385a commit 87af12d
Showing 1 changed file with 11 additions and 3 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import {
EuiModalHeader,
EuiModalHeaderTitle,
EuiSpacer,
useGeneratedHtmlId,
} from '@elastic/eui';

import { SchemaFieldTypeSelect } from '..';
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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"
Expand Down

0 comments on commit 87af12d

Please sign in to comment.