haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-07-16 00:06:11 +00:00
Code Issues Releases Wiki Activity

[a11y] added support for 'keyboard access' to 'share admin libraries/folders/links' & 'select editor'

Browse Source
This commit is contained in:
llj 2021-09-24 17:11:14 +08:00
parent aeae8d3bfd
commit 00d8b28c33
5 changed files with 15 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/components/select-editor/select-editor.js
View File

@ -81,6 +81,7 @@ class SelectEditor extends React.Component {
} }
onEditPermission = (e) => { onEditPermission = (e) => {
e.preventDefault();
e.nativeEvent.stopImmediatePropagation(); e.nativeEvent.stopImmediatePropagation();
this.setState({isEditing: true}); this.setState({isEditing: true});
this.props.toggleItemFreezed && this.props.toggleItemFreezed(true); this.props.toggleItemFreezed && this.props.toggleItemFreezed(true);
@ -126,11 +127,13 @@ class SelectEditor extends React.Component {
<div> <div>
{this.props.translateOption(currentOption)} {this.props.translateOption(currentOption)}
{this.props.isEditIconShow && ( {this.props.isEditIconShow && (
<span <a href="#"
role="button"
aria-label={gettext('Edit')}
title={gettext('Edit')} title={gettext('Edit')}
className="fa fa-pencil-alt attr-action-icon" className="fa fa-pencil-alt attr-action-icon"
onClick={this.onEditPermission}> onClick={this.onEditPermission}>
</span> </a>
)} )}
</div> </div>
} }

4
frontend/src/pages/share-admin/folders.js
View File

@ -193,7 +193,7 @@ class Item extends Component {
share_permission = share_permission.slice(7); share_permission = share_permission.slice(7);
} }
const desktopItem = ( const desktopItem = (
<tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}> <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onFocus={this.onMouseEnter}>
<td><img src={iconUrl} title={iconTitle} alt={iconTitle} width="24" /></td> <td><img src={iconUrl} title={iconTitle} alt={iconTitle} width="24" /></td>
<td><Link to={folderUrl}>{item.folder_name}</Link></td> <td><Link to={folderUrl}>{item.folder_name}</Link></td>
<td> <td>
@ -210,7 +210,7 @@ class Item extends Component {
onPermissionChanged={this.changePerm} onPermissionChanged={this.changePerm}
/> />
</td> </td>
<td><a href="#" className={`action-icon sf2-icon-x3 ${isOpIconShown ? '': 'invisible'}`} title={gettext('Unshare')} onClick={this.unshare}></a></td> <td><a href="#" role="button" aria-label={gettext('Unshare')} className={`action-icon sf2-icon-x3 ${isOpIconShown ? '': 'invisible'}`} title={gettext('Unshare')} onClick={this.unshare}></a></td>
</tr> </tr>
); );

4
frontend/src/pages/share-admin/libraries.js
View File

@ -208,7 +208,7 @@ class Item extends Component {
} }
const desktopItem = ( const desktopItem = (
<tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}> <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onFocus={this.onMouseEnter}>
<td><img src={iconUrl} title={iconTitle} alt={iconTitle} width="24" /></td> <td><img src={iconUrl} title={iconTitle} alt={iconTitle} width="24" /></td>
<td><Link to={repoUrl}>{item.repo_name}</Link></td> <td><Link to={repoUrl}>{item.repo_name}</Link></td>
<td> <td>
@ -224,7 +224,7 @@ class Item extends Component {
onPermissionChanged={this.changePerm} onPermissionChanged={this.changePerm}
/> />
</td> </td>
<td><a href="#" className={`action-icon sf2-icon-x3 ${isOpIconShown ? '': 'invisible'}`} title={gettext('Unshare')} onClick={this.unshare}></a></td> <td><a href="#" role="button" aria-label={gettext('Unshare')} className={`action-icon sf2-icon-x3 ${isOpIconShown ? '': 'invisible'}`} title={gettext('Unshare')} onClick={this.unshare}></a></td>
</tr> </tr>
); );

6
frontend/src/pages/share-admin/share-links.js
View File

@ -195,7 +195,7 @@ class Item extends Component {
} }
const desktopItem = ( const desktopItem = (
<tr onMouseEnter={this.handleMouseOver} onMouseLeave={this.handleMouseOut}> <tr onMouseEnter={this.handleMouseOver} onMouseLeave={this.handleMouseOut} onFocus={this.handleMouseOver}>
<td><img src={iconUrl} width="24" alt="" /></td> <td><img src={iconUrl} width="24" alt="" /></td>
<td> <td>
{item.is_dir ? {item.is_dir ?
@ -218,8 +218,8 @@ class Item extends Component {
<td>{item.view_cnt}</td> <td>{item.view_cnt}</td>
<td>{this.renderExpiration()}</td> <td>{this.renderExpiration()}</td>
<td> <td>
{!item.is_expired && <a href="#" className={`sf2-icon-link action-icon ${isOpIconShown ? '': 'invisible'}`} title={gettext('View')} onClick={this.viewLink}></a>} {!item.is_expired && <a href="#" className={`sf2-icon-link action-icon ${isOpIconShown ? '': 'invisible'}`} title={gettext('View')} aria-label={gettext('View')} role="button" onClick={this.viewLink}></a>}
<a href="#" className={`sf2-icon-delete action-icon ${isOpIconShown ? '': 'invisible'}`} title={gettext('Remove')} onClick={this.removeLink}></a> <a href="#" className={`sf2-icon-delete action-icon ${isOpIconShown ? '': 'invisible'}`} title={gettext('Remove')} aria-label={gettext('Remove')} role="button" onClick={this.removeLink}></a>
</td> </td>
</tr> </tr>
); );

6
frontend/src/pages/share-admin/upload-links.js
View File

@ -123,15 +123,15 @@ class Item extends Component {
const objUrl = `${repoUrl}${Utils.encodePath(item.path)}`; const objUrl = `${repoUrl}${Utils.encodePath(item.path)}`;
const desktopItem = ( const desktopItem = (
<tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}> <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} onFocus={this.handleMouseOver}>
<td><img src={iconUrl} alt="" width="24" /></td> <td><img src={iconUrl} alt="" width="24" /></td>
<td><Link to={objUrl}>{item.obj_name}</Link></td> <td><Link to={objUrl}>{item.obj_name}</Link></td>
<td><Link to={repoUrl}>{item.repo_name}</Link></td> <td><Link to={repoUrl}>{item.repo_name}</Link></td>
<td>{item.view_cnt}</td> <td>{item.view_cnt}</td>
<td>{this.renderExpiration()}</td> <td>{this.renderExpiration()}</td>
<td> <td>
{!item.is_expired && <a href="#" className={`sf2-icon-link action-icon ${isOpIconShown ? '' : 'invisible'}`} title={gettext('View')} onClick={this.viewLink}></a>} {!item.is_expired && <a href="#" className={`sf2-icon-link action-icon ${isOpIconShown ? '' : 'invisible'}`} title={gettext('View')} aria-label={gettext('View')} role="button" onClick={this.viewLink}></a>}
<a href="#" className={`sf2-icon-delete action-icon ${isOpIconShown ? '' : 'invisible'}`} title={gettext('Remove')} onClick={this.removeLink}></a> <a href="#" className={`sf2-icon-delete action-icon ${isOpIconShown ? '' : 'invisible'}`} title={gettext('Remove')} aria-label={gettext('Remove')} role="button" onClick={this.removeLink}></a>
</td> </td>
</tr> </tr>
); );