haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-08 10:22:46 +00:00
Code Issues Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/dialog/share-to-group.js
View File

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

6
frontend/src/components/dialog/share-to-invite-people.js
View File

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

6
frontend/src/components/dialog/share-to-user.js
View File

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

37
frontend/src/utils/utils.js
View File

@@ -1435,35 +1435,35 @@ export const Utils = {
var num = 0; var num = 0;
if (pwd.length < shareLinkPasswordMinLength) { if (pwd.length < shareLinkPasswordMinLength) {
return 0; return 0;
} else { } else {
for (var i = 0; i < pwd.length; i++) { for (var i = 0; i < pwd.length; i++) {
// return the unicode // return the unicode
// bitwise OR // bitwise OR
num |= _this.getCharMode(pwd.charCodeAt(i)); num |= _this.getCharMode(pwd.charCodeAt(i));
} }
return _this.calculateBitwise(num); return _this.calculateBitwise(num);
} }
}, },
getCharMode: function(n) { getCharMode: function(n) {
if (n >= 48 && n <= 57) // nums if (n >= 48 && n <= 57) // nums
return 1; return 1;
if (n >= 65 && n <= 90) // uppers if (n >= 65 && n <= 90) // uppers
return 2; return 2;
if (n >= 97 && n <= 122) // lowers if (n >= 97 && n <= 122) // lowers
return 4; return 4;
else else
return 8; return 8;
}, },
calculateBitwise: function(num) { calculateBitwise: function(num) {
var level = 0; var level = 0;
for (var i = 0; i < 4; i++){ for (var i = 0; i < 4; i++){
// bitwise AND // bitwise AND
if (num&1) level++; if (num&1) level++;
// Right logical shift // Right logical shift
num>>>=1; num>>>=1;
} }
return level; return level;
}, },
@@ -1498,4 +1498,11 @@ export const Utils = {
return { isCustomPermission: false }; return { isCustomPermission: false };
} }
// for a11y
onKeyDown: function(e) {
if (e.key == 'Enter' || e.key == 'Space') {
e.target.click();
}
}
}; };