Fix repetitive required field indicator for screen readers

`@isRequired` applies both a visual indicator and the `required` attribute on the associated for field, causing a repetitive 'required' when a screen reader user reaches the form element. We set `aria-hidden` to `true` to remove the indicator from the a11y tree and rely on the native HTML attribute to communicate this to users.
hashicorp · Dec 23, 2022 · fa819fe · fa819fe
1 parent f84bd91
commit fa819fe
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/.changeset/orange-suits-guess.md b/.changeset/orange-suits-guess.md
@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": patch
+---
+
+Fix repetitive required field indicator for screen readers
diff --git a/packages/components/addon/components/hds/form/indicator/index.hbs b/packages/components/addon/components/hds/form/indicator/index.hbs
@@ -1,6 +1,6 @@
 {{#if @isOptional}}
-  <span class={{this.classNames}}>(Optional)</span>
+  <span aria-hidden="true" class={{this.classNames}}>(Optional)</span>
 {{/if}}
 {{#if @isRequired}}
-  &nbsp;<Hds::Badge class={{this.classNames}} @size="small" @color="neutral" @text="Required" />
+  &nbsp;<Hds::Badge aria-hidden="true" class={{this.classNames}} @size="small" @color="neutral" @text="Required" />
 {{/if}}