va-checkbox and va-radio-option: Improved a11y

[Andrew565]

Chromatic

https://3363-redo-radios-and-checks--65a6e2ed2314f7b8f98609d8.chromatic.com

---

Description

Closes #3363

Reworks some of the HTML for the va-checkbox and va-radio-option components to be more accessible.

QA Checklist

• Component maintains 1:1 parity with design mocks
• Text is consistent with what's been provided in the mocks
• Component behaves as expected across breakpoints
• Accessibility expert has signed off on code changes (if applicable. If not applicable provide reason why)
• Designer has signed off on changes (if applicable. If not applicable provide reason why)
• Tab order and focus state work as expected
• Changes have been tested against screen readers (if applicable. If not applicable provide reason why)
• New components are covered by e2e tests; updates to existing components are covered by existing test suite
• Changes have been tested in vets-website using Verdaccio (if applicable. If not applicable provide reason why)

Screenshots

Before:

After:

Acceptance criteria

• QA checklist has been completed
• Screenshots have been attached that cover desktop and mobile screens

Definition of done

• Documentation has been updated, if applicable
• A link has been provided to the originating GitHub issue (or connected to it via ZenHub)

[babsdenney]

@Andrew565 Could we fix the box size and radius to align with the USWDS? Attached shows the USWDS with a 20x20 square size and border radius of 2px.

The focus state in the Figma design has a gap between the focus state and the gold outline, USWDS is showing the same thing. Could we follow that design for the focus state. The USWDS also shows a gap.

Checkbox in this PR

VADS

USWDS

[rsmithadhoc]

@Andrew565 This looked good to me. I was able to confirm that this resolves the Axe issues. I also gave it a quick test in VoiceOver and everything sounded as expected.

One minor thing I saw was when initially tabbing to the radio group, there's an additional outline next to the first item. My guess is that a stray pseudo or hidden element might be getting styled.

[babsdenney]

Similar to the checkboxes, could we increase the size of the radio button to match the USWDS?

• Increase the size from 16x16 to 20x20
• Create a gap between the focus ring and the radio circle

VADS

USWDS

[Andrew565]

@rsmithadhoc Fixed the ghost outline, thanks for pointing that out.

@babsdenney I fixed the outline gaps and made sure the sizing was consistent for both radios and checkboxes. If you inspect a non-checked checkbox or radio, it will appear in the sizing model as though it's 16x16, but this isn't including the 2px border on all sides, which raises the 'total size' to 20x20. Screenshots attached.

[babsdenney]

@Andrew565 That makes sense! I don't know where the sizing strays, I overlayed the USWDS elements with the VADS and you can still see that the VADS radio buttons and checkboxes are slightly smaller. It looks like the selected radio button is accurate and matches the USWDS but the selected checkbox state and unselected radio and checkbox states are smaller than USWDS.

I also am not sure if this makes a difference but the click area for the USWDS checkboxes and radio buttons is larger than the VADS checkboxes. You can click farther to the right on the UWDS elements.

• USWDS Checkboxes
• USWDS Radio buttons

This doesn't make a difference, so it is not necessary to change, but the example we use for the name is misspelled in the storybook for the radio buttons.

[Andrew565]

@babsdenney Figured out that the USWDS components were 20x20 PLUS a 2px box-shadow, making them effectively 24x24, which is why the size discrepancy. Fixed this for the checkboxes and radio-options, and also fixed the "Soujourner" typo. Should be good for re-review again now.

[jamigibbs]

It looks like this update will require us to diverge almost completely from the USWDS packages with these classes being removed:

• usa-radio__input
• usa-radio

There are similar USWDS classes for va-checkbox too.

Is it possible to keep some USWDS style for padding/margin, spacing, font-size, border-radius by keeping those USWDS classes there and just override whatever we need to override in the component stylesheet? Otherwise we will no longer be receiving any of those upstream updates.

[Andrew565]

FWIW, the usa-radio class is still there, it's just moving to the containerClass variable.

As for the rest of the classes that are changing, yes, they are diverging quite a bit from the original USWDS classes, which is why I felt it made sense to replace those classes wholesale rather than try and override them.

For the usa-radio__input vs. va-radio-option__input, as an example, in our old stylesheet we were overriding just the margin and position, the USWDS doesn't provide any other styles beyond those. In the new stylesheet, we're overriding the margin, position, height, width, border, and box-shadow properties.

In the old styles and layout, the radio button and checkbox "icons" were being generated on the labels using a ::before pseudo-element. In the new styles and layout, we're generating those "icons" on the inputs themselves.

Getting the 'tile' variant to display correctly likewise required moving the styles to the div container, rather than having them live with the label element, due to the label not encompassing the input element.

So we aren't really getting anything useful from USWDS for these elements any more, so I don't see us needing to receive any upstream updates, unless USWDS completely restructures these components in a way similar to how we've done it.