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