Skip to content
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

fix(material/chips): adds default placeholder for chips input #30452

Open
wants to merge 12 commits into
base: main
Choose a base branch
from

Conversation

essjay05
Copy link
Contributor

@essjay05 essjay05 commented Feb 6, 2025

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

@angular-robot angular-robot bot added area: build & ci Related the build and CI infrastructure of the project area: material/chips labels Feb 6, 2025
@crisbeto crisbeto added the dev-app preview When applied, previews of the dev-app are deployed to Firebase label Feb 6, 2025
Copy link

github-actions bot commented Feb 6, 2025

Deployed dev-app for 0418905 to: https://ng-dev-previews-comp--pr-angular-components-30452-dev-xeu1gngk.web.app

Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt.

@angular-robot angular-robot bot added the area: docs Related to the documentation label Feb 6, 2025
@essjay05 essjay05 marked this pull request as ready for review February 6, 2025 21:40
@essjay05 essjay05 requested a review from a team as a code owner February 6, 2025 21:40
@essjay05 essjay05 requested review from crisbeto and andrewseguin and removed request for a team February 6, 2025 21:40
src/material/chips/chip-input.ts Outdated Show resolved Hide resolved
src/material/chips/chips.md Outdated Show resolved Hide resolved
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.
@essjay05 essjay05 force-pushed the add-default-placeholder-chips-input branch from 940dd06 to 171b064 Compare February 12, 2025 18:36
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 essjay05 requested a review from crisbeto February 13, 2025 02:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: build & ci Related the build and CI infrastructure of the project area: docs Related to the documentation area: material/chips dev-app preview When applied, previews of the dev-app are deployed to Firebase
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants