How to escape implicit autofill values in HTML label elements

escapeImplicitAutofillValue.ts

// Browsers don't respect `autocomplete='off'`.
// Safari (maybe others) will inspect the text value of a `label` element to predict intent.
// Sometimes we want to include 'name' in the value and not have it interpreted as a 'user name'.

// This function will transform the string to a visually equivalent string by inserting `zero width join` characters.

const wordJoiner = '\u{2060}';
export function escapeImplicitAutofillValue(label: string): string {
  return label.split('').join(wordJoiner);
}

Note: Screen readers will read each letter individually. Use aria-label with the unescaped string to speak the label correctly.