Update @material/web version and GM3 Checkbox component.

[techanvil]

Feature Description

The @material/web package has published some more pre-release versions since we installed it. We should install the latest version (v1.0.0-pre.3 at the time of writing).

We should then update the GM3 Checkbox component to removing the label hack that adds a click handler to the label so the label can also trigger the checkbox, as this will no longer be necessary since @material/web now supports form-associated labels for checkboxes, which provide this behaviour as standard.

Note, it looks like we should not remove the aria-label, as it appears screen readers still need this as they won't pick up the label text via the form-associated label (see HTML Labels in the one-pager document). Besides which, adding this aria-label is not in the same hackish territory as the click handler and it's arguably adding some useful semantics anyway.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• @material/web should be updated to the latest version.
• The GM3 Checkbox component should have its label click handler removed, while clicking on the label should still trigger the checkbox.

Implementation Brief

• Update the @material/web NPM dependency to the latest version.
• Remove the GM3 Checkbox label click handler.

Test Coverage

• No new tests are needed.
• Existing tests should continue to pass (note, the label click behaviour is covered in JS tests).

QA Brief

• Perform a regression test on the GM3 Checkbox component to make sure it still looks and behaves as expected. That can be done by testing GM3 checkboxes in Storybook: https://google.github.io/site-kit-wp/storybook/develop/?path=/story/components-material-3-checkbox--checkboxes
• See the QAB for Explore using Material 3 web components inside React components (via Checkbox) #5190 for more details.

Changelog entry

• Update Material 3 Checkbox component.

[eugene-manuilov]

IB ✔️

[techanvil]

Hmm, while working on the IB for #6652 I've noticed we may run into some complications with this issue.

Having updated @material/web to the latest version, this in turn bumps lit, and when I run the Checkbox tests, they fail due to an error TypeError: this.attachInternals is not a function.

attachInternals is not yet supported by JSDom: jsdom/jsdom#3444, so we may run into a wall here, hopefully there's a way around it.

Anyhow, just thought I'd put a preemptive flag here to raise awareness!

[wpdarren]

QA Update: ⚠️

@techanvil On Storybook when I click on the default, complex label and checked checkboxes (or press space) nothing happens. Is that expected? 🤔 The interactive one does function as expected. It possibly is but want to double check. I am looking at this figma file as a comparison, is that the correct one?

[techanvil]

Hey @wpdarren, this is to be expected yes, the interactive one as per the name is the only one that is expected to change. These stories follow the same structure as the existing GM2 versions as seen here.

Also, yes, the Figma file you are looking at is the correct reference for these components.

[wpdarren]

QA Update: ✅

Verified:

• Compared the behaviour on the story to Figma and made sure that no regressions have occurred with the version change for GM3. I also looked at the ticket in the QAB and made sure that the steps there are recreated in this ticket.

gm3.mp4