formio · lane-formio · Jul 23, 2026 · Jul 23, 2026
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,48 @@
 # @formio/bootstrap
 
+## 4.0.3
+
+### Patch Changes
+
+- 4864d4c: FIO-12002 Aligned bootstrap5 with VPAT so they can work correctly together
+- be69fe1: Adding information to the error link about which wizard page the error occurred on
+- af465a1: FIO-11335 Put numeric only announcement back in the label
+- a334b0f: FIO-11779 Fix Day component error message announcements in VPAT
+- 8d7803a: FIO-11976 Removed button from rendering a hidden label
+- 7c5dd71: FIO-12013 Fixed excessive label announcements in NVDA
+- 7b4b9f6: FIO-11446 Double announcements fix for Radio and Selectboxes
+- c657268: FIO-11317: Enabled the label for Data Grids and Edit Grids to be read properly by screenreaders
+- 2fae4ad: FIO-11976 Added sr-only label to bootstrap templates if the hideLabel is true
+
+## 4.0.3-api98.3
+
+### Patch Changes
+
+- 7c5dd71: FIO-12013 Fixed excessive label announcements in NVDA
+
+## 4.0.3-api98.2
+
+### Patch Changes
+
+- 4864d4c: FIO-12002 Aligned bootstrap5 with VPAT so they can work correctly together
+- 8d7803a: FIO-11976 Removed button from rendering a hidden label
+- 2fae4ad: FIO-11976 Added sr-only label to bootstrap templates if the hideLabel is true
+
+## 4.0.3-api98.1
+
+### Patch Changes
+
+- be69fe1: Adding information to the error link about which wizard page the error occurred on
+
+## 4.0.3-api98.0
+
+### Patch Changes
+
+- af465a1: FIO-11335 Put numeric only announcement back in the label
+- a334b0f: FIO-11779 Fix Day component error message announcements in VPAT
+- 7b4b9f6: FIO-11446 Double announcements fix for Radio and Selectboxes
+- c657268: FIO-11317: Enabled the label for Data Grids and Edit Grids to be read properly by screenreaders
+
 ## 4.0.2
 
 ### Patch Changes

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@formio/bootstrap",
-  "version": "4.0.2",
+  "version": "4.0.3",
   "description": "Bootstrap templates for Form.io forms",
   "main": "lib/cjs/bootstrap5.js",
   "module": "lib/mjs/bootstrap5.js",

diff --git a/src/templates/bootstrap3/datagrid/form.ejs b/src/templates/bootstrap3/datagrid/form.ejs
@@ -3,6 +3,7 @@
     {{ ctx.component.hover ? 'table-hover' : ''}}
     {{ ctx.component.condensed ? 'table-condensed' : ''}}
     " {% if (ctx.component.layoutFixed) { %}style="table-layout: fixed;"{% } %}>
+  <caption class="sr-only">{{ctx.t(ctx.component.label)}}</caption>
   {% if (ctx.hasHeader) { %}
   <thead>
     <tr>

diff --git a/src/templates/bootstrap3/datagrid/html.ejs b/src/templates/bootstrap3/datagrid/html.ejs
@@ -3,6 +3,7 @@
     {{ component.hover ? 'table-hover' : ''}}
     {{ component.condensed ? 'table-condensed' : ''}}
     ">
+  <caption class="sr-only">{{t(component.label)}}</caption>
   {% if (hasHeader) { %}
   <thead>
     <tr>

diff --git a/src/templates/bootstrap3/errorsList/form.ejs b/src/templates/bootstrap3/errorsList/form.ejs
@@ -1,12 +1,12 @@
 <p>{{ctx.t('error')}}</p>
 <ul>
   {% ctx.errors.forEach(function(err) { %}
-    <li
-      data-component-key = "{{err.keyOrPath}}"
-      aria-label = "{{err.message}}. {{ctx.t('errorsListNavigationMessage')}}"
-      ref = "errorRef"
-      tabIndex = "0",
-      style = "cursor:pointer;"
-    ><span>{{err.message}}</span></li>
+  <li data-component-key="{{err.keyOrPath}}" aria-label="{{err.message}}. {{ctx.t('errorsListNavigationMessage')}}"
+    ref="errorRef" tabIndex="0" , style="cursor:pointer;"><span>{{err.message}}
+      {% if (err.errorPageTitle) { %}
+      <span class="sr-only">. Click to navigate to the component within {{ err.errorPageTitle }} </span>
+      {% } %}
+    </span>
+  </li>
   {% }) %}
-</ul>
+</ul>
diff --git a/src/templates/bootstrap4/datagrid/form.ejs b/src/templates/bootstrap4/datagrid/form.ejs
@@ -3,6 +3,7 @@
     {{ ctx.component.hover ? 'table-hover' : ''}}
     {{ ctx.component.condensed ? 'table-sm' : ''}}
     " {% if (ctx.component.layoutFixed || ctx.readOnly) { %}style="table-layout: fixed;"{% } %}>
+  <caption class="sr-only">{{ctx.t(ctx.component.label)}}</caption>
     <colgroup>
       {% if (ctx.component.reorder) { %}
       <col>

diff --git a/src/templates/bootstrap4/datagrid/html.ejs b/src/templates/bootstrap4/datagrid/html.ejs
@@ -3,6 +3,7 @@
     {{ ctx.component.hover ? 'table-hover' : ''}}
     {{ ctx.component.condensed ? 'table-sm' : ''}}
     ">
+  <caption class="sr-only">{{ctx.t(ctx.component.label)}}</caption>
   {% if (ctx.hasHeader) { %}
   <thead>
     <tr>

diff --git a/src/templates/bootstrap4/day/form.ejs b/src/templates/bootstrap4/day/form.ejs
@@ -1,5 +1,5 @@
 {% var fieldsetLegendIds = ctx.instance.getFieldsetLegendIds ? ctx.instance.getFieldsetLegendIds() : ''; %}
-<div class="row" role="group"
+<div class="row" role="group" ref="dayContainer"
   {% if (ctx.label.hidden) { %}
   aria-label="{{ctx.component.label}}"
   {% } else { %}

diff --git a/src/templates/bootstrap4/editgridTable/form.ejs b/src/templates/bootstrap4/editgridTable/form.ejs
@@ -6,6 +6,7 @@
       {{ ctx.component.hover ? 'table-hover' : ''}}
       {{ ctx.component.condensed ? 'table-sm' : ''}}
     ">
+      <caption class="sr-only">{{ctx.t(ctx.component.label)}}</caption>
       {% if (ctx.header) { %}
       <thead class="editgrid-table-head">
         {{ctx.header}}

diff --git a/src/templates/bootstrap4/editgridTable/html.ejs b/src/templates/bootstrap4/editgridTable/html.ejs
@@ -6,6 +6,7 @@
       {{ ctx.component.hover ? 'table-hover' : ''}}
       {{ ctx.component.condensed ? 'table-sm' : ''}}
     ">
+      <caption class="sr-only">{{ctx.t(ctx.component.label)}}</caption>
       {% if (ctx.header) { %}
       <thead class="editgrid-table-head">
         {{ctx.header}}

diff --git a/src/templates/bootstrap4/errorsList/form.ejs b/src/templates/bootstrap4/errorsList/form.ejs
@@ -6,13 +6,11 @@
 <ul>
   {% ctx.errors.forEach(function(err) { %}
   <li>
-    <span
-      data-component-key = "{{err.keyOrPath}}"
-      ref = "errorRef"
-      tabIndex = "0"
-      role="link"
-    >
+    <span data-component-key="{{err.keyOrPath}}" ref="errorRef" tabIndex="0" role="link">
       {{err.message}}
+      {% if (err.errorPageTitle) { %}
+      <span class="sr-only">. Click to navigate to the component within {{ err.errorPageTitle }} </span>
+      {% } %}
     </span>
   </li>
   {% }) %}

diff --git a/src/templates/bootstrap4/field/form.ejs b/src/templates/bootstrap4/field/form.ejs
@@ -2,8 +2,8 @@
   {{ ctx.labelMarkup }}
 {% } %}
 
-{% if (ctx.label.hidden && ctx.label.className && ctx.component.validate.required) { %}
-  <label class="{{ctx.label.className}}"></label>
+{% if (ctx.label.hidden && !ctx.options.floatingLabels && ctx.component.label && ctx.component.type !== 'checkbox' && ctx.component.type !== 'button') { %}
+  {{ ctx.labelMarkup }}
 {% } %}
 
 {{ctx.element}}

diff --git a/src/templates/bootstrap4/input/form.ejs b/src/templates/bootstrap4/input/form.ejs
@@ -21,8 +21,8 @@
       {% } %}
       id="{{ctx.instance.id}}-{{ctx.component.key}}"
       aria-labelledby="{% if (fieldsetLegendIds) { %}{{fieldsetLegendIds}} {% } %}l-{{ctx.instance.id}}-{{ctx.component.key}} {% if (ctx.component.description) { %}d-{{ctx.instance.id}}-{{ctx.component.key}}{% } %}"
-      {% if (ctx.component.description || ctx.component.type === 'number' || ctx.component.type === 'phoneNumber' || ctx.component.type === 'currency') { %}
-      aria-describedby="{% if (ctx.component.description) { %}d-{{ctx.instance.id}}-{{ctx.component.key}}{% } %}{% if (ctx.component.type === 'number' || ctx.component.type === 'phoneNumber' || ctx.component.type === 'currency') { %} h-{{ctx.instance.id}}-{{ctx.component.key}}{% } %}"
+      {% if (ctx.component.description) { %}
+      aria-describedby="d-{{ctx.instance.id}}-{{ctx.component.key}}"
       {% } %}
       aria-required="{{ctx.input.ref === 'input' || !ctx.input.ref ? ctx.component.validate.required :
         ctx.component.fields && ctx.component.fields[ctx.input.ref] && ctx.component.fields[ctx.input.ref].required || false}}"
@@ -34,9 +34,6 @@
 {% if (ctx.component.editor || ctx.component.wysiwyg) { %}
   <div ref="input"></div>
 {% } %}
-{% if (ctx.component.type === 'number' || ctx.component.type === 'phoneNumber' || ctx.component.type === 'currency') { %}
-<span id="h-{{ctx.instance.id}}-{{ctx.component.key}}" class="sr-only">{{ctx.t('numeric only')}}</span>
-{% } %}
 {% if (ctx.component.type === 'datetime') { %}
 <span aria-live="assertive" id="{{ctx.instance.id}}-liveRegion" class="sr-only" ref="liveRegion"></span>
 {% } %}

diff --git a/src/templates/bootstrap4/label/form.ejs b/src/templates/bootstrap4/label/form.ejs
@@ -1,16 +1,22 @@
 <label
   ref="label"
-  class="col-form-label {{ctx.label.className}}"
-  {% if (!ctx.readOnly && ctx.component.type !== 'radio') { %}
+  class="col-form-label {{ctx.label.className}} {{ctx.label.hidden ? 'sr-only' : ''}}"
+  {% if (!ctx.readOnly && ctx.component.type !== 'radio' && ctx.component.type !== 'selectboxes') { %}
   for="{{ctx.instance.id}}-{{ctx.component.key}}"
   {% } %}
+  {% if (ctx.component.type === 'radio' || ctx.component.type === 'selectboxes' || ctx.label.hidden) { %}
+  aria-hidden="true"
+  {% } %}
   id="l-{{ctx.instance.id}}-{{ctx.component.key}}"
 >
   {{ ctx.t(ctx.component.label, { _userInput: true }) }}
   {% if (ctx.component.validate && ctx.component.validate.required) { %}
     <span class="required-star" aria-hidden="true">*</span>
   {% } %}
-  {% if (ctx.component.tooltip) { %}
+  {% if (ctx.component.type === 'number' || ctx.component.type === 'phoneNumber' || ctx.component.type === 'currency') { %}
+    <span class="sr-only">, {{ctx.t('numeric only')}},</span>
+  {% } %}
+  {% if (ctx.component.tooltip && !ctx.label.hidden) { %}
     <i ref="tooltip" tabindex="0" class="{{ctx.iconClass('question-sign')}} text-muted" data-tooltip="{{ctx.component.tooltip}}"></i>
   {% } %}
 </label>
diff --git a/src/templates/bootstrap5/cssClasses.ts b/src/templates/bootstrap5/cssClasses.ts
@@ -1,5 +1,6 @@
 export default {
   'border-default': '',
+  'sr-only': 'visually-hidden',
   'formio-tab-panel-active': 'active',
   'formio-tab-link-active': 'active',
   'formio-tab-link-container-active': 'active',

diff --git a/src/templates/bootstrap5/datagrid/form.ejs b/src/templates/bootstrap5/datagrid/form.ejs
@@ -3,6 +3,7 @@
     {{ ctx.component.hover ? 'table-hover' : ''}}
     {{ ctx.component.condensed ? 'table-sm' : ''}}
     " {% if (ctx.component.layoutFixed || ctx.readOnly) { %}style="table-layout: fixed;"{% } %}>
+  <caption class="visually-hidden">{{ctx.t(ctx.component.label)}}</caption>
     <colgroup>
       {% if (ctx.component.reorder) { %}
       <col>

diff --git a/src/templates/bootstrap5/datagrid/html.ejs b/src/templates/bootstrap5/datagrid/html.ejs
@@ -3,6 +3,7 @@
     {{ ctx.component.hover ? 'table-hover' : ''}}
     {{ ctx.component.condensed ? 'table-sm' : ''}}
     ">
+  <caption class="visually-hidden">{{ctx.t(ctx.component.label)}}</caption>
   {% if (ctx.hasHeader) { %}
   <thead>
     <tr>

diff --git a/src/templates/bootstrap5/day/form.ejs b/src/templates/bootstrap5/day/form.ejs
@@ -1,5 +1,5 @@
 {% var fieldsetLegendIds = ctx.instance.getFieldsetLegendIds ? ctx.instance.getFieldsetLegendIds() : ''; %}
-<div class="row" role="group"
+<div class="row" role="group" ref="dayContainer"
   {% if (ctx.label.hidden) { %}
   aria-label="{{ctx.component.label}}"
   {% } else { %}

diff --git a/src/templates/bootstrap5/editgridTable/form.ejs b/src/templates/bootstrap5/editgridTable/form.ejs
@@ -6,6 +6,7 @@
       {{ ctx.component.hover ? 'table-hover' : ''}}
       {{ ctx.component.condensed ? 'table-sm' : ''}}
     ">
+      <caption class="visually-hidden">{{ctx.t(ctx.component.label)}}</caption>
       {% if (ctx.header) { %}
       <thead class="editgrid-table-head">
         {{ctx.header}}

diff --git a/src/templates/bootstrap5/editgridTable/html.ejs b/src/templates/bootstrap5/editgridTable/html.ejs
@@ -6,6 +6,7 @@
       {{ ctx.component.hover ? 'table-hover' : ''}}
       {{ ctx.component.condensed ? 'table-sm' : ''}}
     ">
+      <caption class="visually-hidden">{{ctx.t(ctx.component.label)}}</caption>
       {% if (ctx.header) { %}
       <thead class="editgrid-table-head">
         {{ctx.header}}

diff --git a/src/templates/bootstrap5/errorsList/form.ejs b/src/templates/bootstrap5/errorsList/form.ejs
@@ -6,13 +6,11 @@
 <ul>
   {% ctx.errors.forEach(function(err) { %}
   <li>
-    <span
-      data-component-key = "{{err.keyOrPath}}"
-      ref = "errorRef"
-      tabIndex = "0"
-      role="link"
-    >
+    <span data-component-key="{{err.keyOrPath}}" ref="errorRef" tabIndex="0" role="link">
       {{err.message}}
+      {% if (err.errorPageTitle) { %}
+      <span class="visually-hidden">. Click to navigate to the component within {{ err.errorPageTitle }} </span>
+      {% } %}
     </span>
   </li>
   {% }) %}

diff --git a/src/templates/bootstrap5/field/form.ejs b/src/templates/bootstrap5/field/form.ejs
@@ -2,8 +2,8 @@
   {{ ctx.labelMarkup }}
 {% } %}
 
-{% if (ctx.label.hidden && ctx.label.className && ctx.component.validate.required) { %}
-  <label class="{{ctx.label.className}}"></label>
+{% if (ctx.label.hidden && !ctx.options.floatingLabels && ctx.component.label && ctx.component.type !== 'checkbox' && ctx.component.type !== 'button') { %}
+  {{ ctx.labelMarkup }}
 {% } %}
 
 {{ctx.element}}

diff --git a/src/templates/bootstrap5/input/form.ejs b/src/templates/bootstrap5/input/form.ejs
@@ -22,8 +22,8 @@
       {% } %}
       id="{{ctx.instance.id}}-{{ctx.component.key}}"
       aria-labelledby="{% if (fieldsetLegendIds) { %}{{fieldsetLegendIds}} {% } %}l-{{ctx.instance.id}}-{{ctx.component.key}} {% if (ctx.component.description) { %}d-{{ctx.instance.id}}-{{ctx.component.key}}{% } %}"
-      {% if (ctx.component.description || ctx.component.type === 'number' || ctx.component.type === 'phoneNumber' || ctx.component.type === 'currency') { %}
-      aria-describedby="{% if (ctx.component.description) { %}d-{{ctx.instance.id}}-{{ctx.component.key}}{% } %}{% if (ctx.component.type === 'number' || ctx.component.type === 'phoneNumber' || ctx.component.type === 'currency') { %} h-{{ctx.instance.id}}-{{ctx.component.key}}{% } %}"
+      {% if (ctx.component.description) { %}
+      aria-describedby="d-{{ctx.instance.id}}-{{ctx.component.key}}"
       {% } %}
       aria-required="{{ctx.input.ref === 'input' || !ctx.input.ref ? ctx.component.validate.required :
         ctx.component.fields && ctx.component.fields[ctx.input.ref] && ctx.component.fields[ctx.input.ref].required || false}}"
@@ -41,9 +41,6 @@
 {% if (ctx.component.editor || ctx.component.wysiwyg) { %}
   <div ref="input"></div>
 {% } %}
-{% if (ctx.component.type === 'number' || ctx.component.type === 'phoneNumber' || ctx.component.type === 'currency') { %}
-<span id="h-{{ctx.instance.id}}-{{ctx.component.key}}" class="visually-hidden">{{ctx.t('numeric only')}}</span>
-{% } %}
 {% if (ctx.component.type === 'datetime') { %}
 <span aria-live="assertive" id="{{ctx.instance.id}}-liveRegion" class="visually-hidden" ref="liveRegion"></span>
 {% } %}

diff --git a/src/templates/bootstrap5/label/form.ejs b/src/templates/bootstrap5/label/form.ejs
@@ -1,16 +1,22 @@
 <label
   ref="label"
-  class="col-form-label {{ctx.label.className}}"
-  {% if (!ctx.readOnly && ctx.component.type !== 'radio') { %}
+  class="col-form-label {{ctx.label.className}} {{ctx.label.hidden ? 'visually-hidden' : ''}}"
+  {% if (!ctx.readOnly && ctx.component.type !== 'radio' && ctx.component.type !== 'selectboxes') { %}
   for="{{ctx.instance.id}}-{{ctx.component.key}}"
   {% } %}
+  {% if (ctx.component.type === 'radio' || ctx.component.type === 'selectboxes' || ctx.label.hidden) { %}
+  aria-hidden="true"
+  {% } %}
   id="l-{{ctx.instance.id}}-{{ctx.component.key}}"
 >
   {{ ctx.t(ctx.component.label, { _userInput: true }) }}
   {% if (ctx.component.validate && ctx.component.validate.required) { %}
     <span class="required-star" aria-hidden="true">*</span>
   {% } %}
-  {% if (ctx.component.tooltip) { %}
+  {% if (ctx.component.type === 'number' || ctx.component.type === 'phoneNumber' || ctx.component.type === 'currency') { %}
+    <span class="visually-hidden">, {{ctx.t('numeric only')}},</span>
+  {% } %}
+  {% if (ctx.component.tooltip && !ctx.label.hidden) { %}
     <i ref="tooltip" tabindex="0" class="{{ctx.iconClass('question-sign')}} text-muted" data-tooltip="{{ctx.component.tooltip}}"></i>
   {% } %}
 </label>