From 457f799c4398993e8a83c2807f6cfdafd238cb4f Mon Sep 17 00:00:00 2001
From: llj <lingjun.li1@gmail.com>
Date: Tue, 12 Oct 2021 11:41:26 +0800
Subject: [PATCH] [a11y] share dialog: added 'keyboard access' support for
 'custom sharing perm'

---
 .../custom-permission-editor.js               | 23 ++++++++-------
 .../custom-permission-item.js                 | 28 +++++++++++--------
 frontend/src/css/share-link-dialog.css        |  6 +---
 3 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/dialog/custom-permission/custom-permission-editor.js b/frontend/src/components/dialog/custom-permission/custom-permission-editor.js
index e6010d7e7c..1f87c048d7 100644
--- a/frontend/src/components/dialog/custom-permission/custom-permission-editor.js
+++ b/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 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>
@@ -200,7 +203,7 @@ class CustomPermissionEditor extends React.Component {
       </div>
     );
   }
-  
+
 }
 
 CustomPermissionEditor.propTypes = propTypes;
diff --git a/frontend/src/components/dialog/custom-permission/custom-permission-item.js b/frontend/src/components/dialog/custom-permission/custom-permission-item.js
index f31cadd6be..e4147d946a 100644
--- a/frontend/src/components/dialog/custom-permission/custom-permission-item.js
+++ b/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}>
-                <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>
diff --git a/frontend/src/css/share-link-dialog.css b/frontend/src/css/share-link-dialog.css
index 44c16dae51..0993184327 100644
--- a/frontend/src/css/share-link-dialog.css
+++ b/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;