haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-06 09:21:54 +00:00
Code Issues Releases Wiki Activity

[a11y] dir view: added 'keyboard access' support for operations in the top bar

Browse Source
This commit is contained in:
llj
2021-09-28 15:22:37 +08:00
parent f16c21d195
commit b5d3a6cf6b
3 changed files with 29 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/components/dropdown-menu/item-dropdown-menu.js
View File

@@ -67,6 +67,12 @@ class ItemDropdownMenu extends React.Component {
}
}
onDropdownToggleKeyDown = (e) => {
if (e.key == 'Enter' || e.key == 'Space') {
this.onDropdownToggleClick(e);
}
}
onDropdownToggleClick = (e) => {
e.preventDefault();
e.stopPropagation();
@@ -87,6 +93,12 @@ class ItemDropdownMenu extends React.Component {
);
}
onMenuItemKeyDown = (e) => {
if (e.key == 'Enter' || e.key == 'Space') {
this.onMenuItemClick(e);
}
}
onMenuItemClick = (event) => {
let operation = Utils.getEventData(event, 'toggle');
let item = this.props.item;
@@ -104,12 +116,14 @@ class ItemDropdownMenu extends React.Component {
if (tagName && tagName === 'button') {
return (
<ButtonDropdown isOpen={this.state.isItemMenuShow} toggle={this.onDropdownToggleClick} title={gettext('More Operations')}>
<ButtonDropdown isOpen={this.state.isItemMenuShow} toggle={this.onDropdownToggleClick}>
<DropdownToggle
className={toggleClass}
data-toggle="dropdown"
title={gettext('More Operations')}
aria-label={gettext('More Operations')}
aria-expanded={this.state.isItemMenuShow}
onKeyDown={this.onDropdownToggleKeyDown}
// onClick={this.onDropdownToggleClick}
>
</DropdownToggle>
@@ -119,7 +133,7 @@ class ItemDropdownMenu extends React.Component {
return <DropdownItem key={index} divider />;
} else {
return (
<DropdownItem key={index} data-toggle={menuItem.key} onClick={this.onMenuItemClick}>{menuItem.value}</DropdownItem>
<DropdownItem key={index} data-toggle={menuItem.key} onClick={this.onMenuItemClick} onKeyDown={this.onMenuItemKeyDown}>{menuItem.value}</DropdownItem>
);
}
})}
@@ -136,6 +150,8 @@ class ItemDropdownMenu extends React.Component {
title={gettext('More Operations')}
data-toggle="dropdown"
aria-expanded={this.state.isItemMenuShow}
aria-label={gettext('More Operations')}
onKeyDown={this.onDropdownToggleKeyDown}
// onClick={this.onDropdownToggleClick}
/>
<DropdownMenu>
@@ -144,7 +160,7 @@ class ItemDropdownMenu extends React.Component {
return <DropdownItem key={index} divider />;
} else {
return (
<DropdownItem key={index} data-toggle={menuItem.key} onClick={this.onMenuItemClick}>{menuItem.value}</DropdownItem>
<DropdownItem key={index} data-toggle={menuItem.key} onClick={this.onMenuItemClick} onKeyDown={this.onMenuItemKeyDown}>{menuItem.value}</DropdownItem>
);
}
})}