haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-08 02:10:24 +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> <Fragment>
<div className="share-dialog-side"> <div className="share-dialog-side">
<Nav pills> <Nav pills>
<NavItem> <NavItem role="tab" aria-selected={activeTab === 'userPermission'} aria-controls="user-perm-panel">
<NavLink className={activeTab === 'userPermission' ? 'active' : ''} onClick={this.toggle.bind(this, 'userPermission')}> <NavLink className={activeTab === 'userPermission' ? 'active' : ''} onClick={this.toggle.bind(this, 'userPermission')} tabIndex="0" onKeyDown={Utils.onKeyDown}>
{gettext('User Permission')} {gettext('User Permission')}
</NavLink> </NavLink>
</NavItem> </NavItem>
<NavItem> <NavItem role="tab" aria-selected={activeTab === 'groupPermission'} aria-controls="group-perm-panel">
<NavLink className={activeTab === 'groupPermission' ? 'active' : ''} onClick={this.toggle.bind(this, 'groupPermission')}> <NavLink className={activeTab === 'groupPermission' ? 'active' : ''} onClick={this.toggle.bind(this, 'groupPermission')} tabIndex="0" onKeyDown={Utils.onKeyDown}>
{gettext('Group Permission')} {gettext('Group Permission')}
</NavLink> </NavLink>
</NavItem> </NavItem>
@@ -52,10 +52,10 @@ class LibSubFolderPermissionDialog extends React.Component {
</div> </div>
<div className="share-dialog-main"> <div className="share-dialog-main">
<TabContent activeTab={this.state.activeTab}> <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} /> <LibSubFolderSetUserPermissionDialog repoID={this.props.repoID} repoName={this.props.repoName} folderPath={this.props.folderPath} isDepartmentRepo={this.props.isDepartmentRepo} />
</TabPane> </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} /> <LibSubFolderSetGroupPermissionDialog repoID={this.props.repoID} repoName={this.props.repoName} folderPath={this.props.folderPath} isDepartmentRepo={this.props.isDepartmentRepo} />
</TabPane> </TabPane>
</TabContent> </TabContent>
@@ -73,7 +73,7 @@ class LibSubFolderPermissionDialog extends React.Component {
<ModalHeader toggle={this.props.toggleDialog}> <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> <span dangerouslySetInnerHTML={{__html: repoName ? Utils.generateDialogTitle(gettext('{placeholder} Folder Permission'), repoName) : Utils.generateDialogTitle(gettext('Set {placeholder}\'s permission'), folderName)}}></span>
</ModalHeader> </ModalHeader>
<ModalBody className="dialog-list-container share-dialog-content"> <ModalBody className="dialog-list-container share-dialog-content" role="tablist">
{this.renderContent()} {this.renderContent()}
</ModalBody> </ModalBody>
</Modal> </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() { render() {
let item = this.props.item; let item = this.props.item;
return ( return (
<tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}> <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onFocus={this.onMouseEnter}>
<td> <td>
<a href={`${siteRoot}group/${item.group_id}/`} target="_blank">{item.group_name}</a> <a href={`${siteRoot}group/${item.group_id}/`} target="_blank">{item.group_name}</a>
</td> </td>
@@ -59,9 +59,13 @@ class GroupItem extends React.Component {
</td> </td>
<td> <td>
<span <span
tabIndex="0"
role="button"
className={`sf2-icon-x3 action-icon ${this.state.isOperationShow ? '' : 'hide'}`} className={`sf2-icon-x3 action-icon ${this.state.isOperationShow ? '' : 'hide'}`}
onClick={this.deleteGroupPermissionItem} onClick={this.deleteGroupPermissionItem}
onKeyDown={Utils.onKeyDown}
title={gettext('Delete')} title={gettext('Delete')}
aria-label={gettext('Delete')}
> >
</span> </span>
</td> </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 item = this.props.item;
let currentPermission = item.permission; let currentPermission = item.permission;
return ( return (
<tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}> <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onFocus={this.onMouseEnter}>
<td> <td>
<a href={`${siteRoot}profile/${encodeURIComponent(item.user_email)}/`} target="_blank">{item.user_name}</a> <a href={`${siteRoot}profile/${encodeURIComponent(item.user_email)}/`} target="_blank">{item.user_name}</a>
</td> </td>
@@ -59,9 +59,13 @@ class UserItem extends React.Component {
</td> </td>
<td> <td>
<span <span
tabIndex="0"
role="button"
className={`sf2-icon-x3 action-icon ${this.state.isOperationShow ? '' : 'hide'}`} className={`sf2-icon-x3 action-icon ${this.state.isOperationShow ? '' : 'hide'}`}
onClick={this.deleteUserFolderPermission} onClick={this.deleteUserFolderPermission}
onKeyDown={Utils.onKeyDown}
title={gettext('Delete')} title={gettext('Delete')}
aria-label={gettext('Delete')}
> >
</span> </span>
</td> </td>