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

Merge pull request #1249 from g-traub/feat-tags-accessibility

Browse source 
feat: Makes tags navigable by keyboard
This commit is contained in:
Wes Bos 2022-01-07 16:58:42 -05:00 committed by GitHub
commit 6a350ec328
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
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"