fix(aria/combobox): improve autocomplete placeholder text color contrast (#33465)

* 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

* refactor(aria/combobox): fix stylelint-disable redundancy

Removes redundant stylelint-disable lines.

* 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.

(cherry picked from commit e2cab48)

Author: essjay05

src/components-examples/aria/autocomplete/autocomplete.css

@@ -5,6 +5,36 @@
 
   /* 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.
+
+  NOTE: These styles are primarily needed for internal testing. */
+
+  /* stylelint-disable material/no-prefixes -- Provides all prefixes for ::placeholder */
+  input::-webkit-input-placeholder {
+    color: var(--mat-sys-on-surface-variant);
+  }
+
+  input::-moz-placeholder /* Firefox 19+ */ {
+    color: var(--mat-sys-on-surface-variant);
+  }
+
+  input:-ms-input-placeholder /* IE 10+ */ {
+    color: var(--mat-sys-on-surface-variant);
+  }
+
+  input:-moz-placeholder  /* Firefox 18- */ {
+    color: var(--mat-sys-on-surface-variant);
+  }
+
+  input::placeholder {
+    color: var(--mat-sys-on-surface-variant);
+  }
+
 }
 
 .example-search-icon,
@@ -116,12 +146,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 */