1
0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-22 03:47:09 +00:00

[a11y] Invite Guest: added support for 'keyboard access'

This commit is contained in:
llj
2021-09-24 14:55:33 +08:00
parent afeb9f80a4
commit aeae8d3bfd

View File

@@ -43,7 +43,8 @@ class Item extends React.Component {
}); });
} }
deleteItem = () => { deleteItem = (e) => {
e.preventDefault();
// make the icon avoid being clicked repeatedly // make the icon avoid being clicked repeatedly
this.setState({ this.setState({
isOpIconShown: false isOpIconShown: false
@@ -65,7 +66,8 @@ class Item extends React.Component {
this.setState({deleted: true}); this.setState({deleted: true});
} }
toggleRevokeDialog = () => { toggleRevokeDialog = (e) => {
e.preventDefault();
this.setState({ this.setState({
isRevokeDialogOpen: !this.state.isRevokeDialogOpen isRevokeDialogOpen: !this.state.isRevokeDialogOpen
}); });
@@ -81,7 +83,7 @@ class Item extends React.Component {
const item = this.props.invitation; const item = this.props.invitation;
const desktopItem = ( const desktopItem = (
<tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}> <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onFocus={this.onMouseEnter} tabIndex="0">
<td>{item.accepter}</td> <td>{item.accepter}</td>
<td>{moment(item.invite_time).format('YYYY-MM-DD')}</td> <td>{moment(item.invite_time).format('YYYY-MM-DD')}</td>
<td>{moment(item.expire_time).format('YYYY-MM-DD')}</td> <td>{moment(item.expire_time).format('YYYY-MM-DD')}</td>
@@ -89,16 +91,20 @@ class Item extends React.Component {
<td> <td>
{isOpIconShown && ( {isOpIconShown && (
item.accept_time ? item.accept_time ?
<i <a href="#"
role="button"
className="action-icon sf3-font sf3-font-cancel-invitation" className="action-icon sf3-font sf3-font-cancel-invitation"
title={gettext('Revoke Access')} title={gettext('Revoke Access')}
aria-label={gettext('Revoke Access')}
onClick={this.toggleRevokeDialog}> onClick={this.toggleRevokeDialog}>
</i> : </a> :
<i <a href="#"
role="button"
className="action-icon sf2-icon-x3" className="action-icon sf2-icon-x3"
title={gettext('Delete')} title={gettext('Delete')}
aria-label={gettext('Delete')}
onClick={this.deleteItem}> onClick={this.deleteItem}>
</i> </a>
)} )}
</td> </td>
</tr> </tr>