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

A11y/use fieldsets for prefs #11534

Merged
merged 11 commits into from
Aug 12, 2022
Merged

A11y/use fieldsets for prefs #11534

merged 11 commits into from
Aug 12, 2022

Conversation

gcamacho079
Copy link
Contributor

Description

Use fieldsets for accessibility and dev preferences (Resolves DEV-333).

Also fixes an issue where fieldset elements are nested inside fieldset elements for both radio groups and checkbox groups.

Related issues

@gcamacho079 gcamacho079 requested a review from a team as a code owner June 30, 2022 23:10
@linear
Copy link

linear bot commented Jun 30, 2022

DEV-333 Accessibility and Development headings should use fieldset/legend

Because controls are visually grouped, they should be a part of a fieldset element.

For each group of checkboxes, the heading/label should use a legend element, and the wrapping element should use a fieldset element

Resolves CMS-047

@@ -4,6 +4,7 @@

{% set fieldsetAttributes = {
class: ['checkbox-group'],
role: 'presentation',
Copy link
Contributor Author

Choose a reason for hiding this comment

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

@brandonkelly I added this for both the checkboxGroup and the radioGroup as I wasn't sure if changing the fieldset element to a div would be problematic; if not let me know and I can modify the tag itself.

Copy link
Member

Choose a reason for hiding this comment

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

Probably safe to just change the tag.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Will do!

@brandonkelly brandonkelly changed the base branch from 4.2 to 4.3 July 27, 2022 22:49
@brandonkelly
Copy link
Member

@gcamacho079 Just merged 4.3 into this branch, and had to recreate your templates/users/_edit.twig edits in the process, since the user preferences changed a bit in 4.2. Let me know if it still looks good: 42f7ee8

@gcamacho079
Copy link
Contributor Author

@brandonkelly just tested and made the following changes:

  • "Development Settings" was added as a translation, and used as the legend for the dev-related checkbox group
  • Removed the inner-nested fieldset in favor of a div
  • Added a heading above the first section ("Location") so that group of fields isn't missed if users are navigating via heading levels only

@brandonkelly brandonkelly merged commit 60a2349 into 4.3 Aug 12, 2022
@brandonkelly
Copy link
Member

👍🏻 Replaced “Location” with “General”, and also split the Debug Toolbar-related development settings into their own checkbox group.

The new user preferences form, with 2nd level headings “General”, “Accessibility”, and “Development”

@brandonkelly brandonkelly deleted the a11y/use-fieldsets-for-prefs branch August 12, 2022 14:03
brandonkelly added a commit that referenced this pull request Aug 12, 2022
@gcamacho079 gcamacho079 added the accessibility 👤 features related to accessibility label Sep 26, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility 👤 features related to accessibility
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants