Skip to content

fix(material-experimental/mdc-checkbox): remove extra a11y tree node for the <label/> #24839

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

Closed
wants to merge 1 commit into from

Conversation

zarend
Copy link
Contributor

@zarend zarend commented Apr 27, 2022

In the mdc checkbox component, moves the click handler on the label to
its parent, the .mdc-checkbox. This removes the extra a11y
tree node on the label and fixes TalkBack having an extra navigation
stop (#14385).

A11y tree before this commit. It has an un-necessary node, which
coresponds to the <label> element.

- Generic
 - Checkbox, "Field A"
 - Textlabel, "Field A"

A11y tree with this commit applied

- Generic
 - Checkbox, "Field A"

fixes #14385

@zarend zarend added Accessibility This issue is related to accessibility (a11y) target: patch This PR is targeted for the next patch release area: material/checkbox dev-app preview When applied, previews of the dev-app are deployed to Firebase labels Apr 27, 2022
@zarend zarend requested a review from mmalerba as a code owner April 27, 2022 23:51
@github-actions
Copy link

github-actions bot commented Apr 28, 2022

@zarend zarend requested a review from crisbeto April 29, 2022 16:26
…for the <label/>

In the mdc checkbox component, moves the click handler on the label to
its parent, the .mdc-checkbox. This removes the extra a11y
tree node on the label and fixes TalkBack having an extra navigation
stop (angular#14385).

A11y tree before this commit. It has an un-necessary node, which
coresponds to the `<label>` element.
```
- Generic
 - Checkbox, "Field A"
 - Textlabel, "Field A"
```

A11y tree with this commit applied
```
- Generic
 - Checkbox, "Field A"
```

fixes angular#14385
@zarend zarend force-pushed the checkbox-label-a11y-tree branch from bdd024f to 74aee29 Compare April 29, 2022 19:25
@zarend
Copy link
Contributor Author

zarend commented May 3, 2022

Hello @mmalerba @crisbeto 👋 , I have responded to PR comments and this is ready for your eyes again 👀 .

Copy link
Member

@crisbeto crisbeto left a comment

Choose a reason for hiding this comment

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

LGTM

@zarend zarend added the action: merge The PR is ready for merge by the caretaker label May 3, 2022
@zarend zarend removed the action: merge The PR is ready for merge by the caretaker label May 10, 2022
@zarend
Copy link
Contributor Author

zarend commented May 10, 2022

This causes a style regression because styles rules with this selector no longer match: .mdc-form-field>label. I'm looking into this.

@zarend
Copy link
Contributor Author

zarend commented May 13, 2022

closing in favor of #24907

@zarend zarend closed this May 13, 2022
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Jun 13, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Accessibility This issue is related to accessibility (a11y) area: material/checkbox dev-app preview When applied, previews of the dev-app are deployed to Firebase target: patch This PR is targeted for the next patch release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Two navigation stops for mdc radio buttons with TalkBack
3 participants