[a11y] share dialog: added 'keyboard access' support for 'custom sharing perm'

frontend/src/components/dialog/custom-permission/custom-permission-editor.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Alert, FormGroup, Input, Label, Tooltip } from 'reactstrap';
 import { gettext } from '../../../utils/constants';
 import Loading from '../../loading';
+import OpIcon from '../../op-icon';
 
 const propTypes = {
   mode: PropTypes.string,
@@ -72,7 +73,7 @@ class CustomPermissionEditor extends React.Component {
       const value = !permission[type];
       const newPermission = Object.assign({}, permission, {[type]: value});
       this.setState({permission: newPermission});
-    }
+    };
   }
 
   validParams = () => {
@@ -116,11 +117,13 @@ class CustomPermissionEditor extends React.Component {
     return (
       <div className="custom-permission">
         <div className="permission-header">
-          <div className="title">
-            <div onClick={this.props.onChangeMode}>
-              <i className="fa fa-arrow-left"></i>
-            </div>
-            <div>{title}</div>
+          <div className="d-flex align-items-center">
+            <OpIcon
+              className="fa fa-arrow-left back-icon"
+              op={this.props.onChangeMode}
+              title={gettext('Back')}
+            />
+            <span>{title}</span>
           </div>
           <div className="operation">
             <button type="button" className="btn btn-outline-primary" onClick={this.onUpdateCustomPermission}>{gettext('Submit')}</button>

frontend/src/components/dialog/custom-permission/custom-permission-item.js

@@ -1,5 +1,7 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
+import { gettext } from '../../../utils/constants';
+import OpIcon from '../../op-icon';
 
 const propTypes = {
   permission: PropTypes.object.isRequired,
@@ -30,30 +32,34 @@ class CustomPermissionItem extends React.Component {
 
   onEditCustomPermission = () => {
     const { permission } = this.props;
-    this.props.onEditCustomPermission(permission)
+    this.props.onEditCustomPermission(permission);
   }
 
   onDeleteCustomPermission = () => {
     const { permission } = this.props;
-    this.props.onDeleteCustomPermission(permission)
+    this.props.onDeleteCustomPermission(permission);
   }
 
   render() {
     const { permission } = this.props;
     const { id, name, description } = permission;
     return (
-      <tr key={id} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onMouseOver={this.onMouseOver}>
+      <tr key={id} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onMouseOver={this.onMouseOver} tabIndex="0" onFocus={this.onMouseEnter}>
         <td width='22%' className="text-truncate" title={name}>{name}</td>
         <td width='56%' className="text-truncate">{description}</td>
         <td width='22%'>
           {this.state.isShowOperations && (
             <Fragment>
-              <span className="permission-operation-btn edit" onClick={this.onEditCustomPermission}>
-                <i className="fa fa-pencil-alt attr-action-icon"></i>
-              </span>
-              <span className="permission-operation-btn delete" onClick={this.onDeleteCustomPermission}>
-                <i className="fa fa-trash attr-action-icon"></i>
-              </span>
+              <OpIcon
+                className="fa fa-pencil-alt attr-action-icon"
+                title={gettext('Edit')}
+                op={this.onEditCustomPermission}
+              />
+              <OpIcon
+                className="fa fa-trash attr-action-icon"
+                title={gettext('Delete')}
+                op={this.onDeleteCustomPermission}
+              />
             </Fragment>
           )}
         </td>

frontend/src/css/share-link-dialog.css

@@ -133,11 +133,7 @@ input.expire-input {
     border-bottom: 1px solid #efefef;
 }
 
-.custom-permission .permission-header .title {
-    display: flex;
-}
-
-.custom-permission .permission-header .title .fa {
+.custom-permission .permission-header .back-icon {
     color: #999;
     margin-right: 10px;
     cursor: pointer;