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

[a11y] 'folder perm' dialog: added support for 'keyboard access'

Browse Source
This commit is contained in:
llj
2021-10-08 16:52:17 +08:00
parent f4f85dcb16
commit 68b0785472
3 changed files with 17 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/components/dialog/lib-sub-folder-permission-dialog.js
View File

@@ -38,13 +38,13 @@ class LibSubFolderPermissionDialog extends React.Component {
<Fragment>
<div className="share-dialog-side">
<Nav pills>
<NavItem>
<NavLink className={activeTab === 'userPermission' ? 'active' : ''} onClick={this.toggle.bind(this, 'userPermission')}>
<NavItem role="tab" aria-selected={activeTab === 'userPermission'} aria-controls="user-perm-panel">
<NavLink className={activeTab === 'userPermission' ? 'active' : ''} onClick={this.toggle.bind(this, 'userPermission')} tabIndex="0" onKeyDown={Utils.onKeyDown}>
{gettext('User Permission')}
</NavLink>
</NavItem>
<NavItem>
<NavLink className={activeTab === 'groupPermission' ? 'active' : ''} onClick={this.toggle.bind(this, 'groupPermission')}>
<NavItem role="tab" aria-selected={activeTab === 'groupPermission'} aria-controls="group-perm-panel">
<NavLink className={activeTab === 'groupPermission' ? 'active' : ''} onClick={this.toggle.bind(this, 'groupPermission')} tabIndex="0" onKeyDown={Utils.onKeyDown}>
{gettext('Group Permission')}
</NavLink>
</NavItem>
@@ -52,10 +52,10 @@ class LibSubFolderPermissionDialog extends React.Component {
</div>
<div className="share-dialog-main">
<TabContent activeTab={this.state.activeTab}>
<TabPane tabId="userPermission">
<TabPane tabId="userPermission" role="tabpanel" id="user-perm-panel">
<LibSubFolderSetUserPermissionDialog repoID={this.props.repoID} repoName={this.props.repoName} folderPath={this.props.folderPath} isDepartmentRepo={this.props.isDepartmentRepo} />
</TabPane>
<TabPane tabId="groupPermission">
<TabPane tabId="groupPermission" role="tabpanel" id="group-perm-panel">
<LibSubFolderSetGroupPermissionDialog repoID={this.props.repoID} repoName={this.props.repoName} folderPath={this.props.folderPath} isDepartmentRepo={this.props.isDepartmentRepo} />
</TabPane>
</TabContent>
@@ -73,7 +73,7 @@ class LibSubFolderPermissionDialog extends React.Component {
<ModalHeader toggle={this.props.toggleDialog}>
<span dangerouslySetInnerHTML={{__html: repoName ? Utils.generateDialogTitle(gettext('{placeholder} Folder Permission'), repoName) : Utils.generateDialogTitle(gettext('Set {placeholder}\'s permission'), folderName)}}></span>
</ModalHeader>
<ModalBody className="dialog-list-container share-dialog-content">
<ModalBody className="dialog-list-container share-dialog-content" role="tablist">
{this.renderContent()}
</ModalBody>
</Modal>

6
frontend/src/components/dialog/lib-sub-folder-set-group-permission-dialog.js
View File

@@ -39,7 +39,7 @@ class GroupItem extends React.Component {
render() {
let item = this.props.item;
return (
<tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
<tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onFocus={this.onMouseEnter}>
<td>
<a href={`${siteRoot}group/${item.group_id}/`} target="_blank">{item.group_name}</a>
</td>
@@ -59,9 +59,13 @@ class GroupItem extends React.Component {
</td>
<td>
<span
tabIndex="0"
role="button"
className={`sf2-icon-x3 action-icon ${this.state.isOperationShow ? '' : 'hide'}`}
onClick={this.deleteGroupPermissionItem}
onKeyDown={Utils.onKeyDown}
title={gettext('Delete')}
aria-label={gettext('Delete')}
>
</span>
</td>

6
frontend/src/components/dialog/lib-sub-folder-set-user-permission-dialog.js
View File

@@ -39,7 +39,7 @@ class UserItem extends React.Component {
let item = this.props.item;
let currentPermission = item.permission;
return (
<tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
<tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onFocus={this.onMouseEnter}>
<td>
<a href={`${siteRoot}profile/${encodeURIComponent(item.user_email)}/`} target="_blank">{item.user_name}</a>
</td>
@@ -59,9 +59,13 @@ class UserItem extends React.Component {
</td>
<td>
<span
tabIndex="0"
role="button"
className={`sf2-icon-x3 action-icon ${this.state.isOperationShow ? '' : 'hide'}`}
onClick={this.deleteUserFolderPermission}
onKeyDown={Utils.onKeyDown}
title={gettext('Delete')}
aria-label={gettext('Delete')}
>
</span>
</td>