3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-22 05:27:00 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix(v2): fix minor a11y issues (#4906)

Browse source
This commit is contained in:
Alexey Pyltsyn 2021-06-09 14:33:08 +03:00 • committed by GitHub
parent d0bbdd0535
commit 869f4bf206
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 11 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

30
packages/docusaurus-theme-classic/src/theme/Toggle/index.tsx
View file

@ -44,22 +44,6 @@ const Toggle = memo(
const [checked, setChecked] = useState(defaultChecked); const [checked, setChecked] = useState(defaultChecked);
const [focused, setFocused] = useState(false); const [focused, setFocused] = useState(false);
const inputRef = useRef<HTMLInputElement>(null); const inputRef = useRef<HTMLInputElement>(null);
const handleToggle = (e) => {
const checkbox = inputRef.current;
if (!checkbox) {
return;
}
if (e.target !== checkbox) {
e.preventDefault();
checkbox.focus();
checkbox.click();
return;
}
setChecked(checkbox?.checked);
};
return ( return (
<div <div
@ -67,15 +51,16 @@ const Toggle = memo(
'react-toggle--checked': checked, 'react-toggle--checked': checked,
'react-toggle--focus': focused, 'react-toggle--focus': focused,
'react-toggle--disabled': disabled, 'react-toggle--disabled': disabled,
})} })}>
role="button" <div
tabIndex={-1} className="react-toggle-track"
onClick={handleToggle}> role="button"
<div className="react-toggle-track"> tabIndex={-1}
onClick={() => inputRef.current?.click()}>
<div className="react-toggle-track-check">{icons.checked}</div> <div className="react-toggle-track-check">{icons.checked}</div>
<div className="react-toggle-track-x">{icons.unchecked}</div> <div className="react-toggle-track-x">{icons.unchecked}</div>
<div className="react-toggle-thumb" />
</div> </div>
<div className="react-toggle-thumb" />
<input <input
ref={inputRef} ref={inputRef}
@ -84,6 +69,7 @@ const Toggle = memo(
className="react-toggle-screenreader-only" className="react-toggle-screenreader-only"
aria-label="Switch between dark and light mode" aria-label="Switch between dark and light mode"
onChange={onChange} onChange={onChange}
onClick={() => setChecked(!checked)}
onFocus={() => setFocused(true)} onFocus={() => setFocused(true)}
onBlur={() => setFocused(false)} onBlur={() => setFocused(false)}
/> />

3
website/src/components/showcase/ShowcaseCard/index.js
View file

@ -18,8 +18,7 @@ function TagIcon({label, description, icon}) {
<span <span
className={styles.tagIcon} className={styles.tagIcon}
// TODO add a proper tooltip // TODO add a proper tooltip
title={`${label}: ${description}`} title={`${label}: ${description}`}>
aria-label={`${label}: ${description}`}>
{icon} {icon}
</span> </span>
); );

2
website/src/components/showcase/ShowcaseSelect/index.js
View file

@ -13,10 +13,10 @@ function ShowcaseSelect({tag, label, onChange, value, children}) {
const id = `showcase_select_id_${tag};`; const id = `showcase_select_id_${tag};`;
return ( return (
<div className={styles.selectContainer}> <div className={styles.selectContainer}>
<label htmlFor={id}>{label}</label>
<select id={id} name={tag} onChange={onChange} value={value}> <select id={id} name={tag} onChange={onChange} value={value}>
{children} {children}
</select> </select>
<label htmlFor={id}>{label}</label>
</div> </div>
); );
} }

2
website/src/pages/showcase/index.js
View file

@ -117,7 +117,6 @@ function ShowcaseFilters({selectedTags, toggleTag, operator, setOperator}) {
<ShowcaseCheckbox <ShowcaseCheckbox
// TODO add a proper tooltip // TODO add a proper tooltip
title={`${label}: ${description}`} title={`${label}: ${description}`}
aria-label={`${label}: ${description}`}
name={tag} name={tag}
label={ label={
icon ? ( icon ? (
@ -137,6 +136,7 @@ function ShowcaseFilters({selectedTags, toggleTag, operator, setOperator}) {
<div className="col col--2"> <div className="col col--2">
<ShowcaseSelect <ShowcaseSelect
name="operator" name="operator"
label="Filter: "
value={operator} value={operator}
onChange={(e) => setOperator(e.target.value)}> onChange={(e) => setOperator(e.target.value)}>
<option value="OR">OR</option> <option value="OR">OR</option>