From d8ba8eb606e315de5b864a3948bf29261ca0bd0e Mon Sep 17 00:00:00 2001
From: llj <lingjun.li1@gmail.com>
Date: Wed, 22 Sep 2021 16:50:36 +0800
Subject: [PATCH] [a11y] my libs: make operations such as 'share' available by
 keyboard

---
 frontend/src/pages/my-libs/mylib-repo-list-item.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/my-libs/mylib-repo-list-item.js b/frontend/src/pages/my-libs/mylib-repo-list-item.js
index b619017c21..872aaa9155 100644
--- a/frontend/src/pages/my-libs/mylib-repo-list-item.js
+++ b/frontend/src/pages/my-libs/mylib-repo-list-item.js
@@ -56,6 +56,14 @@ class MylibRepoListItem extends React.Component {
     };
   }
 
+  onFocus = () => {
+    if (!this.props.isItemFreezed) {
+      this.setState({
+        isOpIconShow: true
+      });
+    }
+  }
+
   onMouseEnter = () => {
     if (!this.props.isItemFreezed) {
       this.setState({
@@ -277,7 +285,7 @@ class MylibRepoListItem extends React.Component {
     let iconTitle = Utils.getLibIconTitle(repo);
     let repoURL = `${siteRoot}library/${repo.repo_id}/${Utils.encodePath(repo.repo_name)}/`;
     return (
-      <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onClick={this.onRepoClick}>
+      <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onClick={this.onRepoClick} onFocus={this.onFocus}>
         <td className="text-center">
           <a href="#" role="button" aria-label={this.state.isStarred ? gettext('Unstar') : gettext('Star')} onClick={this.onToggleStarRepo}>
             <i className={`fa-star ${this.state.isStarred ? 'fas' : 'far star-empty'}`}></i>