From 70f596f51981e1a3a6eab8f75f06e81239b7863c Mon Sep 17 00:00:00 2001
From: llj <lingjun.li1@gmail.com>
Date: Sun, 26 Sep 2021 14:12:14 +0800
Subject: [PATCH] [a11y] my libs: make 'more - deleted libraries' be accessible
 by keyboard

---
 frontend/src/components/toolbar/repo-view-toobar.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/toolbar/repo-view-toobar.js b/frontend/src/components/toolbar/repo-view-toobar.js
index 90c975de59..d92ccbcc85 100644
--- a/frontend/src/components/toolbar/repo-view-toobar.js
+++ b/frontend/src/components/toolbar/repo-view-toobar.js
@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Utils } from '../../utils/utils';
-import { Link } from '@reach/router';
+import { Link, navigate } from '@reach/router';
 import { siteRoot, gettext } from '../../utils/constants';
 import ModalPortal from '../modal-portal';
 import CreateRepoDialog from '../dialog/create-repo-dialog';
@@ -36,6 +36,12 @@ class RepoViewToolbar extends React.Component {
     this.setState({ isOpen: !this.state.isOpen });
   }
 
+  visitDeletedviaKey = (e) => {
+    if (e.key == 'Enter' || e.key == 'Space') {
+      navigate(`${siteRoot}my-libs/deleted/`);
+    }
+  }
+
   render() {
     return (
       <Fragment>
@@ -51,7 +57,7 @@ class RepoViewToolbar extends React.Component {
                   {gettext('More')}
                 </DropdownToggle>
                 <DropdownMenu>
-                  <DropdownItem className="link-dropdown-container">
+                  <DropdownItem className="link-dropdown-container" onKeyDown={this.visitDeletedviaKey}>
                     <Link className="link-dropdown-item" to={siteRoot + 'my-libs/deleted/'}>{gettext('Deleted Libraries')}</Link>
                   </DropdownItem>
                 </DropdownMenu>