[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,
@@ -58,7 +59,7 @@ class CustomPermissionEditor extends React.Component {
     if (newName === permission_name) return;
     this.setState({permission_name: newName});
   }
-  
+
   onChangePermissionDescription = (evt) => {
     const { permission_desc } = this.state;
     const newDescription = evt.target.value;
@@ -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 = () => {
@@ -87,7 +88,7 @@ class CustomPermissionEditor extends React.Component {
       errMessage = gettext('Description is required');
       return { isValid, errMessage };
     }
-    
+
     isValid = true;
     return { isValid };
   }
@@ -110,17 +111,19 @@ class CustomPermissionEditor extends React.Component {
 
     const { mode } = this.props;
     const title = mode === 'add' ? gettext('Add permission') : gettext('Edit permission');
-    
+
     const { isLoading, permission_name, permission_desc, permission, errMessage } = this.state;
 
     return (
       <div className="custom-permission">
         <div className="permission-header">
-          <div className="title">
+          <div className="d-flex align-items-center">
-            <div onClick={this.props.onChangeMode}>
+            <OpIcon
-              <i className="fa fa-arrow-left"></i>
+              className="fa fa-arrow-left back-icon"
-            </div>
+              op={this.props.onChangeMode}
-            <div>{title}</div>
+              title={gettext('Back')}
+            />
+            <span>{title}</span>
           </div>
           <div className="operation">
             <button type="button" className="btn btn-outline-primary" onClick={this.onUpdateCustomPermission}>{gettext('Submit')}</button>
@@ -200,7 +203,7 @@ class CustomPermissionEditor extends React.Component {
       </div>
     );
   }
-  
+
 }
 
 CustomPermissionEditor.propTypes = propTypes;

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,
@@ -19,41 +21,45 @@ class CustomPermissionItem extends React.Component {
   onMouseEnter = () => {
     this.setState({isShowOperations: true});
   }
-  
+
   onMouseOver = () => {
     this.setState({isShowOperations: true});
   }
-  
+
   onMouseLeave = () => {
     this.setState({isShowOperations: false});
   }
 
   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}>
+              <OpIcon
-                <i className="fa fa-pencil-alt attr-action-icon"></i>
+                className="fa fa-pencil-alt attr-action-icon"
-              </span>
+                title={gettext('Edit')}
-              <span className="permission-operation-btn delete" onClick={this.onDeleteCustomPermission}>
+                op={this.onEditCustomPermission}
-                <i className="fa fa-trash attr-action-icon"></i>
+              />
-              </span>
+              <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 {
+.custom-permission .permission-header .back-icon {
-    display: flex;
-}
-
-.custom-permission .permission-header .title .fa {
     color: #999;
     margin-right: 10px;
     cursor: pointer;