haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-22 11:57:34 +00:00
Code Issues Releases Wiki Activity

[a11y] upload link: added support for 'keyboard access'

Browse Source
This commit is contained in:
llj
2021-09-30 14:13:40 +08:00
parent 8b08ccc6de
commit 1a4292d977
2 changed files with 17 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/pages/upload-link/upload-list-item.js
View File

@@ -121,10 +121,10 @@ class UploadListItem extends React.Component {
<td className="upload-operation"> <td className="upload-operation">
<Fragment> <Fragment>
{this.state.uploadState === UPLOAD_UPLOADING && ( {this.state.uploadState === UPLOAD_UPLOADING && (
<a href="#" onClick={this.onUploadCancel}>{gettext('Cancel')}</a> <a href="#" onClick={this.onUploadCancel} role="button">{gettext('Cancel')}</a>
)} )}
{this.state.uploadState === UPLOAD_ERROR && ( {this.state.uploadState === UPLOAD_ERROR && (
<a href="#" onClick={this.onUploadRetry}>{gettext('Retry')}</a> <a href="#" onClick={this.onUploadRetry} role="button">{gettext('Retry')}</a>
)} )}
{this.state.uploadState === UPLOAD_ISSAVING && ( {this.state.uploadState === UPLOAD_ISSAVING && (
<span className="saving">{gettext('Saving...')}</span> <span className="saving">{gettext('Saving...')}</span>

18
frontend/src/pages/upload-link/upload-progress-dialog.js
View File

@@ -31,16 +31,28 @@ class UploadProgressDialog extends React.Component {
}); });
} }
onDropdownToggleKeyDown = (e) => {
if (e.key == 'Enter' || e.key == 'Space') {
this.toggleDropdown();
}
}
onMenuItemKeyDown = (e) => {
if (e.key == 'Enter' || e.key == 'Space') {
e.target.click();
}
}
render() { render() {
let { allFilesUploaded } = this.props; let { allFilesUploaded } = this.props;
return ( return (
<Fragment> <Fragment>
<div className="text-center"> <div className="text-center">
<ButtonDropdown isOpen={this.state.dropdownOpen} toggle={this.toggleDropdown}> <ButtonDropdown isOpen={this.state.dropdownOpen} toggle={this.toggleDropdown}>
<DropdownToggle color="primary" caret>{gettext('Upload')}</DropdownToggle> <DropdownToggle color="primary" caret onKeyDown={this.onDropdownToggleKeyDown}>{gettext('Upload')}</DropdownToggle>
<DropdownMenu> <DropdownMenu>
<DropdownItem onClick={this.props.onFileUpload}>{gettext('Upload Files')}</DropdownItem> <DropdownItem onClick={this.props.onFileUpload} onKeyDown={this.onMenuItemKeyDown}>{gettext('Upload Files')}</DropdownItem>
<DropdownItem onClick={this.props.onFolderUpload}>{gettext('Upload Folder')}</DropdownItem> <DropdownItem onClick={this.props.onFolderUpload} onKeyDown={this.onMenuItemKeyDown}>{gettext('Upload Folder')}</DropdownItem>
</DropdownMenu> </DropdownMenu>
</ButtonDropdown> </ButtonDropdown>
<Button color="primary" outline={true} className="ml-4" <Button color="primary" outline={true} className="ml-4"