mirror of
https://github.com/Redocly/redoc.git
synced 2025-07-10 08:12:23 +03:00
fix: enhance accessibility for menu items with keyboard support (#2655)
This commit is contained in:
parent
1b4126fde4
commit
2db293bfb2
|
@ -2,14 +2,14 @@ import { observer } from 'mobx-react';
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
|
|
||||||
import { ShelfIcon } from '../../common-elements/shelfs';
|
import { ShelfIcon } from '../../common-elements/shelfs';
|
||||||
|
import type { IMenuItem } from '../../services';
|
||||||
import { OperationModel } from '../../services';
|
import { OperationModel } from '../../services';
|
||||||
import { shortenHTTPVerb } from '../../utils/openapi';
|
|
||||||
import { MenuItems } from './MenuItems';
|
|
||||||
import { MenuItemLabel, MenuItemLi, MenuItemTitle, OperationBadge } from './styled.elements';
|
|
||||||
import { l } from '../../services/Labels';
|
import { l } from '../../services/Labels';
|
||||||
import { scrollIntoViewIfNeeded } from '../../utils';
|
import { scrollIntoViewIfNeeded } from '../../utils';
|
||||||
|
import { shortenHTTPVerb } from '../../utils/openapi';
|
||||||
import { OptionsContext } from '../OptionsProvider';
|
import { OptionsContext } from '../OptionsProvider';
|
||||||
import type { IMenuItem } from '../../services';
|
import { MenuItems } from './MenuItems';
|
||||||
|
import { MenuItemLabel, MenuItemLi, MenuItemTitle, OperationBadge } from './styled.elements';
|
||||||
|
|
||||||
export interface MenuItemProps {
|
export interface MenuItemProps {
|
||||||
item: IMenuItem;
|
item: IMenuItem;
|
||||||
|
@ -47,9 +47,18 @@ export class MenuItem extends React.Component<MenuItemProps> {
|
||||||
<MenuItemLi
|
<MenuItemLi
|
||||||
tabIndex={0}
|
tabIndex={0}
|
||||||
onClick={this.activate}
|
onClick={this.activate}
|
||||||
|
onKeyDown={evt => {
|
||||||
|
// Space or Enter key will activate the menu item
|
||||||
|
if (evt.key === 'Enter' || evt.key === ' ') {
|
||||||
|
this.props.onActivate!(this.props.item);
|
||||||
|
evt.stopPropagation();
|
||||||
|
}
|
||||||
|
}}
|
||||||
depth={item.depth}
|
depth={item.depth}
|
||||||
data-item-id={item.id}
|
data-item-id={item.id}
|
||||||
role="menuitem"
|
role="menuitem"
|
||||||
|
aria-label={item.sidebarLabel}
|
||||||
|
aria-expanded={item.expanded}
|
||||||
>
|
>
|
||||||
{item.type === 'operation' ? (
|
{item.type === 'operation' ? (
|
||||||
<OperationMenuItemContent {...this.props} item={item as OperationModel} />
|
<OperationMenuItemContent {...this.props} item={item as OperationModel} />
|
||||||
|
|
Loading…
Reference in New Issue
Block a user