fix(a11y/dialogsWithTabs) better keyboard/sr support via tabs aria pattern:
- use Tabs ARIA pattern when not on mobile, as we should - make sure keyboard focus is handled correctly also on mobile when moving back and forth the menu items/the content - move some DOM elements so that tab order is consistent - better "close dialog" a11y label, "close" is a bit vague, especially if the dialog itself has lots of other interactive components
This commit is contained in:
Emmanuel Pelletier
parent
44a61c7b88
commit
9c3e565f41
|
|
@ -240,6 +240,7 @@
|
|||
"WaitingForHostTitle": "Waiting for the host ...",
|
||||
"Yes": "Yes",
|
||||
"accessibilityLabel": {
|
||||
"close": "Close dialog",
|
||||
"liveStreaming": "Live Stream"
|
||||
},
|
||||
"add": "Add",
|
||||
|
|
|
|||
|
|
@ -26,6 +26,13 @@ export interface IProps {
|
|||
*/
|
||||
className?: string;
|
||||
|
||||
/**
|
||||
* Id of dom element controlled by this item. Matches aria-controls.
|
||||
* Useful if you need this item as a tab element.
|
||||
*
|
||||
*/
|
||||
controls?: string;
|
||||
|
||||
/**
|
||||
* Custom icon. If used, the icon prop is ignored.
|
||||
* Used to allow custom children instead of just the default icons.
|
||||
|
|
@ -55,7 +62,7 @@ export interface IProps {
|
|||
/**
|
||||
* Keydown handler.
|
||||
*/
|
||||
onKeyDown?: (e?: React.KeyboardEvent) => void;
|
||||
onKeyDown?: (e: React.KeyboardEvent<HTMLDivElement>) => void;
|
||||
|
||||
/**
|
||||
* Keypress handler.
|
||||
|
|
@ -67,6 +74,11 @@ export interface IProps {
|
|||
*/
|
||||
overflowType?: TEXT_OVERFLOW_TYPES;
|
||||
|
||||
/**
|
||||
* You can use this item as a tab. Defaults to button if not set.
|
||||
*/
|
||||
role?: 'tab' | 'button';
|
||||
|
||||
/**
|
||||
* Whether the item is marked as selected.
|
||||
*/
|
||||
|
|
@ -150,6 +162,7 @@ const ContextMenuItem = ({
|
|||
accessibilityLabel,
|
||||
children,
|
||||
className,
|
||||
controls,
|
||||
customIcon,
|
||||
disabled,
|
||||
id,
|
||||
|
|
@ -158,6 +171,7 @@ const ContextMenuItem = ({
|
|||
onKeyDown,
|
||||
onKeyPress,
|
||||
overflowType,
|
||||
role = 'button',
|
||||
selected,
|
||||
testId,
|
||||
text,
|
||||
|
|
@ -167,8 +181,10 @@ const ContextMenuItem = ({
|
|||
|
||||
return (
|
||||
<div
|
||||
aria-controls = { controls }
|
||||
aria-disabled = { disabled }
|
||||
aria-label = { accessibilityLabel }
|
||||
aria-selected = { role === 'tab' ? selected : undefined }
|
||||
className = { cx(styles.contextMenuItem,
|
||||
_overflowDrawer && styles.contextMenuItemDrawer,
|
||||
disabled && styles.contextMenuItemDisabled,
|
||||
|
|
@ -181,8 +197,11 @@ const ContextMenuItem = ({
|
|||
onClick = { disabled ? undefined : onClick }
|
||||
onKeyDown = { disabled ? undefined : onKeyDown }
|
||||
onKeyPress = { disabled ? undefined : onKeyPress }
|
||||
role = 'button'
|
||||
tabIndex = { disabled ? undefined : 0 }>
|
||||
role = { role }
|
||||
tabIndex = { role === 'tab'
|
||||
? selected ? 0 : -1
|
||||
: disabled ? undefined : 0
|
||||
}>
|
||||
{customIcon ? customIcon
|
||||
: icon && <Icon
|
||||
className = { styles.contextMenuItemIcon }
|
||||
|
|
|
|||
|
|
@ -131,7 +131,7 @@ const Dialog = ({
|
|||
</p>
|
||||
{!hideCloseButton && (
|
||||
<ClickableIcon
|
||||
accessibilityLabel = { t('dialog.close') }
|
||||
accessibilityLabel = { t('dialog.accessibilityLabel.close') }
|
||||
icon = { IconCloseLarge }
|
||||
id = 'modal-header-close-button'
|
||||
onClick = { onClose } />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import React, { ComponentType, useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { MoveFocusInside } from 'react-focus-lock';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { makeStyles } from 'tss-react/mui';
|
||||
|
|
@ -89,10 +90,6 @@ const useStyles = makeStyles()(theme => {
|
|||
}
|
||||
},
|
||||
|
||||
closeButtonContainer: {
|
||||
paddingBottom: theme.spacing(4)
|
||||
},
|
||||
|
||||
buttonContainer: {
|
||||
width: '100%',
|
||||
boxSizing: 'border-box',
|
||||
|
|
@ -109,6 +106,7 @@ const useStyles = makeStyles()(theme => {
|
|||
|
||||
backContainer: {
|
||||
display: 'flex',
|
||||
flexDirection: 'row-reverse',
|
||||
alignItems: 'center',
|
||||
|
||||
'& > button': {
|
||||
|
|
@ -127,6 +125,11 @@ const useStyles = makeStyles()(theme => {
|
|||
}
|
||||
},
|
||||
|
||||
header: {
|
||||
order: -1,
|
||||
paddingBottom: theme.spacing(4)
|
||||
},
|
||||
|
||||
footer: {
|
||||
justifyContent: 'flex-end',
|
||||
paddingTop: theme.spacing(4),
|
||||
|
|
@ -168,6 +171,7 @@ const DialogWithTabs = ({
|
|||
const dispatch = useDispatch();
|
||||
const { t } = useTranslation();
|
||||
const [ selectedTab, setSelectedTab ] = useState<string | undefined>(defaultTab ?? tabs[0].name);
|
||||
const [ userSelected, setUserSelected ] = useState(false);
|
||||
const [ tabStates, setTabStates ] = useState(tabs.map(tab => tab.props));
|
||||
const clientWidth = useSelector((state: IReduxState) => state['features/base/responsive-ui'].clientWidth);
|
||||
const [ isMobile, setIsMobile ] = useState(false);
|
||||
|
|
@ -188,18 +192,58 @@ const DialogWithTabs = ({
|
|||
}
|
||||
}, [ isMobile ]);
|
||||
|
||||
const back = useCallback(() => {
|
||||
setSelectedTab(undefined);
|
||||
const onUserSelection = useCallback((tabName?: string) => {
|
||||
setUserSelected(true);
|
||||
setSelectedTab(tabName);
|
||||
}, []);
|
||||
|
||||
const back = useCallback(() => {
|
||||
onUserSelection(undefined);
|
||||
}, []);
|
||||
|
||||
|
||||
// the userSelected state is used to prevent setting focus when the user
|
||||
// didn't actually interact (for the first rendering for example)
|
||||
useEffect(() => {
|
||||
if (userSelected) {
|
||||
document.querySelector<HTMLElement>(isMobile
|
||||
? `.${classes.title}`
|
||||
: `#${`dialogtab-button-${selectedTab}`}`
|
||||
)?.focus();
|
||||
setUserSelected(false);
|
||||
}
|
||||
}, [ isMobile, userSelected, selectedTab ]);
|
||||
|
||||
const onClose = useCallback(() => {
|
||||
dispatch(hideDialog());
|
||||
}, []);
|
||||
|
||||
const onClick = useCallback((tabName: string) => () => {
|
||||
setSelectedTab(tabName);
|
||||
onUserSelection(tabName);
|
||||
}, []);
|
||||
|
||||
const onTabKeyDown = useCallback((index: number) => (event: React.KeyboardEvent<HTMLDivElement>) => {
|
||||
let newTab: IDialogTab<any> | null = null;
|
||||
|
||||
if (event.key === 'ArrowUp') {
|
||||
newTab = index === 0 ? tabs[tabs.length - 1] : tabs[index - 1];
|
||||
}
|
||||
|
||||
if (event.key === 'ArrowDown') {
|
||||
newTab = index === tabs.length - 1 ? tabs[0] : tabs[index + 1];
|
||||
}
|
||||
|
||||
if (newTab !== null) {
|
||||
onUserSelection(newTab.name);
|
||||
}
|
||||
}, [ tabs.length ]);
|
||||
|
||||
const onMobileKeyDown = useCallback((tabName: string) => (event: React.KeyboardEvent<HTMLDivElement>) => {
|
||||
if (event.key === ' ' || event.key === 'Enter') {
|
||||
onUserSelection(tabName);
|
||||
}
|
||||
}, [ classes.contentContainer ]);
|
||||
|
||||
const getTabProps = (tabId: number) => {
|
||||
const tabConfiguration = tabs[tabId];
|
||||
const currentTabState = tabStates[tabId];
|
||||
|
|
@ -256,7 +300,7 @@ const DialogWithTabs = ({
|
|||
|
||||
const closeIcon = useMemo(() => (
|
||||
<ClickableIcon
|
||||
accessibilityLabel = { t('dialog.close') }
|
||||
accessibilityLabel = { t('dialog.accessibilityLabel.close') }
|
||||
icon = { IconCloseLarge }
|
||||
id = 'modal-header-close-button'
|
||||
onClick = { onClose } />
|
||||
|
|
@ -268,21 +312,39 @@ const DialogWithTabs = ({
|
|||
onClose = { onClose }
|
||||
size = 'large'>
|
||||
{(!isMobile || !selectedTab) && (
|
||||
<div className = { classes.sidebar }>
|
||||
<div
|
||||
aria-orientation = 'vertical'
|
||||
className = { classes.sidebar }
|
||||
role = { isMobile ? undefined : 'tablist' }>
|
||||
<div className = { classes.titleContainer }>
|
||||
<h2 className = { classes.title }>{t(titleKey ?? '')}</h2>
|
||||
<MoveFocusInside>
|
||||
<h2
|
||||
className = { classes.title }
|
||||
tabIndex = { -1 }>
|
||||
{t(titleKey ?? '')}
|
||||
</h2>
|
||||
</MoveFocusInside>
|
||||
{isMobile && closeIcon}
|
||||
</div>
|
||||
{tabs.map(tab => {
|
||||
{tabs.map((tab, index) => {
|
||||
const label = t(tab.labelKey);
|
||||
|
||||
/**
|
||||
* When not on mobile, the items behave as tabs,
|
||||
* that's why we set `controls`, `role` and `selected` attributes
|
||||
* only when not on mobile, they are useful only for the tab behavior.
|
||||
*/
|
||||
return (
|
||||
<ContextMenuItem
|
||||
accessibilityLabel = { label }
|
||||
className = { cx(isMobile && classes.menuItemMobile) }
|
||||
controls = { isMobile ? undefined : `dialogtab-content-${tab.name}` }
|
||||
icon = { tab.icon }
|
||||
id = { `dialogtab-button-${tab.name}` }
|
||||
key = { tab.name }
|
||||
onClick = { onClick(tab.name) }
|
||||
onKeyDown = { isMobile ? onMobileKeyDown(tab.name) : onTabKeyDown(index) }
|
||||
role = { isMobile ? undefined : 'tab' }
|
||||
selected = { tab.name === selectedTab }
|
||||
text = { label } />
|
||||
);
|
||||
|
|
@ -290,25 +352,45 @@ const DialogWithTabs = ({
|
|||
</div>
|
||||
)}
|
||||
{(!isMobile || selectedTab) && (
|
||||
<div className = { classes.contentContainer }>
|
||||
<div className = { cx(classes.buttonContainer, classes.closeButtonContainer) }>
|
||||
{isMobile && (
|
||||
<div
|
||||
className = { classes.contentContainer }
|
||||
tabIndex = { isMobile ? -1 : undefined }>
|
||||
{/* DOM order is important for keyboard users: show whole heading first when on mobile… */}
|
||||
{isMobile && (
|
||||
<div className = { cx(classes.buttonContainer, classes.header) }>
|
||||
<span className = { classes.backContainer }>
|
||||
<h2
|
||||
className = { classes.title }
|
||||
tabIndex = { -1 }>
|
||||
{(selectedTabIndex !== null) && t(tabs[selectedTabIndex].labelKey)}
|
||||
</h2>
|
||||
<ClickableIcon
|
||||
accessibilityLabel = { t('dialog.Back') }
|
||||
icon = { IconArrowBack }
|
||||
id = 'modal-header-back-button'
|
||||
onClick = { back } />
|
||||
<h2 className = { classes.title }>
|
||||
{(selectedTabIndex !== null) && t(tabs[selectedTabIndex].labelKey)}
|
||||
</h2>
|
||||
</span>
|
||||
)}
|
||||
{closeIcon}
|
||||
</div>
|
||||
<div className = { classes.content }>
|
||||
{selectedTabComponent}
|
||||
</div>
|
||||
{closeIcon}
|
||||
</div>
|
||||
)}
|
||||
{tabs.map(tab => (
|
||||
<div
|
||||
aria-labelledby = { isMobile ? undefined : `${tab.name}-button` }
|
||||
className = { cx(classes.content, tab.name !== selectedTab && 'hide') }
|
||||
id = { `dialogtab-content-${tab.name}` }
|
||||
key = { tab.name }
|
||||
role = { isMobile ? undefined : 'tabpanel' }
|
||||
tabIndex = { isMobile ? -1 : 0 }>
|
||||
{ tab.name === selectedTab && selectedTabComponent }
|
||||
</div>
|
||||
))}
|
||||
{/* But show the close button *after* tab panels when not on mobile (using tabs).
|
||||
This is so that we can tab back and forth tab buttons and tab panels easily. */}
|
||||
{!isMobile && (
|
||||
<div className = { cx(classes.buttonContainer, classes.header) }>
|
||||
{closeIcon}
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className = { cx(classes.buttonContainer, classes.footer) }>
|
||||
<Button
|
||||
|
|
|
|||
Loading…
Reference in New Issue