Change 944307 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] Checkbox, Radio, ToggleSwitch: Improve group docs and demo pages

https://gerrit.wikimedia.org/r/944307

Change 944311 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] docs, Checkbox: Remove CSS-only indeterminate checkbox

https://gerrit.wikimedia.org/r/944311

Change 944314 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] docs, Button: Add role="button" to all fake button demos

https://gerrit.wikimedia.org/r/944314

Having mentioned in my post-sabbatical 1:1 with @Catrope earlier today, we should not only comply our official demos with WCAG, but also the Sandbox. It would be a simple entrance gate for automated accessibility testing in CI.
Not the highest priority, but something to slowly work towards with further changes.

Change 944899 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] docs, Field: Fix Label usage in demo

https://gerrit.wikimedia.org/r/944899

Change 944899 merged by jenkins-bot:

[design/codex@main] docs, Field: Fix Label usage in demo

https://gerrit.wikimedia.org/r/944899

Do we think it makes sense to merge T311026: docs: Fix demos to meet a11y requirements (Part I) into this task? There are only a few items left in that task and they are all doc-related. We may need to verify that those are even still issues.

Change 945597 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] docs, ToggleButton: Remove dynamic label examples

https://gerrit.wikimedia.org/r/945597

Change 945635 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] docs, Menu, MenuItem: Use proper HTML structure for demos

https://gerrit.wikimedia.org/r/945635

Change 945597 merged by jenkins-bot:

[design/codex@main] docs, ToggleButton: Remove dynamic label examples

https://gerrit.wikimedia.org/r/945597

Change 945645 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] docs, Link: Improve demo text

https://gerrit.wikimedia.org/r/945645

All patches are either in code review or have been merged. Once the last one goes through code review, I'll move this to design sign-off.

Change 945635 merged by jenkins-bot:

[design/codex@main] docs, Menu, MenuItem: Use proper HTML structure for demos

https://gerrit.wikimedia.org/r/945635

Change 945645 merged by jenkins-bot:

[design/codex@main] docs, Link: Improve demo text

https://gerrit.wikimedia.org/r/945645

Change 944314 merged by jenkins-bot:

[design/codex@main] docs, Button: Add docs on role="button" for fake buttons

https://gerrit.wikimedia.org/r/944314

Change 946624 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] docs: Clarify use of role="button" and remove from label demos

https://gerrit.wikimedia.org/r/946624

Change 946624 merged by jenkins-bot:

[design/codex@main] docs: Clarify use of role="button" and remove from label demos

https://gerrit.wikimedia.org/r/946624

Change 944307 merged by jenkins-bot:

[design/codex@main] Checkbox, Radio, ToggleSwitch: Improve group docs and demo pages

https://gerrit.wikimedia.org/r/944307

@bmartinezcalvo this task is now ready for design review! All of the changes will be included on the main version of the site a few minutes from now.

Here are some testing instructions:

Update the example usage of fake button components to include role="button"

We added a tip explaining how to use role="button" for the CSS-only "fake" button (aka the one that's not a <button> element).

Remove the indeterminate state example from CSS-only demos of the checkbox, since the indeterminate state cannot be set without JS.

We removed the indeterminate checkbox from the CSS-only demo and mention in the docs that you can't do this.

For the 3 binary input components (Checkbox, Radio, and ToggleSwitch):

• Wrap demos of groups in the Field component, which uses the fieldset-legend technique for semantic grouping and labelling. Explain that this is required when using a group in a form.
• Include a demo that uses a div with role="group" (or radiogroup for Radios) and aria-labelledby, explaining that this is an alternate technique that should be used outside of forms

The order of the demos and their accessibility features changed quite a bit; please read them over and let us know if you have any feedback.

"Complex field with two inputs" demo has old usage of Label.

The text input in this demo on the Field page now has a visually-hidden label.

Change Lorum ipsum examples for Links to a real sentence with good link text (e.g. not "click here").

The text for all Link demos has been updated to be real sentences.

Radios under "form field" example are numbered incorrectly because they re-use the name of another radio group on the page (already done in this patch)

On the Radio page, the "Form field" demo should function properly (there is an initially selected Radio and you can change the selection)

Docs should not demonstrate a ToggleButton with a label that changes when pressed/unpressed.

• Create a new example of an icon-only ToggleButton whose icon does not change when pressed.
• Change the 'stateful' section to explain that if you want the button to change labels when pressed, you should use a regular button with no aria-pressed attribute".
• Update the "custom button display" example for ToggleButtonGroup not to change the label on toggle

These changes are pretty self-explanatory!

Menu demo inputs have to have role=combobox applied for aria-expanded to be valid set.

This change only applied to the dev Sandbox; all the TextInputs on the Menu page already had role="combobox"

MenuItem: Ensure that we not only use semantic HTML (ul is missing around li items), but also put role="listbox" on containing ul)

All MenuItem demos are wrapped in a <ul> element that has role="listbox".

Change 944311 merged by jenkins-bot:

[design/codex@main] docs, Checkbox: Remove CSS-only indeterminate checkbox

https://gerrit.wikimedia.org/r/944311

In T342295#9066243, @AnneT wrote:

@Volker_E the third one is:

• Handle header anchors for keyboard nav differently <a class="header-anchor" href="#button" aria-hidden="true">#</a>. Ensure that those aria-hidden elements are not focusable.

Can you explain this more?

This has been resolved in the meantime with adding aria-label on those and not setting them to `aria-hidden="true".

Change 947020 had a related patch set uploaded (by VolkerE; author: VolkerE):

[design/codex@main] docs: Add more descriptive `aria-label` to GitHub link

https://gerrit.wikimedia.org/r/947020

One pity detail is that VitePress doesn't support any other location within main, like beginning and end, for positioning the version banner.
Right now it's before the main landmark, but for screenreader users navigating the docs the better location would be within main and before the h1.

{F37392188}

Change 947020 merged by jenkins-bot:

[design/codex@main] docs: Add more descriptive `aria-label` to GitHub link

https://gerrit.wikimedia.org/r/947020

In T342295#9078327, @AnneT wrote:

Update the example usage of fake button components to include role="button"

We added a tip explaining how to use role="button" for the CSS-only "fake" button (aka the one that's not a <button> element).

@AnneT it looks good, but not sure if I would include this tip within a box since it compete with the danger message on the top. If possible, I would include this message just as body text.

Remove the indeterminate state example from CSS-only demos of the checkbox, since the indeterminate state cannot be set without JS.

We removed the indeterminate checkbox from the CSS-only demo and mention in the docs that you can't do this.

@AnneT great, the only thing I'm missing in that text is the reason why the CSS-only of indeterminate state cannot be displayed there. We could rephrase to something like: "Note that indeterminate is not supported in the CSS-only version since it cannot be set without JavaScript."

For the 3 binary input components (Checkbox, Radio, and ToggleSwitch):

• Wrap demos of groups in the Field component, which uses the fieldset-legend technique for semantic grouping and labelling. Explain that this is required when using a group in a form.
• Include a demo that uses a div with role="group" (or radiogroup for Radios) and aria-labelledby, explaining that this is an alternate technique that should be used outside of forms

The order of the demos and their accessibility features changed quite a bit; please read them over and let us know if you have any feedback.

@AnneT ok!

"Complex field with two inputs" demo has old usage of Label.

The text input in this demo on the Field page now has a visually-hidden label.

@AnneT where is the visually-hidden label? When checking the demo the label is still visible.

Change Lorum ipsum examples for Links to a real sentence with good link text (e.g. not "click here").

The text for all Link demos has been updated to be real sentences.

@AnneT this is great!

Radios under "form field" example are numbered incorrectly because they re-use the name of another radio group on the page (already done in this patch)

On the Radio page, the "Form field" demo should function properly (there is an initially selected Radio and you can change the selection)

@AnneT ok!

Docs should not demonstrate a ToggleButton with a label that changes when pressed/unpressed.

• Create a new example of an icon-only ToggleButton whose icon does not change when pressed.
• Change the 'stateful' section to explain that if you want the button to change labels when pressed, you should use a regular button with no aria-pressed attribute".
• Update the "custom button display" example for ToggleButtonGroup not to change the label on toggle

These changes are pretty self-explanatory!

@AnneT ok!

Menu demo inputs have to have role=combobox applied for aria-expanded to be valid set.

This change only applied to the dev Sandbox; all the TextInputs on the Menu page already had role="combobox"

@AnneT ok!

MenuItem: Ensure that we not only use semantic HTML (ul is missing around li items), but also put role="listbox" on containing ul)

All MenuItem demos are wrapped in a <ul> element that has role="listbox".

@AnneT ok!

Change 948606 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] docs: Improve CSS-only button and checkbox docs

https://gerrit.wikimedia.org/r/948606

In T342295#9089519, @bmartinezcalvo wrote:

We added a tip explaining how to use role="button" for the CSS-only "fake" button (aka the one that's not a <button> element).

@AnneT it looks good, but not sure if I would include this tip within a box since it compete with the danger message on the top. If possible, I would include this message just as body text.

Done in the latest patch!

Remove the indeterminate state example from CSS-only demos of the checkbox, since the indeterminate state cannot be set without JS.

We removed the indeterminate checkbox from the CSS-only demo and mention in the docs that you can't do this.

@AnneT great, the only thing I'm missing in that text is the reason why the CSS-only of indeterminate state cannot be displayed there. We could rephrase to something like: "Note that indeterminate is not supported in the CSS-only version since it cannot be set without JavaScript."

Also done!

"Complex field with two inputs" demo has old usage of Label.

The text input in this demo on the Field page now has a visually-hidden label.

@AnneT where is the visually-hidden label? When checking the demo the label is still visible.

Sorry for not being clear here! The label for the entire field ("Coordinate location") is visible, but the label for the text input ("Coordinates") is visually hidden. If you inspect the text input, you'll see the a div with classes .cdx-label cdx-label--visually-hidden above it, which contains the label text for the input.

Change 948606 merged by jenkins-bot:

[design/codex@main] docs: Improve CSS-only button and checkbox docs

https://gerrit.wikimedia.org/r/948606

In T342295#9090495, @AnneT wrote:

In T342295#9089519, @bmartinezcalvo wrote:

We added a tip explaining how to use role="button" for the CSS-only "fake" button (aka the one that's not a <button> element).

@AnneT it looks good, but not sure if I would include this tip within a box since it compete with the danger message on the top. If possible, I would include this message just as body text.

Done in the latest patch!

Remove the indeterminate state example from CSS-only demos of the checkbox, since the indeterminate state cannot be set without JS.

We removed the indeterminate checkbox from the CSS-only demo and mention in the docs that you can't do this.

@AnneT great, the only thing I'm missing in that text is the reason why the CSS-only of indeterminate state cannot be displayed there. We could rephrase to something like: "Note that indeterminate is not supported in the CSS-only version since it cannot be set without JavaScript."

Also done!

"Complex field with two inputs" demo has old usage of Label.

The text input in this demo on the Field page now has a visually-hidden label.

@AnneT where is the visually-hidden label? When checking the demo the label is still visible.

Sorry for not being clear here! The label for the entire field ("Coordinate location") is visible, but the label for the text input ("Coordinates") is visually hidden. If you inspect the text input, you'll see the a div with classes .cdx-label cdx-label--visually-hidden above it, which contains the label text for the input.

@AnneT great, thank you! All LGTM now.

Change 949555 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[mediawiki/core@master] Update Codex from v0.16.1 to v0.17.0

https://gerrit.wikimedia.org/r/949555

Test wiki created on Patch demo by ATomasevich (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/6188b4e5fe/w

Change 949555 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.16.1 to v0.17.0

https://gerrit.wikimedia.org/r/949555

Test wiki on Patch demo by ATomasevich (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/6188b4e5fe/w/