Skip to content

fix(material-experimental/mdc-list): make internal input non-interactive - #21438

Merged
annieyw merged 1 commit into
angular:masterfrom
crisbeto:mdc-list-internal-input
Jan 9, 2021
Merged

fix(material-experimental/mdc-list): make internal input non-interactive#21438
annieyw merged 1 commit into
angular:masterfrom
crisbeto:mdc-list-internal-input

Conversation

@crisbeto

Copy link
Copy Markdown
Member

Due to how MDC's checkbox styles are set up, we always have to keep an input inside the mat-list-option, however our current setup where we only set tabindex="-1" on it is invalid, because the input is still interactive either through clicking on it, or by using a screen reader's forms mode.

These changes completely remove the input from the accessibility model by setting it to display: none.

@crisbeto crisbeto added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent Accessibility This issue is related to accessibility (a11y) target: patch This PR is targeted for the next patch release labels Dec 25, 2020
@google-cla google-cla Bot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Dec 25, 2020
Comment thread src/material-experimental/mdc-list/list-option.html Outdated
@jelbourn

jelbourn commented Jan 5, 2021

Copy link
Copy Markdown
Contributor

We should probably not bother with this change since MDC is rewriting their list from scratch (to be more like our's with different variants)

Due to how MDC's checkbox styles are set up, we always have to keep an `input` inside
the `mat-list-option`, however our current setup where we only set `tabindex="-1"` on it
is invalid, because the input is still interactive either through clicking on it, or by using
a screen reader's forms mode.

These changes completely remove the input from the accessibility model by setting it
to `display: none`.
@crisbeto
crisbeto force-pushed the mdc-list-internal-input branch from 4880a5e to 9d2b8c6 Compare January 6, 2021 06:48
@crisbeto

crisbeto commented Jan 6, 2021

Copy link
Copy Markdown
Member Author

@jelbourn I'm not familiar with what their new list will look like, but I think that we'll have to keep doing this if we're projecting in a checkbox input. Are they planning on adding something similar to our pseudo checkbox?

@jelbourn

jelbourn commented Jan 6, 2021

Copy link
Copy Markdown
Contributor

That's fair

@jelbourn jelbourn left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

LGTM

@mmalerba mmalerba added the action: merge The PR is ready for merge by the caretaker label Jan 7, 2021
@annieyw
annieyw merged commit c268246 into angular:master Jan 9, 2021
annieyw pushed a commit that referenced this pull request Jan 9, 2021
…ive (#21438)

Due to how MDC's checkbox styles are set up, we always have to keep an `input` inside
the `mat-list-option`, however our current setup where we only set `tabindex="-1"` on it
is invalid, because the input is still interactive either through clicking on it, or by using
a screen reader's forms mode.

These changes completely remove the input from the accessibility model by setting it
to `display: none`.

(cherry picked from commit c268246)
wagnermaciel pushed a commit to wagnermaciel/components that referenced this pull request Jan 14, 2021
…ive (angular#21438)

Due to how MDC's checkbox styles are set up, we always have to keep an `input` inside
the `mat-list-option`, however our current setup where we only set `tabindex="-1"` on it
is invalid, because the input is still interactive either through clicking on it, or by using
a screen reader's forms mode.

These changes completely remove the input from the accessibility model by setting it
to `display: none`.
@angular-automatic-lock-bot

Copy link
Copy Markdown

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 Feb 9, 2021
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) action: merge The PR is ready for merge by the caretaker cla: yes PR author has agreed to Google's Contributor License Agreement P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent target: patch This PR is targeted for the next patch release

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants