a11y: Make "Link" and "Source" keyboard-accessible

zotero · May 31, 2024 · 070197c · 070197c
1 parent b5c18cd
commit 070197c
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/frontend/scss/style.scss b/frontend/scss/style.scss
@@ -225,7 +225,8 @@ h2 {
 	cursor: pointer;
 	text-decoration: underline;
 
-	li:hover & {
+	li:hover &,
+	li:focus-within & {
 		display: inline;
 	}
 }

diff --git a/frontend/src/component.jsx b/frontend/src/component.jsx
@@ -251,6 +251,10 @@ const App = () => {
     }, []);
 
     const handleStyleItemLinkClick = useCallback((e) => {
+        if (e.type === 'keydown' && !(e.key == 'Enter' || e.key == ' ')) {
+            return;
+        }
+        e.preventDefault();
         const styleName = e.target.closest('li').dataset.name;
         if (styleName) {
             dispatch({ type: 'QUERY', query: { search: `id:${styleName}` } });
@@ -488,7 +492,7 @@ const StyleItem = ({ style, onMouseEnter, onMouseLeave, onLinkClick }) => {
                 {style.title}
             </a>
             <span className="metadata">({style.updated})</span>
-            <a className="style-individual-link" onClick={ onLinkClick }>
+            <a className="style-individual-link" tabIndex={ 0 } onClick={ onLinkClick } onKeyDown={ onLinkClick }>
                 Link
             </a>
             <a className="style-view-source" href={style.href + '?source=1'}>