[Share Modal]Add aria-labelledby for accessibility (#186216)

## Summary
Closes https://github.com/elastic/kibana/issues/184237

Reference:
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role
This commit is contained in:
Rachel Shen 2024-06-24 09:18:55 -06:00 committed by GitHub
parent 175b41a6fa
commit fc2ad3a72a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -25,6 +25,7 @@ import {
EuiTab,
type EuiTabProps,
type CommonProps,
useGeneratedHtmlId,
} from '@elastic/eui';
import {
ModalContextProvider,
@ -69,8 +70,9 @@ const TabbedModalInner: FC<ITabbedModalInner> = ({
}) => {
const { tabs, state, dispatch } =
useModalContext<Array<IModalTabDeclaration<Record<string, any>>>>();
const selectedTabId = state.meta.selectedTabId;
const shareModalHeadingId = useGeneratedHtmlId();
const selectedTabState = useMemo(
() => (selectedTabId ? state[selectedTabId] : {}),
[selectedTabId, state]
@ -114,9 +116,10 @@ const TabbedModalInner: FC<ITabbedModalInner> = ({
style={{ ...(modalWidth ? { width: modalWidth } : {}) }}
maxWidth={true}
data-test-subj="shareContextModal"
aria-labelledby={shareModalHeadingId}
>
<EuiModalHeader>
<EuiModalHeaderTitle>{modalTitle}</EuiModalHeaderTitle>
<EuiModalHeaderTitle id={shareModalHeadingId}>{modalTitle}</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<Fragment>