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:
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
Reference in New Issue
Block a user