1
/** Invisible alternatives reserve the label's width without changing its accessible name. */
2
export function ActionLabel({
3
  value,
4
  alternatives,
5
}: {
6
  value: string;
7
  alternatives: readonly string[];
8
}) {
9
  return (
10
    <span className="inline-grid">
11
      <span className="col-start-1 row-start-1">{value}</span>
12
      {alternatives.map((label) => (
13
        <span key={label} aria-hidden="true" className="invisible col-start-1 row-start-1">
14
          {label}
15
        </span>
16
      ))}
17
    </span>
18
  );
19
}