[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:
parent
aafcc473f3
commit
633649460a
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue