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] 'share/upload links' dialog: added support for 'keyboard access'

Browse Source
This commit is contained in:
llj
2021-10-08 17:59:28 +08:00
parent 68b0785472
commit ccc0e764f3
1 changed files with 13 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/components/dialog/repo-share-upload-links-dialog.js
View File

@@ -55,19 +55,23 @@ class RepoShareUploadLinkItem extends React.Component {
} }
return ( return (
<tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}> <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onFocus={this.onMouseEnter}>
<td className="name">{item.creator_name}</td> <td className="name">{item.creator_name}</td>
<td> <td>
<a href={objUrl} target="_blank" className="text-inherit">{item.obj_name}</a> <a href={objUrl} target="_blank" className="text-inherit" rel="noreferrer">{item.obj_name}</a>
</td> </td>
<td> <td>
<a href={item.link} target="_blank" className="text-inherit">{item.link}</a> <a href={item.link} target="_blank" className="text-inherit" rel="noreferrer">{item.link}</a>
</td> </td>
<td> <td>
<span <span
tabIndex="0"
role="button"
className={`sf2-icon-x3 action-icon ${this.state.isOperationShow ? '' : 'invisible'}`} className={`sf2-icon-x3 action-icon ${this.state.isOperationShow ? '' : 'invisible'}`}
onClick={this.onDeleteLink} onClick={this.onDeleteLink}
onKeyDown={Utils.onKeyDown}
title={gettext('Delete')} title={gettext('Delete')}
aria-label={gettext('Delete')}
/> />
</td> </td>
</tr> </tr>
@@ -159,18 +163,18 @@ class RepoShareUploadLinksDialog extends React.Component {
</ModalHeader> </ModalHeader>
<ModalBody className="p-0 pb-4"> <ModalBody className="p-0 pb-4">
<div className="main-panel-center"> <div className="main-panel-center">
<div className="cur-view-container"> <div className="cur-view-container" role="tablist">
<div className="cur-view-path share-upload-nav"> <div className="cur-view-path share-upload-nav">
<ul className="nav"> <ul className="nav">
<li className="nav-item"> <li className="nav-item" role="tab" aria-selected={activeTab === 'shareLinks'} aria-controls="share-links-panel">
<NavLink className={activeTab === 'shareLinks' ? 'active' : ''} onClick={this.toggle.bind(this, 'shareLinks')}>{gettext('Share Links')}</NavLink> <NavLink className={activeTab === 'shareLinks' ? 'active' : ''} onClick={this.toggle.bind(this, 'shareLinks')} tabIndex="0" onKeyDown={Utils.onKeyDown}>{gettext('Share Links')}</NavLink>
</li> </li>
<li className="nav-item"> <li className="nav-item" role="tab" aria-selected={activeTab === 'uploadLinks'} aria-controls="upload-links-panel">
<NavLink className={activeTab === 'uploadLinks' ? 'active' : ''} onClick={this.toggle.bind(this, 'uploadLinks')}>{gettext('Upload Links')}</NavLink> <NavLink className={activeTab === 'uploadLinks' ? 'active' : ''} onClick={this.toggle.bind(this, 'uploadLinks')} tabIndex="0" onKeyDown={Utils.onKeyDown}>{gettext('Upload Links')}</NavLink>
</li> </li>
</ul> </ul>
</div> </div>
<div className="cur-view-content" style={{minHeight: '20rem', maxHeight: '20rem'}}> <div className="cur-view-content" style={{minHeight: '20rem', maxHeight: '20rem'}} role="tabpanel" id={activeTab === 'shareLinks' ? 'share-links-panel' : 'upload-links-panel'}>
{loading && <Loading />} {loading && <Loading />}
{!loading && errorMsg && <p className="error text-center mt-8">{errorMsg}</p>} {!loading && errorMsg && <p className="error text-center mt-8">{errorMsg}</p>}
{!loading && !errorMsg && !repoShareUploadLinkList.length && {!loading && !errorMsg && !repoShareUploadLinkList.length &&