BradNut/awesome-uses
1
0
Fork 0
mirror of https://github.com/BradNut/awesome-uses synced 2025-09-08 17:40:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: Makes tags navigable by keyboard

Browse source 
One can navigate through the tags using "tab" and select one by pressing "enter"
This commit is contained in:
Guillaume 2021-10-12 01:37:32 +02:00
parent d3b5323af1
commit 7662e18392
1 changed files with 16 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/components/Topics.js
View file

@ -1,4 +1,4 @@
import React, { useContext } from 'react';
import React, { useCallback, useContext } from 'react';
import styled from 'styled-components';
import FilterContext from '../context/FilterContext';
import * as icons from '../util/icons';
@ -8,6 +8,15 @@ export default function Topics() {
FilterContext
);
const handleKeyDown = useCallback(
tagName => e => {
if (e.keyCode === 13) {
setCurrentTag(tagName);
}
},
[setCurrentTag]
);
return (
<Tags>
{tags.map(tag => (
@ -16,6 +25,8 @@ export default function Topics() {
htmlFor={`filter-${tag.name}`}
key={`filter-${tag.name}`}
clickable
onKeyDown={handleKeyDown(tag.name)}
tabIndex="0"
>
<input
type="radio"
@ -37,6 +48,8 @@ export default function Topics() {
key={`filter-${tag.name}`}
title={tag.name}
clickable
onKeyDown={handleKeyDown(tag.name)}
tabIndex="0"
>
<input
type="radio"
@ -58,6 +71,8 @@ export default function Topics() {
key={`filter-${tag.name}`}
title={tag.name}
clickable
onKeyDown={handleKeyDown(tag.name)}
tabIndex="0"
>
<input
type="radio"