[Enterprise Search] Improve flash messages screen reader UX (#103412)

* Remove role region on flash messages

- just `aria-live` is enough for screen readers to read it out, and `role` was causing "Flash messages" to get read out loud repeatedly between page navigation even when empty which was annoying and not good

* Further a11y attribute recommendations from @myasonik
This commit is contained in:
Constance 2021-06-28 17:25:24 -07:00 committed by GitHub
parent aafcc473f3
commit 633649460a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -10,7 +10,6 @@ import React, { Fragment } from 'react';
import { useValues, useActions } from 'kea';
import { EuiCallOut, EuiSpacer, EuiGlobalToastList } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FLASH_MESSAGE_TYPES, DEFAULT_TOAST_TIMEOUT } from './constants';
import { FlashMessagesLogic } from './flash_messages_logic';
@ -19,14 +18,7 @@ export const FlashMessages: React.FC = ({ children }) => {
const { messages } = useValues(FlashMessagesLogic);
return (
<div
aria-live="polite"
role="region"
aria-label={i18n.translate('xpack.enterpriseSearch.flashMessages.regionAriaLabel', {
defaultMessage: 'Flash messages',
})}
data-test-subj="FlashMessages"
>
<div role="alert" aria-live="polite" data-test-subj="FlashMessages">
{messages.map(({ type, message, description }, index) => (
<Fragment key={index}>
<EuiCallOut