fix(material/chips): adds default placeholder for chips input #30452
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
angular-robot
bot
added
area: build & ci
crisbeto
added
the
dev-app preview
|
Deployed dev-app for c4ff6b7 to: https://ng-dev-previews-comp--pr-angular-components-30452-dev-oqnzawn0.web.app Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt. |
essjay05
requested review from
crisbeto and
andrewseguin
and removed request for
a team
crisbeto
reviewed
Feb 6, 2025
crisbeto
reviewed
Feb 11, 2025
essjay05
force-pushed
the
add-default-placeholder-chips-input
branch
from
940dd06 to
171b064
Compare
crisbeto
approved these changes
Feb 13, 2025
essjay05
force-pushed
the
add-default-placeholder-chips-input
branch
2 times, most recently
from
9a1017a to
4dcabfd
Compare
Updates Angular Components Chips input so that if no placeholder value is provided and if no ariaPlaceholder value is provided, that a default value will be used. This improves accessibility by providing an aria-placeholder value for VoiceControl to use as a name for the input. Fixes b/380092814
Updates to fix lint errors.
Ran command to update chips.md.
…grid Updates previous chips-demo.html so that the input element is not a child of chip-grid, but rather a sibling. When mat-chip-grid contains the input, it hides this as an interactive element from mobile Voice Controls making it inaccessible. Fixes b/380092814
…ition Updates documentation on chips.md regarding proper placement of the input element as a sibiling of as opposed to being a child. Also adds an explanation of the new implementation of ariaPlaceholder on mat-chip input.
…ips input Updates previous fix to Angular Components chips input for using aria-placeholder and converts it to ariaLabel instead. For the chips-demo moved the input related to chip-grid to outside of chip-grid so that Voice Control is able to recognize input as an interactive element. If inside, the input is hidden from Voice Control making it not fully accessible.
Updating previous fix to see if ariaLabel will be read even if input is inside chip-grid.
Updates previous fix by implementing recommended changes by reviewer.
Updates previous change to Chips demo to use aria-label.
Cleans up previous changes and removes unused code.
Updates example which previously used ariaPlaceholder and instead uses an aria-label.
Ran command to update chips.md api guard.
essjay05
force-pushed
the
add-default-placeholder-chips-input
branch
from
4dcabfd to
c4ff6b7
Compare
crisbeto
added
action: merge
|
The changes were merged into the following branches: main, 19.2.x |
crisbeto
pushed a commit
that referenced
this pull request
Mar 17, 2025
* fix(material/chips): creates default aria-placeholder for chips input Updates Angular Components Chips input so that if no placeholder value is provided and if no ariaPlaceholder value is provided, that a default value will be used. This improves accessibility by providing an aria-placeholder value for VoiceControl to use as a name for the input. Fixes b/380092814 * refactor(material/chips): fix lint errors Updates to fix lint errors. * build(material/chips): updates build for chips.md Ran command to update chips.md. * fix(material/chips): fixes chips input demo moving input out of chip-grid Updates previous chips-demo.html so that the input element is not a child of chip-grid, but rather a sibling. When mat-chip-grid contains the input, it hides this as an interactive element from mobile Voice Controls making it inaccessible. Fixes b/380092814 * docs(material/chips): update chips docs based on aria-placeholder addition Updates documentation on chips.md regarding proper placement of the input element as a sibiling of as opposed to being a child. Also adds an explanation of the new implementation of ariaPlaceholder on mat-chip input. * refactor(material/chips): convert ariaPlaceholder to ariaLabel for chips input Updates previous fix to Angular Components chips input for using aria-placeholder and converts it to ariaLabel instead. For the chips-demo moved the input related to chip-grid to outside of chip-grid so that Voice Control is able to recognize input as an interactive element. If inside, the input is hidden from Voice Control making it not fully accessible. * refactor(material/chips): testing ariaLabel with input inside chip-grid Updating previous fix to see if ariaLabel will be read even if input is inside chip-grid. * refactor(material/chips): make recommended changes after review Updates previous fix by implementing recommended changes by reviewer. * refactor(material/chips): updates chips demo to use aria-label Updates previous change to Chips demo to use aria-label. * refactor(material/chips): removes commented out code Cleans up previous changes and removes unused code. * docs(material/chips): updates chips input accesibility recommendation Updates example which previously used ariaPlaceholder and instead uses an aria-label. * build(material/chips): updates build for chips.md Ran command to update chips.md api guard. (cherry picked from commit 09b25a1)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Updates Angular Components Chips input by moving the input outside of the mat-chip-grid to ensure the input is accessible by Voice Control. Additionally updates documentation and examples to recommend using an aria-label on the input to optimize accessibility.
Before screenshot 1st Chip input
Before screenshot 2nd Chip input
After screenshot 1st & 2nd Chip input
Fixes b/380092814