From 28dc64bcfb3e5615805fe81a62567eec3b0d87eb Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Thu, 6 Feb 2025 03:24:32 +0000 Subject: [PATCH 01/12] 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 --- src/dev-app/chips/chips-demo.html | 3 ++- src/material/chips/chip-input.ts | 15 +++++++++++++++ 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/src/dev-app/chips/chips-demo.html b/src/dev-app/chips/chips-demo.html index 92ae8310130e..b6e37752d17c 100644 --- a/src/dev-app/chips/chips-demo.html +++ b/src/dev-app/chips/chips-demo.html @@ -209,7 +209,8 @@

Input is next sibling child of chip grid

+ (matChipInputTokenEnd)="add($event)" + ariaPlaceholder="New contributor input..." />

diff --git a/src/material/chips/chip-input.ts b/src/material/chips/chip-input.ts index 1fd8c53395ee..87f037051f7d 100644 --- a/src/material/chips/chip-input.ts +++ b/src/material/chips/chip-input.ts @@ -59,6 +59,7 @@ export interface MatChipInputEvent { '[id]': 'id', '[attr.disabled]': 'disabled || null', '[attr.placeholder]': 'placeholder || null', + '[attr.aria-placeholder]': 'getAriaPlaceholder()', '[attr.aria-invalid]': '_chipGrid && _chipGrid.ngControl ? _chipGrid.ngControl.invalid : null', '[attr.aria-required]': '_chipGrid && _chipGrid.required || null', '[attr.required]': '_chipGrid && _chipGrid.required || null', @@ -104,6 +105,9 @@ export class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy { /** The input's placeholder text. */ @Input() placeholder: string = ''; + /** Screenreader placeholder for the input, only used if placeholder is not provided. */ + @Input() ariaPlaceholder: string | null; + /** Unique id for the input. */ @Input() id: string = inject(_IdGenerator).getId('mat-mdc-chip-list-input-'); @@ -125,6 +129,10 @@ export class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy { /** The native input element to which this directive is attached. */ readonly inputElement!: HTMLInputElement; + /** Default Screen-reader placeholder for the input if no placeholder or + * ariaPlaceholder is provided. */ + private readonly _defaultAriaPlaceholder = 'Enter input'; + constructor(...args: unknown[]); constructor() { @@ -223,4 +231,11 @@ export class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy { private _isSeparatorKey(event: KeyboardEvent) { return !hasModifierKey(event) && new Set(this.separatorKeyCodes).has(event.keyCode); } + + /** Checks whether placeholder is used, if not checks for ariaPlaceholder, and resorts + * to default value if neither is provided. + */ + getAriaPlaceholder(): string | null { + return this.placeholder ? null : this.ariaPlaceholder || this._defaultAriaPlaceholder; + } } From 2c1edef4e89a500c1c4b0d120c4d4016795e8323 Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Thu, 6 Feb 2025 03:40:39 +0000 Subject: [PATCH 02/12] refactor(material/chips): fix lint errors Updates to fix lint errors. --- src/material/chips/chip-input.ts | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/material/chips/chip-input.ts b/src/material/chips/chip-input.ts index 87f037051f7d..611d7ab54098 100644 --- a/src/material/chips/chip-input.ts +++ b/src/material/chips/chip-input.ts @@ -129,8 +129,10 @@ export class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy { /** The native input element to which this directive is attached. */ readonly inputElement!: HTMLInputElement; - /** Default Screen-reader placeholder for the input if no placeholder or - * ariaPlaceholder is provided. */ + /** + * Default Screen-reader placeholder for the input if no placeholder or + * ariaPlaceholder is provided. + */ private readonly _defaultAriaPlaceholder = 'Enter input'; constructor(...args: unknown[]); @@ -232,7 +234,8 @@ export class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy { return !hasModifierKey(event) && new Set(this.separatorKeyCodes).has(event.keyCode); } - /** Checks whether placeholder is used, if not checks for ariaPlaceholder, and resorts + /** + * Checks whether placeholder is used, if not checks for ariaPlaceholder, and resorts * to default value if neither is provided. */ getAriaPlaceholder(): string | null { From 4ece3e306cf1849517e857b4d2418e1654948a15 Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Thu, 6 Feb 2025 03:47:31 +0000 Subject: [PATCH 03/12] build(material/chips): updates build for chips.md Ran command to update chips.md. --- tools/public_api_guard/material/chips.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/tools/public_api_guard/material/chips.md b/tools/public_api_guard/material/chips.md index 2ac72c5d6914..673fe06df89d 100644 --- a/tools/public_api_guard/material/chips.md +++ b/tools/public_api_guard/material/chips.md @@ -244,6 +244,7 @@ export class MatChipGridChange { export class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy { constructor(...args: unknown[]); addOnBlur: boolean; + ariaPlaceholder: string | null; _blur(): void; readonly chipEnd: EventEmitter; get chipGrid(): MatChipGrid; @@ -261,6 +262,7 @@ export class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy { // (undocumented) _focus(): void; focused: boolean; + getAriaPlaceholder(): string | null; id: string; readonly inputElement: HTMLInputElement; _keydown(event: KeyboardEvent): void; @@ -279,7 +281,7 @@ export class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy { // (undocumented) setDescribedByIds(ids: string[]): void; // (undocumented) - static ɵdir: i0.ɵɵDirectiveDeclaration; + static ɵdir: i0.ɵɵDirectiveDeclaration; // (undocumented) static ɵfac: i0.ɵɵFactoryDeclaration; } From 5c6f9ba96f5f174277064cf92ab7d75f4361cbfa Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Thu, 6 Feb 2025 21:04:34 +0000 Subject: [PATCH 04/12] 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 --- src/dev-app/chips/chips-demo.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/dev-app/chips/chips-demo.html b/src/dev-app/chips/chips-demo.html index b6e37752d17c..846ab78a6e1b 100644 --- a/src/dev-app/chips/chips-demo.html +++ b/src/dev-app/chips/chips-demo.html @@ -184,12 +184,12 @@

Input is last child of chip grid

} - +

Input is next sibling child of chip grid

From bc35d1502a81828159146d19602e69c73ae2ca2a Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Thu, 6 Feb 2025 21:11:18 +0000 Subject: [PATCH 05/12] 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. --- src/material/chips/chips.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/material/chips/chips.md b/src/material/chips/chips.md index 373672b0ca31..4e24826b42ff 100644 --- a/src/material/chips/chips.md +++ b/src/material/chips/chips.md @@ -139,7 +139,7 @@ The chips components support 3 user interaction patterns, each with its own cont #### Text Entry -`` and `` : These elements implement a grid accessibility pattern. Use them as part of a free form input that allows users to enter text to add chips. +`` and `` : These elements implement a grid accessibility pattern. Use them as part of a free form input that allows users to enter text to add chips. Note : be sure to have the input element be a sibling of mat-chip-grid to ensure accessibility of the input element by accessibility devices such as Voice Control. The input will have a default `aria-placeholder` value of "Enter input" if no `ariaPlaceholder` value or `placeholder` attribute value is applied. This is to provide a calculable name for accessibility controls. ```html @@ -153,10 +153,11 @@ The chips components support 3 user interaction patterns, each with its own cont } - + ``` From f75e364be6ae976a0fa37e28f7d1dbb353b0cf62 Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Fri, 7 Feb 2025 02:12:29 +0000 Subject: [PATCH 06/12] 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. --- src/dev-app/chips/chips-demo.html | 4 ++-- src/material/chips/chip-input.ts | 29 +++++++++++++---------------- 2 files changed, 15 insertions(+), 18 deletions(-) diff --git a/src/dev-app/chips/chips-demo.html b/src/dev-app/chips/chips-demo.html index 846ab78a6e1b..3d12f779a35f 100644 --- a/src/dev-app/chips/chips-demo.html +++ b/src/dev-app/chips/chips-demo.html @@ -29,8 +29,8 @@

Unstyled

Basic Chip Row 1 Basic Chip Row 2 Basic Chip Row 3 - +

With avatar, icons, and color

@@ -210,7 +210,7 @@

Input is next sibling child of chip grid

[matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur" (matChipInputTokenEnd)="add($event)" - ariaPlaceholder="New contributor input..." /> + ariaLabel="New contributor input..." />

diff --git a/src/material/chips/chip-input.ts b/src/material/chips/chip-input.ts index 611d7ab54098..1778047f405e 100644 --- a/src/material/chips/chip-input.ts +++ b/src/material/chips/chip-input.ts @@ -59,7 +59,7 @@ export interface MatChipInputEvent { '[id]': 'id', '[attr.disabled]': 'disabled || null', '[attr.placeholder]': 'placeholder || null', - '[attr.aria-placeholder]': 'getAriaPlaceholder()', + '[attr.aria-label]': 'ariaLabel || null', '[attr.aria-invalid]': '_chipGrid && _chipGrid.ngControl ? _chipGrid.ngControl.invalid : null', '[attr.aria-required]': '_chipGrid && _chipGrid.required || null', '[attr.required]': '_chipGrid && _chipGrid.required || null', @@ -105,8 +105,11 @@ export class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy { /** The input's placeholder text. */ @Input() placeholder: string = ''; - /** Screenreader placeholder for the input, only used if placeholder is not provided. */ - @Input() ariaPlaceholder: string | null; + /** + * Aria-label for the input. Optional, but highly recommended to improve + * accessibility for Voice Control naming/usage of the entering input field itself. + */ + @Input() ariaLabel: string | null; /** Unique id for the input. */ @Input() id: string = inject(_IdGenerator).getId('mat-mdc-chip-list-input-'); @@ -129,12 +132,6 @@ export class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy { /** The native input element to which this directive is attached. */ readonly inputElement!: HTMLInputElement; - /** - * Default Screen-reader placeholder for the input if no placeholder or - * ariaPlaceholder is provided. - */ - private readonly _defaultAriaPlaceholder = 'Enter input'; - constructor(...args: unknown[]); constructor() { @@ -234,11 +231,11 @@ export class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy { return !hasModifierKey(event) && new Set(this.separatorKeyCodes).has(event.keyCode); } - /** - * Checks whether placeholder is used, if not checks for ariaPlaceholder, and resorts - * to default value if neither is provided. - */ - getAriaPlaceholder(): string | null { - return this.placeholder ? null : this.ariaPlaceholder || this._defaultAriaPlaceholder; - } + // /** + // * Checks whether placeholder is used, if not checks for ariaPlaceholder, and resorts + // * to default value if neither is provided. + // */ + // getAriaPlaceholder(): string | null { + // return this.placeholder ? null : this.ariaPlaceholder || null; + // } } From a6bbd712c5f5b9602456f510e1ee838ea6d63d88 Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Fri, 7 Feb 2025 02:22:15 +0000 Subject: [PATCH 07/12] 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. --- src/dev-app/chips/chips-demo.html | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/dev-app/chips/chips-demo.html b/src/dev-app/chips/chips-demo.html index 3d12f779a35f..4bd636576490 100644 --- a/src/dev-app/chips/chips-demo.html +++ b/src/dev-app/chips/chips-demo.html @@ -184,6 +184,12 @@

Input is last child of chip grid

} + Input is next sibling child of chip grid + (matChipInputTokenEnd)="add($event)"/>

From bf05972576ec33833ebb823f10cf5b7036382d41 Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Wed, 12 Feb 2025 18:41:00 +0000 Subject: [PATCH 08/12] refactor(material/chips): make recommended changes after review Updates previous fix by implementing recommended changes by reviewer. --- src/material/chips/chip-input.ts | 7 ------- src/material/chips/chips.md | 4 +++- 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/src/material/chips/chip-input.ts b/src/material/chips/chip-input.ts index 1778047f405e..54be45197d71 100644 --- a/src/material/chips/chip-input.ts +++ b/src/material/chips/chip-input.ts @@ -59,7 +59,6 @@ export interface MatChipInputEvent { '[id]': 'id', '[attr.disabled]': 'disabled || null', '[attr.placeholder]': 'placeholder || null', - '[attr.aria-label]': 'ariaLabel || null', '[attr.aria-invalid]': '_chipGrid && _chipGrid.ngControl ? _chipGrid.ngControl.invalid : null', '[attr.aria-required]': '_chipGrid && _chipGrid.required || null', '[attr.required]': '_chipGrid && _chipGrid.required || null', @@ -105,12 +104,6 @@ export class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy { /** The input's placeholder text. */ @Input() placeholder: string = ''; - /** - * Aria-label for the input. Optional, but highly recommended to improve - * accessibility for Voice Control naming/usage of the entering input field itself. - */ - @Input() ariaLabel: string | null; - /** Unique id for the input. */ @Input() id: string = inject(_IdGenerator).getId('mat-mdc-chip-list-input-'); diff --git a/src/material/chips/chips.md b/src/material/chips/chips.md index 4e24826b42ff..beaa12ee5876 100644 --- a/src/material/chips/chips.md +++ b/src/material/chips/chips.md @@ -139,7 +139,9 @@ The chips components support 3 user interaction patterns, each with its own cont #### Text Entry -`` and `` : These elements implement a grid accessibility pattern. Use them as part of a free form input that allows users to enter text to add chips. Note : be sure to have the input element be a sibling of mat-chip-grid to ensure accessibility of the input element by accessibility devices such as Voice Control. The input will have a default `aria-placeholder` value of "Enter input" if no `ariaPlaceholder` value or `placeholder` attribute value is applied. This is to provide a calculable name for accessibility controls. +`` and `` : These elements implement a grid accessibility pattern. Use them as part of a free form input that allows users to enter text to add chips. + +Note : be sure to have the input element be a sibling of mat-chip-grid to ensure accessibility of the input element by accessibility devices such as Voice Control. ```html From 763a74111a036a9d814d163a9e4689ec720c7e2a Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Wed, 12 Feb 2025 19:05:43 +0000 Subject: [PATCH 09/12] refactor(material/chips): updates chips demo to use aria-label Updates previous change to Chips demo to use aria-label. --- src/dev-app/chips/chips-demo.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/dev-app/chips/chips-demo.html b/src/dev-app/chips/chips-demo.html index 4bd636576490..c1dd192f7534 100644 --- a/src/dev-app/chips/chips-demo.html +++ b/src/dev-app/chips/chips-demo.html @@ -189,7 +189,7 @@

Input is last child of chip grid

[matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur" (matChipInputTokenEnd)="add($event)" - ariaLabel="New contributor input..." /> + aria-label="New contributor input..." /> Date: Wed, 12 Feb 2025 19:07:39 +0000 Subject: [PATCH 10/12] refactor(material/chips): removes commented out code Cleans up previous changes and removes unused code. --- src/material/chips/chip-input.ts | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/material/chips/chip-input.ts b/src/material/chips/chip-input.ts index 54be45197d71..1fd8c53395ee 100644 --- a/src/material/chips/chip-input.ts +++ b/src/material/chips/chip-input.ts @@ -223,12 +223,4 @@ export class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy { private _isSeparatorKey(event: KeyboardEvent) { return !hasModifierKey(event) && new Set(this.separatorKeyCodes).has(event.keyCode); } - - // /** - // * Checks whether placeholder is used, if not checks for ariaPlaceholder, and resorts - // * to default value if neither is provided. - // */ - // getAriaPlaceholder(): string | null { - // return this.placeholder ? null : this.ariaPlaceholder || null; - // } } From eb5ac38a8b61b5a4980ca86fad44d1cc8d3dcf98 Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Wed, 12 Feb 2025 19:11:25 +0000 Subject: [PATCH 11/12] docs(material/chips): updates chips input accesibility recommendation Updates example which previously used ariaPlaceholder and instead uses an aria-label. --- src/material/chips/chips.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/material/chips/chips.md b/src/material/chips/chips.md index beaa12ee5876..af5e6cb88a3c 100644 --- a/src/material/chips/chips.md +++ b/src/material/chips/chips.md @@ -141,7 +141,7 @@ The chips components support 3 user interaction patterns, each with its own cont `` and `` : These elements implement a grid accessibility pattern. Use them as part of a free form input that allows users to enter text to add chips. -Note : be sure to have the input element be a sibling of mat-chip-grid to ensure accessibility of the input element by accessibility devices such as Voice Control. +Note : be sure to have the input element be a sibling of mat-chip-grid to ensure accessibility of the input element by accessibility devices such as Voice Control. It is also recommended to apply an appropriate `aria-label` to the input to optimize accessibility of the input. ```html @@ -159,7 +159,7 @@ Note : be sure to have the input element be a sibling of mat-chip-grid to ensure + aria-label="Add sandwich fillings..." /> ``` From c4ff6b7c6828e965097c44be5487e5799c0796e1 Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Wed, 12 Feb 2025 19:38:50 +0000 Subject: [PATCH 12/12] build(material/chips): updates build for chips.md Ran command to update chips.md api guard. --- tools/public_api_guard/material/chips.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/tools/public_api_guard/material/chips.md b/tools/public_api_guard/material/chips.md index 673fe06df89d..2ac72c5d6914 100644 --- a/tools/public_api_guard/material/chips.md +++ b/tools/public_api_guard/material/chips.md @@ -244,7 +244,6 @@ export class MatChipGridChange { export class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy { constructor(...args: unknown[]); addOnBlur: boolean; - ariaPlaceholder: string | null; _blur(): void; readonly chipEnd: EventEmitter; get chipGrid(): MatChipGrid; @@ -262,7 +261,6 @@ export class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy { // (undocumented) _focus(): void; focused: boolean; - getAriaPlaceholder(): string | null; id: string; readonly inputElement: HTMLInputElement; _keydown(event: KeyboardEvent): void; @@ -281,7 +279,7 @@ export class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy { // (undocumented) setDescribedByIds(ids: string[]): void; // (undocumented) - static ɵdir: i0.ɵɵDirectiveDeclaration; + static ɵdir: i0.ɵɵDirectiveDeclaration; // (undocumented) static ɵfac: i0.ɵɵFactoryDeclaration; }