Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-07-10 08:12:23 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: enhance accessibility for menu items with keyboard support (#2655)

Browse Source
This commit is contained in:
Imamuzzaki Abu Salam 2025-04-14 19:54:15 +07:00 committed by GitHub
parent 1b4126fde4
commit 2db293bfb2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/SideMenu/MenuItem.tsx
View File

@ -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} />