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

Browse Source
This commit is contained in:
Imamuzzaki Abu Salam 2025-02-07 16:18:52 +07:00
parent 3a748022be
commit 3219c3f6f0
No known key found for this signature in database
GPG Key ID: E83A7B4A2C91CD79
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 { ShelfIcon } from '../../common-elements/shelfs';
import type { IMenuItem } 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 { scrollIntoViewIfNeeded } from '../../utils';
import { shortenHTTPVerb } from '../../utils/openapi';
import { OptionsContext } from '../OptionsProvider';
import type { IMenuItem } from '../../services';
import { MenuItems } from './MenuItems';
import { MenuItemLabel, MenuItemLi, MenuItemTitle, OperationBadge } from './styled.elements';
export interface MenuItemProps {
item: IMenuItem;
@ -47,9 +47,18 @@ export class MenuItem extends React.Component<MenuItemProps> {
<MenuItemLi
tabIndex={0}
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}
data-item-id={item.id}
role="menuitem"
aria-label={item.sidebarLabel}
aria-expanded={item.expanded}
>
{item.type === 'operation' ? (
<OperationMenuItemContent {...this.props} item={item as OperationModel} />