Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/improves checkbox accessibility #859

Merged
merged 9 commits into from
Jan 9, 2025
Merged

Feat/improves checkbox accessibility #859

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
f2b5b10
feat(checkbox): adds arialLabel and tabIndex
mavericardo Jan 7, 2025
ce49a0e
test: update snapshot
mavericardo Jan 7, 2025
8d61ad4
feat(a11y): improve checkbox accessibility with conditional ARIA attr…
mavericardo Jan 7, 2025
a9477b5
refactor: adds role and tabIndex on checkbox
mavericardo Jan 8, 2025
34cbf54
test: update snapshots
mavericardo Jan 8, 2025
51a7e87
refactor: generates a random a id to ensure that checkbox label id is…
mavericardo Jan 8, 2025
b63ad75
test: update snapshots
mavericardo Jan 8, 2025
6d4b68e
refactor: remove tabIndex and role
mavericardo Jan 8, 2025
c5818b6
Update packages/yoga/src/Checkbox/web/Checkbox.jsx
mavericardo Jan 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 9 additions & 2 deletions packages/yoga/src/Checkbox/web/Checkbox.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useEffect, useRef } from 'react';
import React, { useEffect, useRef, useId } from 'react';
import { bool, string, shape, oneOfType, node } from 'prop-types';
import styled, { withTheme } from 'styled-components';
import { hexToRgb } from '@gympass/yoga-common';
Expand Down Expand Up @@ -241,6 +241,7 @@ const Checkbox = ({
className,
inverted,
indeterminate,
ariaLabel,
theme: {
yoga: {
components: { checkbox },
Expand All @@ -249,6 +250,8 @@ const Checkbox = ({
...rest
}) => {
const inputRef = useRef(null);
const id = useId();
const checkboxLabelId = `checkbox-label-${id}`;

const { onChange, onClick, ...restWithoutEvents } = rest;

Expand All @@ -271,7 +274,7 @@ const Checkbox = ({
inverted={inverted}
disabled={disabled}
>
<Label>
<Label id={checkboxLabelId}>
<Shadow />
<CheckMark
{...{
Expand All @@ -298,6 +301,8 @@ const Checkbox = ({
{...restWithoutEvents}
onChange={onChange}
onClick={onClick}
aria-labelledby={ariaLabel ? undefined : checkboxLabelId}
aria-label={ariaLabel}
/>
{label}
</Label>
Expand Down Expand Up @@ -325,6 +330,7 @@ Checkbox.propTypes = {
/** set a style to the checkbox container */
style: shape({}),
className: string,
ariaLabel: string,
};

Checkbox.defaultProps = {
Expand All @@ -338,6 +344,7 @@ Checkbox.defaultProps = {
error: undefined,
style: undefined,
className: undefined,
ariaLabel: undefined,
};

Checkbox.displayName = 'Checkbox';
Expand Down
30 changes: 30 additions & 0 deletions packages/yoga/src/Checkbox/web/__snapshots__/Checkbox.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,6 +227,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with a given value 1`] = `
>
<label
class="c2 c3"
id="checkbox-label-:re:"
>
<span
class="c4 c5"
Expand All @@ -235,6 +236,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with a given value 1`] = `
class="c6"
/>
<input
aria-labelledby="checkbox-label-:re:"
class="c7"
type="checkbox"
value="test_value"
Expand Down Expand Up @@ -419,6 +421,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with checked checkbox 1`]
>
<label
class="c2 c3"
id="checkbox-label-:r3:"
>
<span
class="c4 c5"
Expand All @@ -432,6 +435,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with checked checkbox 1`]
/>
</div>
<input
aria-labelledby="checkbox-label-:r3:"
checked=""
class="c7"
type="checkbox"
Expand Down Expand Up @@ -574,6 +578,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with default checkbox 1`]
>
<label
class="c2 c3"
id="checkbox-label-:r1:"
>
<span
class="c4 c5"
Expand All @@ -582,6 +587,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with default checkbox 1`]
class="c6"
/>
<input
aria-labelledby="checkbox-label-:r1:"
class="c7"
type="checkbox"
/>
Expand Down Expand Up @@ -790,6 +796,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with disabled and checked
>
<label
class="c2 c3"
id="checkbox-label-:r4:"
>
<span
class="c4 c5"
Expand All @@ -804,6 +811,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with disabled and checked
/>
</div>
<input
aria-labelledby="checkbox-label-:r4:"
checked=""
class="c7"
disabled=""
Expand Down Expand Up @@ -972,6 +980,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with disabled checkbox 1`]
>
<label
class="c2 c3"
id="checkbox-label-:r2:"
>
<span
class="c4 c5"
Expand All @@ -981,6 +990,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with disabled checkbox 1`]
disabled=""
/>
<input
aria-labelledby="checkbox-label-:r2:"
class="c7"
disabled=""
type="checkbox"
Expand Down Expand Up @@ -1186,6 +1196,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with error and checked che
>
<label
class="c2 c3"
id="checkbox-label-:r6:"
>
<span
class="c4 c5"
Expand All @@ -1199,6 +1210,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with error and checked che
/>
</div>
<input
aria-labelledby="checkbox-label-:r6:"
checked=""
class="c7"
type="checkbox"
Expand Down Expand Up @@ -1446,6 +1458,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with error and indetermina
>
<label
class="c2 c3"
id="checkbox-label-:rc:"
>
<span
class="c4 c5"
Expand All @@ -1459,6 +1472,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with error and indetermina
/>
</div>
<input
aria-labelledby="checkbox-label-:rc:"
class="c7"
type="checkbox"
/>
Expand Down Expand Up @@ -1663,6 +1677,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with error checkbox 1`] =
>
<label
class="c2 c3"
id="checkbox-label-:r5:"
>
<span
class="c4 c5"
Expand All @@ -1671,6 +1686,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with error checkbox 1`] =
class="c6"
/>
<input
aria-labelledby="checkbox-label-:r5:"
class="c7"
type="checkbox"
/>
Expand Down Expand Up @@ -1907,6 +1923,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with indeterminate 1`] = `
>
<label
class="c2 c3"
id="checkbox-label-:ra:"
>
<span
class="c4 c5"
Expand All @@ -1920,6 +1937,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with indeterminate 1`] = `
/>
</div>
<input
aria-labelledby="checkbox-label-:ra:"
class="c7"
type="checkbox"
/>
Expand Down Expand Up @@ -2150,6 +2168,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with indeterminate and dis
>
<label
class="c2 c3"
id="checkbox-label-:rb:"
>
<span
class="c4 c5"
Expand All @@ -2164,6 +2183,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with indeterminate and dis
/>
</div>
<input
aria-labelledby="checkbox-label-:rb:"
class="c7"
disabled=""
type="checkbox"
Expand Down Expand Up @@ -2380,6 +2400,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with inverted 1`] = `
>
<label
class="c2 c3"
id="checkbox-label-:r7:"
>
<span
class="c4 c5"
Expand All @@ -2388,6 +2409,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with inverted 1`] = `
class="c6"
/>
<input
aria-labelledby="checkbox-label-:r7:"
class="c7"
type="checkbox"
/>
Expand Down Expand Up @@ -2613,6 +2635,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with inverted and checked
>
<label
class="c2 c3"
id="checkbox-label-:r8:"
>
<span
class="c4 c5"
Expand All @@ -2626,6 +2649,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with inverted and checked
/>
</div>
<input
aria-labelledby="checkbox-label-:r8:"
checked=""
class="c7"
type="checkbox"
Expand Down Expand Up @@ -2877,6 +2901,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with inverted and checked
>
<label
class="c2 c3"
id="checkbox-label-:r9:"
>
<span
class="c4 c5"
Expand All @@ -2891,6 +2916,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with inverted and checked
/>
</div>
<input
aria-labelledby="checkbox-label-:r9:"
checked=""
class="c7"
disabled=""
Expand Down Expand Up @@ -3139,6 +3165,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with inverted and indeterm
>
<label
class="c2 c3"
id="checkbox-label-:rd:"
>
<span
class="c4 c5"
Expand All @@ -3152,6 +3179,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with inverted and indeterm
/>
</div>
<input
aria-labelledby="checkbox-label-:rd:"
class="c7"
type="checkbox"
/>
Expand Down Expand Up @@ -3283,6 +3311,7 @@ exports[`<Checkbox /> Snapshots should match snapshot without props 1`] = `
>
<label
class="c2 c3"
id="checkbox-label-:r0:"
>
<span
class="c4 c5"
Expand All @@ -3291,6 +3320,7 @@ exports[`<Checkbox /> Snapshots should match snapshot without props 1`] = `
class="c6"
/>
<input
aria-labelledby="checkbox-label-:r0:"
class="c7"
type="checkbox"
/>
Expand Down
Loading