From c8e582df7f5e2cf11e3172982e16a0344bb9b1dc Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Mon, 29 Jun 2026 16:15:33 -0700 Subject: [PATCH 1/3] fix(aria/combobox): improve autocomplete placeholder text color contrast Updates Angular Aria's autocomplete styles to improve the text color contrast of the placeholder text to meet accessibilityrequirements and improve text readability. Fixes b/477617379 --- .../aria/autocomplete/autocomplete.css | 41 +++++++++++++++---- 1 file changed, 32 insertions(+), 9 deletions(-) diff --git a/src/components-examples/aria/autocomplete/autocomplete.css b/src/components-examples/aria/autocomplete/autocomplete.css index ffa2d0bb763c..8c143ba315e2 100644 --- a/src/components-examples/aria/autocomplete/autocomplete.css +++ b/src/components-examples/aria/autocomplete/autocomplete.css @@ -5,6 +5,38 @@ /* stylelint-disable-next-line material/no-prefixes -- Valid in all remotely recent browsers. */ width: fit-content; + + /* The ::placeholder selectors are intentionally separated. + The 'material/no-prefixes' stylelint rule flags the standard ::placeholder + when grouped with vendor prefixes. Each prefix is on its own rule to comply. + Vendor prefixes are included to ensure consistent placeholder styling + across different browsers. */ + + /* stylelint-disable-next-line material/no-prefixes -- Provides all prefixes for ::placeholder */ + input::-webkit-input-placeholder { + color: var(--mat-sys-on-surface-variant); + } + + /* stylelint-disable-next-line material/no-prefixes -- Provides all prefixes for ::placeholder */ + input::-moz-placeholder /* Firefox 19+ */ { + color: var(--mat-sys-on-surface-variant); + } + + /* stylelint-disable-next-line material/no-prefixes -- Provides all prefixes for ::placeholder */ + input:-ms-input-placeholder /* IE 10+ */ { + color: var(--mat-sys-on-surface-variant); + } + + /* stylelint-disable-next-line material/no-prefixes -- Provides all prefixes for ::placeholder */ + input:-moz-placeholder /* Firefox 18- */ { + color: var(--mat-sys-on-surface-variant); + } + + /* stylelint-disable-next-line material/no-prefixes -- Provides all prefixes for ::placeholder */ + input::placeholder { + color: var(--mat-sys-on-surface-variant); + } + } .example-search-icon, @@ -116,12 +148,3 @@ input[ngCombobox]:disabled { font-size: 0.9rem; } -/* stylelint-disable material/no-prefixes -- Provides all prefixes for ::placeholder */ -input::-webkit-input-placeholder, -input::-moz-placeholder, /* Firefox 19+ */ -input:-ms-input-placeholder, /* IE 10+ */ -input:-moz-placeholder, /* Firefox 18- */ -input::placeholder { - color: var(--mat-sys-on-surface-variant); -} -/* stylelint-enable material/no-prefixes */ From 0d91b989d0a167748a6ae7d1633a117dd240f068 Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Mon, 29 Jun 2026 16:38:51 -0700 Subject: [PATCH 2/3] refactor(aria/combobox): fix stylelint-disable redundancy Removes redundant stylelint-disable lines. --- src/components-examples/aria/autocomplete/autocomplete.css | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/components-examples/aria/autocomplete/autocomplete.css b/src/components-examples/aria/autocomplete/autocomplete.css index 8c143ba315e2..0478f44468d6 100644 --- a/src/components-examples/aria/autocomplete/autocomplete.css +++ b/src/components-examples/aria/autocomplete/autocomplete.css @@ -12,27 +12,23 @@ Vendor prefixes are included to ensure consistent placeholder styling across different browsers. */ - /* stylelint-disable-next-line material/no-prefixes -- Provides all prefixes for ::placeholder */ + /* stylelint-disable material/no-prefixes -- Provides all prefixes for ::placeholder */ input::-webkit-input-placeholder { color: var(--mat-sys-on-surface-variant); } - /* stylelint-disable-next-line material/no-prefixes -- Provides all prefixes for ::placeholder */ input::-moz-placeholder /* Firefox 19+ */ { color: var(--mat-sys-on-surface-variant); } - /* stylelint-disable-next-line material/no-prefixes -- Provides all prefixes for ::placeholder */ input:-ms-input-placeholder /* IE 10+ */ { color: var(--mat-sys-on-surface-variant); } - /* stylelint-disable-next-line material/no-prefixes -- Provides all prefixes for ::placeholder */ input:-moz-placeholder /* Firefox 18- */ { color: var(--mat-sys-on-surface-variant); } - /* stylelint-disable-next-line material/no-prefixes -- Provides all prefixes for ::placeholder */ input::placeholder { color: var(--mat-sys-on-surface-variant); } From e9a9e00082da2909703e4c01e0832a0ed57e6d87 Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Tue, 30 Jun 2026 09:10:05 -0700 Subject: [PATCH 3/3] refactor(aria/combobox): add context for reason for ::placeholder styles Updates comment in added ::placeholder styles to note the styles are primarily for internal testing. --- src/components-examples/aria/autocomplete/autocomplete.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components-examples/aria/autocomplete/autocomplete.css b/src/components-examples/aria/autocomplete/autocomplete.css index 0478f44468d6..f76b595df316 100644 --- a/src/components-examples/aria/autocomplete/autocomplete.css +++ b/src/components-examples/aria/autocomplete/autocomplete.css @@ -10,7 +10,9 @@ The 'material/no-prefixes' stylelint rule flags the standard ::placeholder when grouped with vendor prefixes. Each prefix is on its own rule to comply. Vendor prefixes are included to ensure consistent placeholder styling - across different browsers. */ + across different browsers. + + NOTE: These styles are primarily needed for internal testing. */ /* stylelint-disable material/no-prefixes -- Provides all prefixes for ::placeholder */ input::-webkit-input-placeholder {