From 00d8b28c33b90264fbdfd56c228a97a62c5d5493 Mon Sep 17 00:00:00 2001
From: llj <lingjun.li1@gmail.com>
Date: Fri, 24 Sep 2021 17:11:14 +0800
Subject: [PATCH] [a11y] added support for 'keyboard access' to 'share admin
 libraries/folders/links' & 'select editor'

---
 frontend/src/components/select-editor/select-editor.js | 7 +++++--
 frontend/src/pages/share-admin/folders.js              | 4 ++--
 frontend/src/pages/share-admin/libraries.js            | 4 ++--
 frontend/src/pages/share-admin/share-links.js          | 6 +++---
 frontend/src/pages/share-admin/upload-links.js         | 6 +++---
 5 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/select-editor/select-editor.js b/frontend/src/components/select-editor/select-editor.js
index 81df388bed..3abc869ad1 100644
--- a/frontend/src/components/select-editor/select-editor.js
+++ b/frontend/src/components/select-editor/select-editor.js
@@ -81,6 +81,7 @@ class SelectEditor extends React.Component {
   }
 
   onEditPermission = (e) => {
+    e.preventDefault();
     e.nativeEvent.stopImmediatePropagation();
     this.setState({isEditing: true});
     this.props.toggleItemFreezed && this.props.toggleItemFreezed(true);
@@ -126,11 +127,13 @@ class SelectEditor extends React.Component {
           <div>
             {this.props.translateOption(currentOption)}
             {this.props.isEditIconShow && (
-              <span
+              <a href="#"
+                role="button"
+                aria-label={gettext('Edit')}
                 title={gettext('Edit')}
                 className="fa fa-pencil-alt attr-action-icon"
                 onClick={this.onEditPermission}>
-              </span>
+              </a>
             )}
           </div>
         }
diff --git a/frontend/src/pages/share-admin/folders.js b/frontend/src/pages/share-admin/folders.js
index 9d55c38a5e..fe84f25c0c 100644
--- a/frontend/src/pages/share-admin/folders.js
+++ b/frontend/src/pages/share-admin/folders.js
@@ -193,7 +193,7 @@ class Item extends Component {
       share_permission = share_permission.slice(7);
     }
     const desktopItem = (
-      <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+      <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onFocus={this.onMouseEnter}>
         <td><img src={iconUrl} title={iconTitle} alt={iconTitle} width="24" /></td>
         <td><Link to={folderUrl}>{item.folder_name}</Link></td>
         <td>
@@ -210,7 +210,7 @@ class Item extends Component {
             onPermissionChanged={this.changePerm}
           />
         </td>
-        <td><a href="#" className={`action-icon sf2-icon-x3 ${isOpIconShown ? '': 'invisible'}`} title={gettext('Unshare')} onClick={this.unshare}></a></td>
+        <td><a href="#" role="button" aria-label={gettext('Unshare')} className={`action-icon sf2-icon-x3 ${isOpIconShown ? '': 'invisible'}`} title={gettext('Unshare')} onClick={this.unshare}></a></td>
       </tr>
     );
 
diff --git a/frontend/src/pages/share-admin/libraries.js b/frontend/src/pages/share-admin/libraries.js
index 570c6bce6c..91ef31a182 100644
--- a/frontend/src/pages/share-admin/libraries.js
+++ b/frontend/src/pages/share-admin/libraries.js
@@ -208,7 +208,7 @@ class Item extends Component {
     }
 
     const desktopItem = (
-      <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+      <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onFocus={this.onMouseEnter}>
         <td><img src={iconUrl} title={iconTitle} alt={iconTitle} width="24" /></td>
         <td><Link to={repoUrl}>{item.repo_name}</Link></td>
         <td>
@@ -224,7 +224,7 @@ class Item extends Component {
             onPermissionChanged={this.changePerm}
           />
         </td>
-        <td><a href="#" className={`action-icon sf2-icon-x3 ${isOpIconShown ? '': 'invisible'}`} title={gettext('Unshare')} onClick={this.unshare}></a></td>
+        <td><a href="#" role="button" aria-label={gettext('Unshare')} className={`action-icon sf2-icon-x3 ${isOpIconShown ? '': 'invisible'}`} title={gettext('Unshare')} onClick={this.unshare}></a></td>
       </tr>
     );
 
diff --git a/frontend/src/pages/share-admin/share-links.js b/frontend/src/pages/share-admin/share-links.js
index 82de6ec677..33aeaad39a 100644
--- a/frontend/src/pages/share-admin/share-links.js
+++ b/frontend/src/pages/share-admin/share-links.js
@@ -195,7 +195,7 @@ class Item extends Component {
     }
 
     const desktopItem = (
-      <tr onMouseEnter={this.handleMouseOver} onMouseLeave={this.handleMouseOut}>
+      <tr onMouseEnter={this.handleMouseOver} onMouseLeave={this.handleMouseOut} onFocus={this.handleMouseOver}>
         <td><img src={iconUrl} width="24" alt="" /></td>
         <td>
           {item.is_dir ?
@@ -218,8 +218,8 @@ class Item extends Component {
         <td>{item.view_cnt}</td>
         <td>{this.renderExpiration()}</td>
         <td>
-          {!item.is_expired && <a href="#" className={`sf2-icon-link action-icon ${isOpIconShown ? '': 'invisible'}`} title={gettext('View')} onClick={this.viewLink}></a>}
-          <a href="#" className={`sf2-icon-delete action-icon ${isOpIconShown ? '': 'invisible'}`} title={gettext('Remove')} onClick={this.removeLink}></a>
+          {!item.is_expired && <a href="#" className={`sf2-icon-link action-icon ${isOpIconShown ? '': 'invisible'}`} title={gettext('View')} aria-label={gettext('View')} role="button" onClick={this.viewLink}></a>}
+          <a href="#" className={`sf2-icon-delete action-icon ${isOpIconShown ? '': 'invisible'}`} title={gettext('Remove')} aria-label={gettext('Remove')} role="button" onClick={this.removeLink}></a>
         </td>
       </tr>
     );
diff --git a/frontend/src/pages/share-admin/upload-links.js b/frontend/src/pages/share-admin/upload-links.js
index e50c0c19a3..85216c329e 100644
--- a/frontend/src/pages/share-admin/upload-links.js
+++ b/frontend/src/pages/share-admin/upload-links.js
@@ -123,15 +123,15 @@ class Item extends Component {
     const objUrl = `${repoUrl}${Utils.encodePath(item.path)}`;
 
     const desktopItem = (
-      <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
+      <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} onFocus={this.handleMouseOver}>
         <td><img src={iconUrl} alt="" width="24" /></td>
         <td><Link to={objUrl}>{item.obj_name}</Link></td>
         <td><Link to={repoUrl}>{item.repo_name}</Link></td>
         <td>{item.view_cnt}</td>
         <td>{this.renderExpiration()}</td>
         <td>
-          {!item.is_expired && <a href="#" className={`sf2-icon-link action-icon ${isOpIconShown ? '' : 'invisible'}`} title={gettext('View')} onClick={this.viewLink}></a>}
-          <a href="#" className={`sf2-icon-delete action-icon ${isOpIconShown ? '' : 'invisible'}`} title={gettext('Remove')} onClick={this.removeLink}></a>
+          {!item.is_expired && <a href="#" className={`sf2-icon-link action-icon ${isOpIconShown ? '' : 'invisible'}`} title={gettext('View')} aria-label={gettext('View')} role="button" onClick={this.viewLink}></a>}
+          <a href="#" className={`sf2-icon-delete action-icon ${isOpIconShown ? '' : 'invisible'}`} title={gettext('Remove')} aria-label={gettext('Remove')} role="button" onClick={this.removeLink}></a>
         </td>
       </tr>
     );