feat(material/slide-toggle): Add option to completely hide label #32480
Conversation
adolgachev
force-pushed
the
slide-toggle
branch
from
f85c951 to
a6880e3
Compare
adolgachev
changed the title
adolgachev
force-pushed
the
slide-toggle
branch
from
a6880e3 to
8df50fa
Compare
adolgachev
added
Accessibility
adolgachev
force-pushed
the
slide-toggle
branch
from
24cad4f to
d684ef6
Compare
adolgachev
added
the
action: global presubmit
| Clicking on the label will trigger another click event from the button. | ||
| Stop propagation here so other listeners further up in the DOM don't execute twice. | ||
| --> | ||
| <label class="mdc-label" [for]="buttonId" [attr.id]="_labelId" (click)="$event.stopPropagation()"> |
There was a problem hiding this comment.
Could we get the same with CSS like this?
label:empty {
display: none;
}
There was a problem hiding this comment.
Hmm... I'll try that out. My concern was that click handler in the a11y tree which causes it to be marked as interactive with TalkBack even when we try to hide it. So just went with a more explicit approach. But let me test out what happens with just that css.
There was a problem hiding this comment.
It looks like it works, the a11y tree shows it as hidden, and Android TB works okay. I wasn't able to exactly reproduce their issue but confident on this working too given that.
I originally thought about hiding label but continuing to use the content for aira-labelledby but it made it too messy, so if we just require the aria-label when empty, I think this is clearly better option.
adolgachev
added
dev-app preview
|
Deployed dev-app for 6b8cbb4 to: https://ng-dev-previews-comp--pr-angular-components-32480-dev-8wd8hfe4.web.app Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt. |
|
Deployed docs-preview for 6b8cbb4 to: https://ng-dev-previews-comp--pr-angular-components-32480-docs-jpaocuag.web.app Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt. |
adolgachev
force-pushed
the
slide-toggle
branch
from
0b34f44 to
6b8cbb4
Compare
There was a problem hiding this comment.
Why would there be a mat-slide-toggle without a label? Are there good use cases for it? Should it just be removed instead?
3 participants
Fixes a11y issues when no label is used, but the label wrapper (with an onclick) is still present. This can lead to an extra interactive tab-stop depending on the screen reader used.
Added option to explicitly hide the label.