From df85b0da7890cffaa266a9651ec4ff1baf813c4b Mon Sep 17 00:00:00 2001
From: llj <lingjun.li1@gmail.com>
Date: Fri, 24 Sep 2021 12:24:11 +0800
Subject: [PATCH] [a11y] Published Libraries: added support for 'keyboard
 access'

---
 frontend/src/components/wiki-list-view/wiki-list-item.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/wiki-list-view/wiki-list-item.js b/frontend/src/components/wiki-list-view/wiki-list-item.js
index 24fa248e3e..c2066dadbd 100644
--- a/frontend/src/components/wiki-list-view/wiki-list-item.js
+++ b/frontend/src/components/wiki-list-view/wiki-list-item.js
@@ -104,7 +104,8 @@ class WikiListItem extends Component {
   //   this.setState({isRenameing: false});
   // }
 
-  onDeleteToggle = () => {
+  onDeleteToggle = (e) => {
+    e.preventDefault();
     this.props.onUnfreezedItem();
     this.setState({
       isShowDeleteDialog: !this.state.isShowDeleteDialog,
@@ -138,7 +139,7 @@ class WikiListItem extends Component {
     let deleteIcon = `action-icon sf2-icon-x3 ${this.state.highlight ? '' : 'invisible'}`;
 
     const desktopItem = (
-      <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+      <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onFocus={this.onMouseEnter}>
         <td><img src={fileIconUrl} width="24" alt="" /></td>
         <td className="name">
           <a href={wiki.link}>{wiki.name}</a>
@@ -150,7 +151,7 @@ class WikiListItem extends Component {
         <td><a href={userProfileURL} target='_blank'>{wiki.owner_nickname}</a></td>
         <td>{moment(wiki.updated_at).fromNow()}</td>
         <td className="text-center cursor-pointer">
-          <span className={deleteIcon} onClick={this.onDeleteToggle}></span>
+          <a href="#" role="button" aria-label={gettext('Unpublish')} title={gettext('Unpublish')} className={deleteIcon} onClick={this.onDeleteToggle}></a>
         </td>
       </tr>
     );