1
0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-04 00:20:07 +00:00

[a11y] share dialog: make tab panels accessible by keyboard

This commit is contained in:
llj
2021-10-08 15:19:04 +08:00
parent 11772e0425
commit fb205f3c65
4 changed files with 37 additions and 18 deletions

View File

@@ -39,7 +39,7 @@ class GroupItem extends React.Component {
let item = this.props.item;
let currentPermission = Utils.getSharedPermission(item);
return (
<tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
<tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} tabIndex="0" onFocus={this.onMouseEnter}>
<td className='name'>{item.group_info.name}</td>
<td>
<SharePermissionEditor
@@ -53,9 +53,13 @@ class GroupItem extends React.Component {
</td>
<td>
<span
tabIndex="0"
role="button"
className={`sf2-icon-x3 action-icon ${this.state.isOperationShow ? '' : 'hide'}`}
onClick={this.deleteShareItem}
onKeyDown={Utils.onKeyDown}
title={gettext('Delete')}
aria-label={gettext('Delete')}
>
</span>
</td>

View File

@@ -41,7 +41,7 @@ class UserItem extends React.Component {
let item = this.props.item;
let currentPermission = item.is_admin ? 'admin' : item.permission;
return (
<tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
<tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} tabIndex="0" onFocus={this.onMouseEnter}>
<td className="name">{item.accepter}</td>
<td>
<SharePermissionEditor
@@ -56,9 +56,13 @@ class UserItem extends React.Component {
<td className="name">{item.inviter_name}</td>
<td>
<span
tabIndex="0"
role="button"
className={`sf2-icon-x3 action-icon ${this.state.isOperationShow ? '' : 'hide'}`}
onClick={this.deleteShareItem}
onKeyDown={Utils.onKeyDown}
title={gettext('Delete')}
aria-label={gettext('Delete')}
>
</span>
</td>

View File

@@ -52,7 +52,7 @@ class UserItem extends React.Component {
let currentPermission = Utils.getSharedPermission(item);
const { isUserDetailsPopoverOpen } = this.state;
return (
<tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
<tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} tabIndex="0" onFocus={this.onMouseEnter}>
<td className="name">
<div className="position-relative">
<img src={item.user_info.avatar_url}
@@ -89,9 +89,13 @@ class UserItem extends React.Component {
</td>
<td>
<span
tabIndex="0"
role="button"
className={`sf2-icon-x3 action-icon ${this.state.isOperationShow ? '' : 'hide'}`}
onClick={this.deleteShareItem}
onKeyDown={Utils.onKeyDown}
title={gettext('Delete')}
aria-label={gettext('Delete')}
>
</span>
</td>