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] '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>