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.

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

CheckboxControl: Add custom label example to Storybook #58438

Merged
merged 1 commit into from
Jan 30, 2024

Conversation

mirka
Copy link
Member

@mirka mirka commented Jan 30, 2024

Part of #51740

What?

In the Storybook for CheckboxControl, adds an example of how to accessibly implement custom labels/descriptions.

Why?

To help developers build custom implementations without breaking accessibility requirements.

Testing Instructions

See the "With Custom Label" story for CheckboxControl. The story description should be clear, and the example should meet the accessibility requirements for a checkbox.

Screenshots

Example of a custom checkbox implementation

@mirka mirka added [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Type] Developer Documentation Documentation for developers [Package] Components /packages/components Storybook Storybook and its stories for components labels Jan 30, 2024
@mirka mirka self-assigned this Jan 30, 2024
@mirka mirka requested a review from ajitbohra as a code owner January 30, 2024 12:14
@mirka mirka requested review from afercia and a team January 30, 2024 12:15
Copy link

Flaky tests detected in 16e9d1e.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7710945383
📝 Reported issues:

Copy link
Contributor

@ciampo ciampo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great addition 🚀

@andrewhayward
Copy link
Contributor

I know it would be a big breaking change, but it would be great if we could make label non-optional. There's no escaping bad labelling – it's rather hard to confirm that the label isn't an empty string, and impossible to determine if the label is actually useful – but we can at least ensure someone has to be a bit more intentional in not rendering a label.

⛔️ <CheckboxControl checked={ isChecked } />
 <CheckboxControl checked={ isChecked } label={ false } />

@mirka
Copy link
Member Author

mirka commented Jan 30, 2024

I know it would be a big breaking change, but it would be great if we could make label non-optional.

I'm definitely open to discussing more drastic improvements in #51740 as part of a package-wide, consistent label strategy for all our control components. It's just that there are still a ton of low-hanging fruit at the documentation level, which will be useful to put in place regardless of whether we make more drastic changes at the code level.

@mirka mirka merged commit 8c80c0e into trunk Jan 30, 2024
63 checks passed
@mirka mirka deleted the docs/checkbox-custom-label branch January 30, 2024 17:31
@github-actions github-actions bot added this to the Gutenberg 17.7 milestone Jan 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Package] Components /packages/components Storybook Storybook and its stories for components [Type] Developer Documentation Documentation for developers
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants