haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-10 11:21:29 +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) => { onDropdownToggleClick = (e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); 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) => { onMenuItemClick = (event) => {
let operation = Utils.getEventData(event, 'toggle'); let operation = Utils.getEventData(event, 'toggle');
let item = this.props.item; let item = this.props.item;
@@ -104,12 +116,14 @@ class ItemDropdownMenu extends React.Component {
if (tagName && tagName === 'button') { if (tagName && tagName === 'button') {
return ( return (
<ButtonDropdown isOpen={this.state.isItemMenuShow} toggle={this.onDropdownToggleClick} title={gettext('More Operations')}> <ButtonDropdown isOpen={this.state.isItemMenuShow} toggle={this.onDropdownToggleClick}>
<DropdownToggle <DropdownToggle
className={toggleClass} className={toggleClass}
data-toggle="dropdown" data-toggle="dropdown"
title={gettext('More Operations')} title={gettext('More Operations')}
aria-label={gettext('More Operations')}
aria-expanded={this.state.isItemMenuShow} aria-expanded={this.state.isItemMenuShow}
onKeyDown={this.onDropdownToggleKeyDown}
// onClick={this.onDropdownToggleClick} // onClick={this.onDropdownToggleClick}
> >
</DropdownToggle> </DropdownToggle>
@@ -119,7 +133,7 @@ class ItemDropdownMenu extends React.Component {
return <DropdownItem key={index} divider />; return <DropdownItem key={index} divider />;
} else { } else {
return ( 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')} title={gettext('More Operations')}
data-toggle="dropdown" data-toggle="dropdown"
aria-expanded={this.state.isItemMenuShow} aria-expanded={this.state.isItemMenuShow}
aria-label={gettext('More Operations')}
onKeyDown={this.onDropdownToggleKeyDown}
// onClick={this.onDropdownToggleClick} // onClick={this.onDropdownToggleClick}
/> />
<DropdownMenu> <DropdownMenu>
@@ -144,7 +160,7 @@ class ItemDropdownMenu extends React.Component {
return <DropdownItem key={index} divider />; return <DropdownItem key={index} divider />;
} else { } else {
return ( 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>
); );
} }
})} })}

12
frontend/src/components/toolbar/multiple-dir-operation-toolbar.js
View File

@@ -361,16 +361,16 @@ class MultipleDirOperationToolbar extends React.Component {
<ButtonGroup className="flex-row group-operations"> <ButtonGroup className="flex-row group-operations">
{(userPerm === 'rw' || userPerm === 'admin' || isCustomPermission) && ( {(userPerm === 'rw' || userPerm === 'admin' || isCustomPermission) && (
<Fragment> <Fragment>
{canModify && <Button className="secondary group-op-item action-icon sf2-icon-move" title={gettext('Move')} onClick={this.onMoveToggle}></Button>} {canModify && <Button className="secondary group-op-item action-icon sf2-icon-move" title={gettext('Move')} aria-label={gettext('Move')} onClick={this.onMoveToggle}></Button>}
{canCopy && <Button className="secondary group-op-item action-icon sf2-icon-copy" title={gettext('Copy')} onClick={this.onCopyToggle}></Button>} {canCopy && <Button className="secondary group-op-item action-icon sf2-icon-copy" title={gettext('Copy')} aria-label={gettext('Copy')} onClick={this.onCopyToggle}></Button>}
{canDelete && <Button className="secondary group-op-item action-icon sf2-icon-delete" title={gettext('Delete')} onClick={this.onItemsDelete}></Button>} {canDelete && <Button className="secondary group-op-item action-icon sf2-icon-delete" title={gettext('Delete')} aria-label={gettext('Delete')} onClick={this.onItemsDelete}></Button>}
{canDownload && <Button className="secondary group-op-item action-icon sf2-icon-download" title={gettext('Download')} onClick={this.onItemsDownload}></Button>} {canDownload && <Button className="secondary group-op-item action-icon sf2-icon-download" title={gettext('Download')} aria-label={gettext('Download')} onClick={this.onItemsDownload}></Button>}
</Fragment> </Fragment>
)} )}
{userPerm === 'r' && ( {userPerm === 'r' && (
<Fragment> <Fragment>
<Button className="secondary group-op-item action-icon sf2-icon-copy" title={gettext('Copy')} onClick={this.onCopyToggle}></Button> <Button className="secondary group-op-item action-icon sf2-icon-copy" title={gettext('Copy')} aria-label={gettext('Copy')} onClick={this.onCopyToggle}></Button>
<Button className="secondary group-op-item action-icon sf2-icon-download" title={gettext('Download')} onClick={this.onItemsDownload}></Button> <Button className="secondary group-op-item action-icon sf2-icon-download" title={gettext('Download')} aria-label={gettext('Download')} onClick={this.onItemsDownload}></Button>
</Fragment> </Fragment>
)} )}
{this.props.selectedDirentList.length === 1 && {this.props.selectedDirentList.length === 1 &&

8
frontend/src/components/toolbar/view-mode-toolbar.js
View File

@@ -28,13 +28,13 @@ class ViewModeToolbar extends React.Component {
return ( return (
<React.Fragment> <React.Fragment>
<div className="view-mode btn-group"> <div className="view-mode btn-group">
<button className={`${baseClass} sf2-icon-list-view ${this.props.currentMode === 'list' ? 'current-mode' : ''}`} id='list' title={gettext('List')} onClick={this.switchViewMode}></button> <button className={`${baseClass} sf2-icon-list-view ${this.props.currentMode === 'list' ? 'current-mode' : ''}`} id='list' title={gettext('List')} aria-label={gettext('List')} onClick={this.switchViewMode}></button>
<button className={`${baseClass} sf2-icon-grid-view ${this.props.currentMode === 'grid' ? 'current-mode' : ''}`} id='grid' title={gettext('Grid')} onClick={this.switchViewMode}></button> <button className={`${baseClass} sf2-icon-grid-view ${this.props.currentMode === 'grid' ? 'current-mode' : ''}`} id='grid' title={gettext('Grid')} aria-label={gettext('Grid')} onClick={this.switchViewMode}></button>
<button className={`${baseClass} sf2-icon-two-columns ${this.props.currentMode === 'column' ? 'current-mode' : ''}`} id='column' title={gettext('Column')} onClick={this.switchViewMode}></button> <button className={`${baseClass} sf2-icon-two-columns ${this.props.currentMode === 'column' ? 'current-mode' : ''}`} id='column' title={gettext('Column')} aria-label={gettext('Column')} onClick={this.switchViewMode}></button>
</div> </div>
{!this.props.isCustomPermission && ( {!this.props.isCustomPermission && (
<div className="detail-btn btn-group"> <div className="detail-btn btn-group">
<button className="btn btn-secondary btn-icon ml-1 fas fa-info" id='detail' title={gettext('Detail')} onClick={this.switchViewMode}></button> <button className="btn btn-secondary btn-icon ml-1 fas fa-info" id='detail' title={gettext('Detail')} aria-label={gettext('Detail')} onClick={this.switchViewMode}></button>
</div> </div>
)} )}
</React.Fragment> </React.Fragment>