haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-07 01:41:39 +00:00
Code Issues Releases Wiki Activity

[a11y] share dialog: make tabs accessible by keyboard

Browse Source
This commit is contained in:
llj
2021-10-08 13:58:33 +08:00
parent 62ec844ce9
commit 11772e0425
1 changed files with 70 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
frontend/src/components/dialog/share-dialog.js
View File

@@ -109,57 +109,57 @@ class ShareDialog extends React.Component {
<div className="share-dialog-side"> <div className="share-dialog-side">
<Nav pills> <Nav pills>
{enableShareLink && {enableShareLink &&
<NavItem> <NavItem role="tab" aria-selected={activeTab === 'shareLink'} aria-controls="share-link-panel">
<NavLink className={activeTab === 'shareLink' ? 'active' : ''} onClick={this.toggle.bind(this, 'shareLink')}> <NavLink className={activeTab === 'shareLink' ? 'active' : ''} onClick={(this.toggle.bind(this, 'shareLink'))} tabIndex="0" onKeyDown={this.onTabKeyDown}>
{gettext('Share Link')} {gettext('Share Link')}
</NavLink> </NavLink>
</NavItem> </NavItem>
} }
{enableUploadLink && {enableUploadLink &&
<NavItem> <NavItem role="tab" aria-selected={activeTab === 'uploadLink'} aria-controls="upload-link-panel">
<NavLink className={activeTab === 'uploadLink' ? 'active' : ''} onClick={this.toggle.bind(this, 'uploadLink')}> <NavLink className={activeTab === 'uploadLink' ? 'active' : ''} onClick={this.toggle.bind(this, 'uploadLink')} tabIndex="0" onKeyDown={this.onTabKeyDown}>
{gettext('Upload Link')} {gettext('Upload Link')}
</NavLink> </NavLink>
</NavItem> </NavItem>
} }
{itemType === 'dir' && {itemType === 'dir' &&
<NavItem> <NavItem role="tab" aria-selected={activeTab === 'internalLink'} aria-controls="internal-link-panel">
<NavLink className={activeTab === 'internalLink' ? 'active' : ''} onClick={this.toggle.bind(this, 'internalLink')}> <NavLink className={activeTab === 'internalLink' ? 'active' : ''} onClick={this.toggle.bind(this, 'internalLink')} tabIndex="0" onKeyDown={this.onTabKeyDown}>
{gettext('Internal Link')} {gettext('Internal Link')}
</NavLink> </NavLink>
</NavItem> </NavItem>
} }
{enableDirPrivateShare && {enableDirPrivateShare &&
<Fragment> <Fragment>
<NavItem> <NavItem role="tab" aria-selected={activeTab === 'shareToUser'} aria-controls="share-to-user-panel">
<NavLink className={activeTab === 'shareToUser' ? 'active' : ''} onClick={this.toggle.bind(this, 'shareToUser')}> <NavLink className={activeTab === 'shareToUser' ? 'active' : ''} onClick={this.toggle.bind(this, 'shareToUser')} tabIndex="0" onKeyDown={this.onTabKeyDown}>
{gettext('Share to user')} {gettext('Share to user')}
</NavLink> </NavLink>
</NavItem> </NavItem>
<NavItem> <NavItem role="tab" aria-selected={activeTab === 'shareToGroup'} aria-controls="share-to-group-panel">
<NavLink className={activeTab === 'shareToGroup' ? 'active' : ''} onClick={this.toggle.bind(this, 'shareToGroup')}> <NavLink className={activeTab === 'shareToGroup' ? 'active' : ''} onClick={this.toggle.bind(this, 'shareToGroup')} tabIndex="0" onKeyDown={this.onTabKeyDown}>
{gettext('Share to group')} {gettext('Share to group')}
</NavLink> </NavLink>
</NavItem> </NavItem>
{isPro && !isCustomPermission && ( {isPro && !isCustomPermission && (
<NavItem> <NavItem role="tab" aria-selected={activeTab === 'customSharePermission'} aria-controls="custom-share-perm-panel">
<NavLink className={activeTab === 'customSharePermission' ? 'active' : ''} onClick={this.toggle.bind(this, 'customSharePermission')}> <NavLink className={activeTab === 'customSharePermission' ? 'active' : ''} onClick={this.toggle.bind(this, 'customSharePermission')} tabIndex="0" onKeyDown={this.onTabKeyDown}>
{gettext('Custom sharing permissions')} {gettext('Custom sharing permissions')}
</NavLink> </NavLink>
</NavItem> </NavItem>
)} )}
{canInvitePeople && {canInvitePeople &&
<NavItem> <NavItem role="tab" aria-selected={activeTab === 'invitePeople'} aria-controls="invite-people-panel">
<NavLink className={activeTab === 'invitePeople' ? 'active' : ''} onClick={this.toggle.bind(this, 'invitePeople')}> <NavLink className={activeTab === 'invitePeople' ? 'active' : ''} onClick={this.toggle.bind(this, 'invitePeople')} tabIndex="0" onKeyDown={this.onTabKeyDown}>
{gettext('Invite Guest')} {gettext('Invite Guest')}
</NavLink> </NavLink>
</NavItem> </NavItem>
} }
</Fragment> </Fragment>
} }
{enableOCM && itemType === 'library' && this.state.isRepoOwner && {enableOCM && itemType === 'library' && this.state.isRepoOwner &&
<NavItem> <NavItem role="tab" aria-selected={activeTab === 'shareToOtherServer'} aria-controls="share-to-other-server-panel">
<NavLink className={activeTab === 'shareToOtherServer' ? 'active' : ''} onClick={this.toggle.bind(this, 'shareToOtherServer')}> <NavLink className={activeTab === 'shareToOtherServer' ? 'active' : ''} onClick={this.toggle.bind(this, 'shareToOtherServer')} tabIndex="0" onKeyDown={this.onTabKeyDown}>
{gettext('Share to other server')} {gettext('Share to other server')}
</NavLink> </NavLink>
</NavItem> </NavItem>
@@ -169,7 +169,7 @@ class ShareDialog extends React.Component {
<div className="share-dialog-main"> <div className="share-dialog-main">
<TabContent activeTab={this.state.activeTab}> <TabContent activeTab={this.state.activeTab}>
{(enableShareLink && activeTab === 'shareLink') && {(enableShareLink && activeTab === 'shareLink') &&
<TabPane tabId="shareLink"> <TabPane tabId="shareLink" role="tabpanel" id="share-link-panel">
<GenerateShareLink <GenerateShareLink
itemPath={this.props.itemPath} itemPath={this.props.itemPath}
repoID={this.props.repoID} repoID={this.props.repoID}
@@ -180,7 +180,7 @@ class ShareDialog extends React.Component {
</TabPane> </TabPane>
} }
{(enableUploadLink && activeTab === 'uploadLink') && {(enableUploadLink && activeTab === 'uploadLink') &&
<TabPane tabId="uploadLink"> <TabPane tabId="uploadLink" role="tabpanel" id="upload-link-panel">
<GenerateUploadLink <GenerateUploadLink
itemPath={this.props.itemPath} itemPath={this.props.itemPath}
repoID={this.props.repoID} repoID={this.props.repoID}
@@ -189,52 +189,54 @@ class ShareDialog extends React.Component {
</TabPane> </TabPane>
} }
{(itemType === 'dir' && activeTab === 'internalLink') && {(itemType === 'dir' && activeTab === 'internalLink') &&
<InternalLink <TabPane tabId="internalLink" role="tabpanel" id="internal-link-panel">
path={this.props.itemPath} <InternalLink
repoID={this.props.repoID} path={this.props.itemPath}
direntType={itemType} repoID={this.props.repoID}
/> direntType={itemType}
/>
</TabPane>
} }
{enableDirPrivateShare && {enableDirPrivateShare &&
<Fragment> <Fragment>
{activeTab === 'shareToUser' && {activeTab === 'shareToUser' &&
<TabPane tabId="shareToUser"> <TabPane tabId="shareToUser" role="tabpanel" id="share-to-user-panel">
<ShareToUser <ShareToUser
itemType={this.props.itemType} itemType={this.props.itemType}
isGroupOwnedRepo={this.props.isGroupOwnedRepo} isGroupOwnedRepo={this.props.isGroupOwnedRepo}
itemPath={this.props.itemPath} itemPath={this.props.itemPath}
repoID={this.props.repoID} repoID={this.props.repoID}
isRepoOwner={this.state.isRepoOwner} isRepoOwner={this.state.isRepoOwner}
onAddCustomPermissionToggle={this.onAddCustomPermissionToggle} onAddCustomPermissionToggle={this.onAddCustomPermissionToggle}
/> />
</TabPane> </TabPane>
} }
{activeTab === 'shareToGroup' && {activeTab === 'shareToGroup' &&
<TabPane tabId="shareToGroup"> <TabPane tabId="shareToGroup" role="tabpanel" id="share-to-group-panel">
<ShareToGroup <ShareToGroup
itemType={this.props.itemType} itemType={this.props.itemType}
isGroupOwnedRepo={this.props.isGroupOwnedRepo} isGroupOwnedRepo={this.props.isGroupOwnedRepo}
itemPath={this.props.itemPath} itemPath={this.props.itemPath}
repoID={this.props.repoID} repoID={this.props.repoID}
isRepoOwner={this.state.isRepoOwner} isRepoOwner={this.state.isRepoOwner}
onAddCustomPermissionToggle={this.onAddCustomPermissionToggle} onAddCustomPermissionToggle={this.onAddCustomPermissionToggle}
/> />
</TabPane> </TabPane>
} }
{isPro && activeTab === 'customSharePermission' && (
<TabPane tabId="customSharePermission" role="tabpanel" id="custom-share-perm-panel">
<CustomPermissionManager repoID={this.props.repoID} />
</TabPane>
)}
{(canInvitePeople && activeTab === 'invitePeople') && {(canInvitePeople && activeTab === 'invitePeople') &&
<TabPane tabId="invitePeople"> <TabPane tabId="invitePeople" role="tabpanel" id="invite-people-panel">
<ShareToInvitePeople itemPath={this.props.itemPath} repoID={this.props.repoID} /> <ShareToInvitePeople itemPath={this.props.itemPath} repoID={this.props.repoID} />
</TabPane> </TabPane>
} }
</Fragment> </Fragment>
} }
{isPro && activeTab === 'customSharePermission' && (
<TabPane tabId="customSharePermission">
<CustomPermissionManager repoID={this.props.repoID}/>
</TabPane>
)}
{enableOCM && itemType === 'library' && activeTab === 'shareToOtherServer' && {enableOCM && itemType === 'library' && activeTab === 'shareToOtherServer' &&
<TabPane tabId="shareToOtherServer"> <TabPane tabId="shareToOtherServer" role="tabpanel" id="share-to-other-server-panel">
<ShareToOtherServer itemType={this.props.itemType} isGroupOwnedRepo={this.props.isGroupOwnedRepo} itemPath={this.props.itemPath} repoID={this.props.repoID} isRepoOwner={this.state.isRepoOwner} /> <ShareToOtherServer itemType={this.props.itemType} isGroupOwnedRepo={this.props.isGroupOwnedRepo} itemPath={this.props.itemPath} repoID={this.props.repoID} isRepoOwner={this.state.isRepoOwner} />
</TabPane> </TabPane>
} }
@@ -244,6 +246,12 @@ class ShareDialog extends React.Component {
); );
} }
onTabKeyDown = (e) => {
if (e.key == 'Enter' || e.key == 'Space') {
e.target.click();
}
}
renderFileContent = () => { renderFileContent = () => {
let activeTab = this.state.activeTab; let activeTab = this.state.activeTab;
const { itemType, itemName, repoEncrypted, userPerm } = this.props; const { itemType, itemName, repoEncrypted, userPerm } = this.props;
@@ -254,14 +262,14 @@ class ShareDialog extends React.Component {
<div className="share-dialog-side"> <div className="share-dialog-side">
<Nav pills> <Nav pills>
{enableShareLink && {enableShareLink &&
<NavItem> <NavItem role="tab" aria-selected={activeTab === 'shareLink'} aria-controls="share-link-panel">
<NavLink className={activeTab === 'shareLink' ? 'active' : ''} onClick={(this.toggle.bind(this, 'shareLink'))}> <NavLink className={activeTab === 'shareLink' ? 'active' : ''} onClick={(this.toggle.bind(this, 'shareLink'))} tabIndex="0" onKeyDown={this.onTabKeyDown}>
{gettext('Share Link')} {gettext('Share Link')}
</NavLink> </NavLink>
</NavItem> </NavItem>
} }
<NavItem> <NavItem role="tab" aria-selected={activeTab === 'internalLink'} aria-controls="internal-link-panel">
<NavLink className={activeTab === 'internalLink' ? 'active' : ''} onClick={this.toggle.bind(this, 'internalLink')}> <NavLink className={activeTab === 'internalLink' ? 'active' : ''} onClick={this.toggle.bind(this, 'internalLink')} tabIndex="0" onKeyDown={this.onTabKeyDown}>
{gettext('Internal Link')} {gettext('Internal Link')}
</NavLink> </NavLink>
</NavItem> </NavItem>
@@ -270,7 +278,7 @@ class ShareDialog extends React.Component {
<div className="share-dialog-main"> <div className="share-dialog-main">
<TabContent activeTab={this.state.activeTab}> <TabContent activeTab={this.state.activeTab}>
{enableShareLink && activeTab === 'shareLink' && {enableShareLink && activeTab === 'shareLink' &&
<TabPane tabId="shareLink"> <TabPane tabId="shareLink" role="tabpanel" id="share-link-panel">
<GenerateShareLink <GenerateShareLink
itemPath={this.props.itemPath} itemPath={this.props.itemPath}
repoID={this.props.repoID} repoID={this.props.repoID}
@@ -281,10 +289,12 @@ class ShareDialog extends React.Component {
</TabPane> </TabPane>
} }
{activeTab === 'internalLink' && {activeTab === 'internalLink' &&
<InternalLink <TabPane tabId="internalLink" role="tabpanel" id="internal-link-panel">
path={this.props.itemPath} <InternalLink
repoID={this.props.repoID} path={this.props.itemPath}
/> repoID={this.props.repoID}
/>
</TabPane>
} }
</TabContent> </TabContent>
</div> </div>
@@ -313,7 +323,7 @@ class ShareDialog extends React.Component {
{gettext('Share')} <span className="op-target" title={itemName}>{itemName}</span> {gettext('Share')} <span className="op-target" title={itemName}>{itemName}</span>
{this.renderExternalShareMessage()} {this.renderExternalShareMessage()}
</ModalHeader> </ModalHeader>
<ModalBody className="share-dialog-content"> <ModalBody className="share-dialog-content" role="tablist">
{(itemType === 'library' || itemType === 'dir') && this.renderDirContent()} {(itemType === 'library' || itemType === 'dir') && this.renderDirContent()}
{itemType === 'file' && this.renderFileContent()} {itemType === 'file' && this.renderFileContent()}
</ModalBody> </ModalBody>