[a11y] 'repo API Token' dialog: added support for 'keyboard access'

frontend/src/components/dialog/repo-api-token-dialog.js

@@ -8,6 +8,7 @@ import { Utils } from '../../utils/utils';
 import toaster from '../toast';
 import copy from 'copy-to-clipboard';
 import Loading from '../loading';
+import OpIcon from '../op-icon';
 
 const apiTokenItemPropTypes = {
   item: PropTypes.object.isRequired,
@@ -50,7 +51,7 @@ class APITokenItem extends React.Component {
     let item = this.props.item;
 
     return (
-      <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+      <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} tabIndex="0" onFocus={this.onMouseEnter}>
         <td className="name">{item.app_name}</td>
         <td>
           <RepoAPITokenPermissionEditor
@@ -63,13 +64,17 @@ class APITokenItem extends React.Component {
         <td>
           <span>{item.api_token}</span>
           {this.state.isOperationShow &&
-          <span className="far fa-copy action-icon" onClick={this.onCopyAPIToken} />
+            <OpIcon
+              className="far fa-copy action-icon"
+              op={this.onCopyAPIToken}
+              title={gettext('Copy')}
+            />
           }
         </td>
         <td>
-          <span
+          <OpIcon
             className={`sf2-icon-x3 action-icon ${this.state.isOperationShow ? '' : 'hide'}`}
-            onClick={this.onDeleteAPIToken}
+            op={this.onDeleteAPIToken}
             title={gettext('Delete')}
           />
         </td>

frontend/src/components/op-icon.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Utils } from '../utils/utils';
+
+const propTypes = {
+  className: PropTypes.string.isRequired,
+  op: PropTypes.func,
+  title: PropTypes.string.isRequired
+};
+
+class OpIcon extends React.Component {
+
+  render() {
+    const { className, op, title } = this.props;
+    return (<span
+      tabIndex="0"
+      role="button"
+      className={className}
+      title={title}
+      aria-label={title}
+      onClick={op}
+      onKeyDown={Utils.onKeyDown}
+    ></span>);
+  }
+}
+
+OpIcon.propTypes = propTypes;
+
+export default OpIcon;

frontend/src/components/select-editor/repo-api-token-permission-editor.js

@@ -2,6 +2,7 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import Select from 'react-select';
 import { gettext } from '../../utils/constants';
+import OpIcon from '../op-icon';
 
 const propTypes = {
   isTextMode: PropTypes.bool.isRequired,
@@ -60,7 +61,7 @@ class RepoAPITokenPermissionEditor extends React.Component {
           <Fragment>
             <span>{optionTranslation}</span>
             {this.props.isEditIconShow &&
-              <span title={gettext('Edit')} className="fa fa-pencil-alt attr-action-icon" onClick={this.onEditPermission}/>
+              <OpIcon title={gettext('Edit')} className="fa fa-pencil-alt attr-action-icon" op={this.onEditPermission} />
             }
           </Fragment>
           :