docs(material/form-field) update form field prefix suffix a11y docs

src/dev-app/chips/chips-demo.scss

@@ -18,7 +18,7 @@
   }
 
   .mat-mdc-basic-chip {
-    margin: auto 10px;
+    margin: 16px 10px;
   }
 
   mat-chip-grid input {

src/material/chips/_m2-chip.scss

@@ -6,6 +6,11 @@
 @function get-tokens($theme) {
   $system: m2-utils.get-system($theme);
   $density-scale: theming.clamp-density(map.get($system, density-scale), -2);
+  $touch-target-display: block;
+
+  @if $density-scale < 0 {
+    $touch-target-display: none;
+  }
 
   @return (
     base: (
@@ -43,7 +48,8 @@
       chip-container-height: map.get((
         0: 32px,
         -1: 28px,
-        -2: 24px), $density-scale)
+        -2: 24px), $density-scale),
+        chip-touch-target-display: $touch-target-display,
     ),
   );
 }

src/material/chips/_m3-chip.scss

@@ -77,5 +77,6 @@
 
   @return (
     chip-container-height: list.nth((32px, 28px, 24px), $index),
+    chip-touch-target-display: list.nth((block, none, none), $index),
   );
 }

src/material/chips/chip-option.html

@@ -26,6 +26,7 @@
     <span class="mdc-evolution-chip__text-label mat-mdc-chip-action-label">
       <ng-content></ng-content>
       <span class="mat-mdc-chip-primary-focus-indicator mat-focus-indicator"></span>
+      <span class="mat-mdc-chip-touch-target"></span>
     </span>
   </button>
 </span>

src/material/chips/chip-row.html

@@ -31,6 +31,7 @@
 
     <span class="mat-mdc-chip-primary-focus-indicator mat-focus-indicator" aria-hidden="true"></span>
   </span>
+  <span class="mat-mdc-chip-touch-target"></span>
 </span>
 
 @if (_hasTrailingIcon()) {

src/material/chips/chip-set.scss

@@ -16,7 +16,7 @@
   }
 
   .mdc-evolution-chip {
-    margin: 4px 0 4px 8px;
+    margin: 8px 0 8px 8px;
   }
 
   [dir='rtl'] & {

src/material/chips/chip.html

@@ -11,6 +11,7 @@
       <ng-content></ng-content>
       <span class="mat-mdc-chip-primary-focus-indicator mat-focus-indicator"></span>
     </span>
+    <span class="mat-mdc-chip-touch-target"></span>
   </span>
 </span>
 

src/material/chips/chip.scss

@@ -12,6 +12,7 @@ $_graphic-padding: 6px;
 $_trailing-action-padding: 8px;
 $_avatar-leading-padding: 4px;
 $_avatar-trailing-padding: 8px;
+$_touch-target-size: 48px;
 
 $fallbacks: m3-chip.get-tokens();
 
@@ -27,6 +28,17 @@ $fallbacks: m3-chip.get-tokens();
   max-width: 100%;
 }
 
+.mat-mdc-chip-touch-target {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: $_touch-target-size;
+  transform: translateY(-50%);
+  display: token-utils.slot(chip-touch-target-display, $fallbacks);
+  pointer-events: auto;
+}
+
 .mdc-evolution-chip__cell,
 .mdc-evolution-chip__action {
   height: 100%;

src/material/form-field/form-field.md

@@ -144,6 +144,18 @@ adds these elements' IDs to the control's `aria-describedby` attribute. Addition
 applies `aria-live="polite"` by default such that assistive technology will announce errors when
 they appear.
 
+When using static text prefixes or suffixes (such as currency symbols like `$` or unit suffixes like
+`.00` or `kg`), screen readers may not announce them as part of the input value, and some mobile screen
+readers, especially on Android/TalkBack, may expose them as separate focus stops. This can lead to
+redundant announcements or unexpected focus behavior when navigating the field.
+
+If the prefix or suffix provides important context, add an `aria-label` to the input or include the full
+meaning in `aria-describedby` so the accessible name/description matches the visible content. For example,
+if the prefix is `$` and the suffix is `.00` to indicate dollars with no cents, an appropriate `aria-label`
+could be `aria-label="Amount in dollars with 0 cents"`. When the static text is purely decorative and the
+input already conveys the full context, add `aria-hidden="true"` to the static `matTextPrefix` or
+`matTextSuffix` elements so they are skipped during swipe navigation and do not create redundant focus stops.
+
 ### Troubleshooting
 
 #### Error: A hint was already declared for align="..."