formio · lane-formio · Aug 11, 2026
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,56 @@
 # @formio/uswds
 
+## 2.9.1
+
+### Patch Changes
+
+- 793d0d8: FIO-11291: fixed Field Set Legend announcement by a screen reader for all Components within the field set on the View Submission page and PDF download
+- 3c302ee: FIO-12013 Fixed excessive label announcements in NVDA
+- Updated dependencies [8eb6855]
+- Updated dependencies [1d9fcee]
+- Updated dependencies [5d51d06]
+- Updated dependencies [6298b64]
+- Updated dependencies [3f8bcc1]
+- Updated dependencies [793d0d8]
+- Updated dependencies [2a0676a]
+- Updated dependencies [543b082]
+- Updated dependencies [5fa2592]
+- Updated dependencies [587b8b4]
+- Updated dependencies [dc60a11]
+- Updated dependencies [b20c6e2]
+- Updated dependencies [5ec8478]
+- Updated dependencies [eccfae0]
+  - @formio/js@5.5.1
+
+## 2.9.1-api99.1
+
+### Patch Changes
+
+- Updated dependencies [587b8b4]
+  - @formio/js@5.5.1-api99.1
+
+## 2.9.1-api99.0
+
+### Patch Changes
+
+- 793d0d8: FIO-11291: fixed Field Set Legend announcement by a screen reader for all Components within the field set on the View Submission page and PDF download
+- 3c302ee: FIO-12013 Fixed excessive label announcements in NVDA
+- Updated dependencies [8eb6855]
+- Updated dependencies [1d9fcee]
+- Updated dependencies [5d51d06]
+- Updated dependencies [6298b64]
+- Updated dependencies [3f8bcc1]
+- Updated dependencies [793d0d8]
+- Updated dependencies [82583ef]
+- Updated dependencies [2a0676a]
+- Updated dependencies [543b082]
+- Updated dependencies [5fa2592]
+- Updated dependencies [dc60a11]
+- Updated dependencies [b20c6e2]
+- Updated dependencies [5ec8478]
+- Updated dependencies [eccfae0]
+  - @formio/js@5.5.1-api99.0
+
 ## 2.9.0
 
 ### Minor Changes

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@formio/uswds",
-  "version": "2.9.0",
+  "version": "2.9.1",
   "description": "US Web Design System templates for form.io",
   "main": "lib/index.js",
   "scripts": {
@@ -34,10 +34,10 @@
     "Standards"
   ],
   "peerDependencies": {
-    "@formio/js": "^5.5.0"
+    "@formio/js": "^5.5.1"
   },
   "devDependencies": {
-    "@formio/js": "^5.5.0",
+    "@formio/js": "^5.5.1",
     "@types/chai": "^4.2.22",
     "@types/ejs": "^3.1.0",
     "@types/mocha": "^9.0.0",

diff --git a/src/templates/uswds/checkbox/form.ejs b/src/templates/uswds/checkbox/form.ejs
@@ -1,3 +1,9 @@
+{% var isViewReadContext = ctx.instance.options && (ctx.instance.options.readOnly || ctx.instance.options.pdf); %}
+{% var viewAccessibleLabel = isViewReadContext && ctx.instance.getFormattedViewAccessibleLabel ? ctx.instance.getFormattedViewAccessibleLabel() : ''; %}
+{% var fieldsetLegendIds = ctx.instance.getFieldsetLegendIds ? ctx.instance.getFieldsetLegendIds() : ''; %}
+{% var useAriaLabelOnly = isViewReadContext && viewAccessibleLabel; %}
+{% var ariaAttr = useAriaLabelOnly ? 'aria-label' : 'aria-labelledby'; %}
+{% var ariaValue = useAriaLabelOnly ? viewAccessibleLabel : ((fieldsetLegendIds ? fieldsetLegendIds + ' ' : '') + 'l-' + ctx.instance.id + '-' + ctx.component.key); %}
 <div
   ref="messageContainer"
   class="text-secondary-dark width-full margin-top-05 formio-errors"
@@ -12,6 +18,7 @@
     {{attr}}="{{ctx.input.attr[attr]}}"
     {% } %}
     {% if (ctx.checked) { %}checked=true{% } %}
+    {{ariaAttr}}="{{ariaValue}}"
     aria-required="{{ctx.component.validate.required}}"
     {% if (ctx.component.description) { %}
     aria-describedby="d-{{ctx.instance.id}}-{{ctx.component.key}}"
@@ -21,6 +28,7 @@
     ref="label"
     class="{{ctx.input.labelClass}} usa-checkbox__label"
     for="{{ctx.id}}-{{ctx.input.attr.name}}"
+    id="l-{{ctx.instance.id}}-{{ctx.component.key}}"
   >
     {{ctx.input.label}}
     {{ctx.input.content}}

diff --git a/src/templates/uswds/day/form.ejs b/src/templates/uswds/day/form.ejs
@@ -1,3 +1,9 @@
+{% var fieldsetLegendIds = ctx.instance.getFieldsetLegendIds ? ctx.instance.getFieldsetLegendIds() : ''; %}
+{% var isViewReadContext = ctx.instance.options && (ctx.instance.options.readOnly || ctx.instance.options.pdf); %}
+{% var viewAccessibleLabel = isViewReadContext && ctx.instance.getFormattedViewAccessibleLabel ? ctx.instance.getFormattedViewAccessibleLabel() : ''; %}
+{% var useAriaLabelOnly = isViewReadContext && viewAccessibleLabel; %}
+{% var dayAriaAttr = useAriaLabelOnly ? 'aria-label' : 'aria-labelledby'; %}
+{% var dayAriaValue = useAriaLabelOnly ? viewAccessibleLabel : ((fieldsetLegendIds ? fieldsetLegendIds + ' ' : '') + 'l-' + ctx.instance.id + '-' + ctx.component.key); %}
 <fieldset class="usa-fieldset">
   <legend class="usa-legend usa-sr-only">{{ctx.component.label}}</legend>
   <div class="usa-memorable-date display-flex"
@@ -6,7 +12,7 @@
     {% if (ctx.component.hideLabel) { %}
     aria-label="{{ctx.component.label}}"
     {% } else { %}
-    aria-labelledby="l-{{ctx.instance.id}}-{{ctx.component.key}}"
+    {{dayAriaAttr}}="{{dayAriaValue}}"
     {% } %}
     {% if (ctx.component.description) { %}
     aria-describedby="d-{{ctx.instance.id}}-{{ctx.component.key}}"

diff --git a/src/templates/uswds/input/form.ejs b/src/templates/uswds/input/form.ejs
@@ -13,14 +13,20 @@
 </div>
 {% } %}
 {% if (!ctx.component.editor && !ctx.component.wysiwyg) { %}
+{% var fieldsetLegendIds = ctx.instance.getFieldsetLegendIds ? ctx.instance.getFieldsetLegendIds() : ''; %}
+{% var isViewReadContext = ctx.instance.options && (ctx.instance.options.readOnly || ctx.instance.options.pdf); %}
+{% var viewAccessibleLabel = isViewReadContext && ctx.instance.getFormattedViewAccessibleLabel ? ctx.instance.getFormattedViewAccessibleLabel() : ''; %}
+{% var useAriaLabelOnly = isViewReadContext && viewAccessibleLabel; %}
+{% var ariaAttr = useAriaLabelOnly ? 'aria-label' : 'aria-labelledby'; %}
+{% var ariaValue = useAriaLabelOnly ? viewAccessibleLabel : ((fieldsetLegendIds ? fieldsetLegendIds + ' ' : '') + 'l-' + ctx.instance.id + '-' + ctx.component.key + (ctx.component.description ? ' d-' + ctx.instance.id + '-' + ctx.component.key : '')); %}
 <{{ctx.input.type}}
   class="usa-{{ctx.input.type === 'textarea' ? 'textarea' : 'input'}} maxw-full"
   ref="{{ctx.input.ref || 'input'}}"
   {% for (var attr in ctx.input.attr) { %}
   {{attr}}="{{ctx.input.attr[attr]}}"
   {% } %}
   id="{{ctx.instance.id}}-{{ctx.component.key}}"
-  aria-labelledby="l-{{ctx.instance.id}}-{{ctx.component.key}} {% if (ctx.component.description) { %}d-{{ctx.instance.id}}-{{ctx.component.key}}{% } %}"
+  {{ariaAttr}}="{{ariaValue}}"
   aria-required="{{ctx.input.ref === 'input' || !ctx.input.ref ? ctx.component.validate.required : ctx.component.fields[ctx.input.ref].required}}"
 >{{ctx.input.content}}</{{ctx.input.type}}>
 {% } %}

diff --git a/src/templates/uswds/label/form.ejs b/src/templates/uswds/label/form.ejs
@@ -3,6 +3,9 @@
     ref="label"
     id="l-{{ctx.instance.id}}-{{ctx.component.key}}"
     for="{{ctx.instance.id}}-{{ctx.component.key}}"
+    {% if (ctx.label.hidden) { %}
+    aria-hidden="true"
+    {% } %}
   >
     <span>{{ ctx.t(ctx.component.label) }}</span>
     {% if (ctx.component.type === 'number' || ctx.component.type === 'phoneNumber' || ctx.component.type === 'currency') { %}

diff --git a/src/templates/uswds/radio/form.ejs b/src/templates/uswds/radio/form.ejs
@@ -1,7 +1,13 @@
+{% var fieldsetLegendIds = ctx.instance.getFieldsetLegendIds ? ctx.instance.getFieldsetLegendIds() : ''; %}
+{% var isViewReadContext = ctx.instance.options && (ctx.instance.options.readOnly || ctx.instance.options.pdf); %}
+{% var viewAccessibleLabel = isViewReadContext && ctx.instance.getFormattedViewAccessibleLabel ? ctx.instance.getFormattedViewAccessibleLabel() : ''; %}
+{% var useAriaLabelOnly = isViewReadContext && viewAccessibleLabel; %}
+{% var ariaAttr = useAriaLabelOnly ? 'aria-label' : 'aria-labelledby'; %}
+{% var ariaValue = useAriaLabelOnly ? viewAccessibleLabel : ((fieldsetLegendIds ? fieldsetLegendIds + ' ' : '') + 'l-' + ctx.instance.id + '-' + ctx.component.key + (ctx.component.description ? ' d-' + ctx.instance.id + '-' + ctx.component.key : '')); %}
 <fieldset
   class="usa-fieldset"
   ref="radioGroup"
-  aria-labelledby="l-{{ctx.instance.id}}-{{ctx.component.key}} {% if (ctx.component.description) { %}d-{{ctx.instance.id}}-{{ctx.component.key}}{% } %}"
+  {{ariaAttr}}="{{ariaValue}}"
 >
   <legend id="l-{{ctx.instance.id}}-{{ctx.component.key}}" ref="label" class="usa-sr-only">
     {{ctx.t(ctx.component.label)}}

diff --git a/src/templates/uswds/select/form.ejs b/src/templates/uswds/select/form.ejs
@@ -1,3 +1,9 @@
+{% var fieldsetLegendIds = ctx.instance.getFieldsetLegendIds ? ctx.instance.getFieldsetLegendIds() : ''; %}
+{% var isViewReadContext = ctx.instance.options && (ctx.instance.options.readOnly || ctx.instance.options.pdf); %}
+{% var viewAccessibleLabel = isViewReadContext && ctx.instance.getFormattedViewAccessibleLabel ? ctx.instance.getFormattedViewAccessibleLabel() : ''; %}
+{% var useAriaLabelOnly = isViewReadContext && viewAccessibleLabel; %}
+{% var ariaAttr = useAriaLabelOnly ? 'aria-label' : 'aria-labelledby'; %}
+{% var ariaValue = useAriaLabelOnly ? viewAccessibleLabel : ((fieldsetLegendIds ? fieldsetLegendIds + ' ' : '') + 'l-' + ctx.instance.id + '-' + ctx.component.key); %}
 <select
   ref="{{ctx.input.ref ? ctx.input.ref : 'selectContainer'}}"
   class="usa-select maxw-full {{ctx.disabled ? 'bg-base-lightest' : ''}}"
@@ -7,7 +13,7 @@
   {% if (!ctx.input.attr.id) { %}
   id="{{ctx.instance.id}}-{{ctx.component.key}}"
   {% } %}
-  aria-labelledby="l-{{ctx.instance.id}}-{{ctx.component.key}}"
+  {{ariaAttr}}="{{ariaValue}}"
   {% if (ctx.component.description) { %}
   aria-describedby="d-{{ctx.instance.id}}-{{ctx.component.key}}"
   {% } %}

diff --git a/src/templates/uswds/survey/form.ejs b/src/templates/uswds/survey/form.ejs
@@ -1,4 +1,12 @@
-<table class="usa-table">
+{% var fieldsetLegendIds = ctx.instance.getFieldsetLegendIds ? ctx.instance.getFieldsetLegendIds() : ''; %}
+{% var isViewReadContext = ctx.instance.options && (ctx.instance.options.readOnly || ctx.instance.options.pdf); %}
+{% var viewAccessibleLabel = isViewReadContext && ctx.instance.getFormattedViewAccessibleLabel ? ctx.instance.getFormattedViewAccessibleLabel() : ''; %}
+{% var useAriaLabelOnly = isViewReadContext && viewAccessibleLabel; %}
+{% var ariaAttr = useAriaLabelOnly ? 'aria-label' : 'aria-labelledby'; %}
+{% var ariaValue = useAriaLabelOnly ? viewAccessibleLabel : ((fieldsetLegendIds ? fieldsetLegendIds + ' ' : '') + 'l-' + ctx.instance.id + '-' + ctx.component.key); %}
+<table class="usa-table"
+  {{ariaAttr}}="{{ariaValue}}"
+>
   <thead>
     <tr>
       <th scope="col"></th>