From aa27f9d79bd13ceaadb0f6d66772f70e64087e12 Mon Sep 17 00:00:00 2001
From: formio-sync-oss <noreply@form.io>
Date: Tue, 11 Aug 2026 14:02:47 -0500
Subject: [PATCH] release: @formio/bootstrap@4.0.4 (monorepo d5e3ca6531)

---
 CHANGELOG.md                               | 14 ++++++++++++++
 package.json                               |  2 +-
 src/bootstrap3.ts                          |  2 +-
 src/bootstrap4.ts                          |  2 +-
 src/bootstrap5.ts                          |  2 +-
 src/templates/bootstrap4/checkbox/form.ejs |  7 ++++++-
 src/templates/bootstrap4/day/form.ejs      |  7 ++++++-
 src/templates/bootstrap4/file/form.ejs     |  2 +-
 src/templates/bootstrap4/input/form.ejs    |  7 ++++++-
 src/templates/bootstrap4/radio/form.ejs    |  7 ++++++-
 src/templates/bootstrap4/select/form.ejs   |  7 ++++++-
 src/templates/bootstrap4/survey/form.ejs   |  9 ++++++++-
 src/templates/bootstrap5/checkbox/form.ejs |  7 ++++++-
 src/templates/bootstrap5/day/form.ejs      |  7 ++++++-
 src/templates/bootstrap5/file/form.ejs     |  2 +-
 src/templates/bootstrap5/input/form.ejs    |  7 ++++++-
 src/templates/bootstrap5/radio/form.ejs    |  7 ++++++-
 src/templates/bootstrap5/select/form.ejs   |  7 ++++++-
 src/templates/bootstrap5/survey/form.ejs   |  9 ++++++++-
 src/translations/en.ts                     | 16 +++++++++-------
 src/translations/index.ts                  |  4 ++--
 21 files changed, 107 insertions(+), 27 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c3ca8b168..aeaff5bb1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,19 @@
 # @formio/bootstrap
 
+## 4.0.4
+
+### Patch Changes
+
+- 9813447: adding hyperlink to file comp description error
+- 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
+
+## 4.0.4-api99.0
+
+### Patch Changes
+
+- 9813447: adding hyperlink to file comp description error
+- 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
+
 ## 4.0.3
 
 ### Patch Changes
diff --git a/package.json b/package.json
index 5cdafa5b1..874a4164e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@formio/bootstrap",
-  "version": "4.0.3",
+  "version": "4.0.4",
   "description": "Bootstrap templates for Form.io forms",
   "main": "lib/cjs/bootstrap5.js",
   "module": "lib/mjs/bootstrap5.js",
diff --git a/src/bootstrap3.ts b/src/bootstrap3.ts
index 630209606..c95ef7eb0 100644
--- a/src/bootstrap3.ts
+++ b/src/bootstrap3.ts
@@ -6,5 +6,5 @@ export default {
   templates: {
     bootstrap3,
   },
-  translations
+  translations,
 };
diff --git a/src/bootstrap4.ts b/src/bootstrap4.ts
index 394347234..728a5d523 100644
--- a/src/bootstrap4.ts
+++ b/src/bootstrap4.ts
@@ -6,5 +6,5 @@ export default {
   templates: {
     bootstrap4,
   },
-  translations
+  translations,
 };
diff --git a/src/bootstrap5.ts b/src/bootstrap5.ts
index e70610d88..23ac031f6 100644
--- a/src/bootstrap5.ts
+++ b/src/bootstrap5.ts
@@ -6,5 +6,5 @@ export default {
   templates: {
     bootstrap5,
   },
-  translations
+  translations,
 };
diff --git a/src/templates/bootstrap4/checkbox/form.ejs b/src/templates/bootstrap4/checkbox/form.ejs
index 85f00f533..859d16c16 100644
--- a/src/templates/bootstrap4/checkbox/form.ejs
+++ b/src/templates/bootstrap4/checkbox/form.ejs
@@ -1,5 +1,10 @@
 <div class="form-check checkbox">
   {% 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); %}
   <label
     class="{{ctx.input.labelClass}} form-check-label"
     for="{{ctx.instance.id}}-{{ctx.component.key}}"
@@ -8,7 +13,7 @@
     <{{ctx.input.type}}
       ref="input"
       id="{{ctx.instance.id}}-{{ctx.component.key}}"
-      aria-labelledby="{% if (fieldsetLegendIds) { %}{{fieldsetLegendIds}} {% } %}l-{{ctx.instance.id}}-{{ctx.component.key}}"
+      {{ariaAttr}}="{{ariaValue}}"
       {% for (var attr in ctx.input.attr) { %}
       {{attr}}="{{ctx.input.attr[attr]}}"
       {% } %}
diff --git a/src/templates/bootstrap4/day/form.ejs b/src/templates/bootstrap4/day/form.ejs
index 2b9c4fe68..0d02a7f17 100644
--- a/src/templates/bootstrap4/day/form.ejs
+++ b/src/templates/bootstrap4/day/form.ejs
@@ -1,9 +1,14 @@
 {% 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); %}
 <div class="row" role="group" ref="dayContainer"
   {% if (ctx.label.hidden) { %}
   aria-label="{{ctx.component.label}}"
   {% } else { %}
-  aria-labelledby="{% if (fieldsetLegendIds) { %}{{fieldsetLegendIds}} {% } %}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/bootstrap4/file/form.ejs b/src/templates/bootstrap4/file/form.ejs
index f384f1cca..ac82dff33 100644
--- a/src/templates/bootstrap4/file/form.ejs
+++ b/src/templates/bootstrap4/file/form.ejs
@@ -174,7 +174,7 @@
           {{ctx.t('browse')}}
           <span class="sr-only">
             {{ctx.t('browseToAttachFileFor') + ' ' + ctx.t(ctx.component.label, { _userInput: true }) + '. ' +
-            (ctx.component.description ? ctx.t(ctx.component.description, { _userInput: true }) + '. ' : '') +
+            (ctx.component.description ? ctx.t(ctx.utils.removeHTML(ctx.component.description), { _userInput: true }) + '. ' : '') +
             ((!ctx.component.filePattern || ctx.component.filePattern === '*') ? ctx.t('anyFileTypesAllowed') : ctx.t('allowedFileTypes') + ': ' + ctx.component.filePattern)}}
           </span>
         </a>
diff --git a/src/templates/bootstrap4/input/form.ejs b/src/templates/bootstrap4/input/form.ejs
index f61535d88..4c10e710f 100644
--- a/src/templates/bootstrap4/input/form.ejs
+++ b/src/templates/bootstrap4/input/form.ejs
@@ -14,13 +14,18 @@
   {% } %}
   {% 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}}
       ref="{{ctx.input.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="{% if (fieldsetLegendIds) { %}{{fieldsetLegendIds}} {% } %}l-{{ctx.instance.id}}-{{ctx.component.key}} {% if (ctx.component.description) { %}d-{{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/bootstrap4/radio/form.ejs b/src/templates/bootstrap4/radio/form.ejs
index ae7f651a3..f6aa72b61 100644
--- a/src/templates/bootstrap4/radio/form.ejs
+++ b/src/templates/bootstrap4/radio/form.ejs
@@ -1,10 +1,15 @@
 {% 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); %}
 <div
   class="form-radio radio"
   ref="radioGroup"
   role="{{ctx.component.type === 'selectboxes' ? 'group' : 'radiogroup'}}"
   aria-required="{{ctx.input.component.validate.required}}"
-  aria-labelledby="{% if (fieldsetLegendIds) { %}{{fieldsetLegendIds}} {% } %}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/bootstrap4/select/form.ejs b/src/templates/bootstrap4/select/form.ejs
index 65387b93b..92ecb3963 100644
--- a/src/templates/bootstrap4/select/form.ejs
+++ b/src/templates/bootstrap4/select/form.ejs
@@ -1,4 +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'}}"
   {{ ctx.input.multiple ? 'multiple' : '' }}
@@ -8,7 +13,7 @@
   {% if (!ctx.input.attr.id) { %}
   id="{{ctx.instance.id}}-{{ctx.component.key}}"
   {% } %}
-  aria-labelledby="{% if (fieldsetLegendIds) { %}{{fieldsetLegendIds}} {% } %}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/bootstrap4/survey/form.ejs b/src/templates/bootstrap4/survey/form.ejs
index 46e36b492..848eb19b8 100644
--- a/src/templates/bootstrap4/survey/form.ejs
+++ b/src/templates/bootstrap4/survey/form.ejs
@@ -1,5 +1,12 @@
 {% var fieldsetLegendIds = ctx.instance.getFieldsetLegendIds ? ctx.instance.getFieldsetLegendIds() : ''; %}
-<table class="table table-striped table-bordered" aria-labelledby="{% if (fieldsetLegendIds) { %}{{fieldsetLegendIds}} {% } %}l-{{ctx.instance.id}}-{{ctx.component.key}}">
+{% 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="table table-striped table-bordered"
+  {{ariaAttr}}="{{ariaValue}}"
+>
   <thead>
     <tr>
       <th></th>
diff --git a/src/templates/bootstrap5/checkbox/form.ejs b/src/templates/bootstrap5/checkbox/form.ejs
index 7e3ae3648..db1f5f918 100644
--- a/src/templates/bootstrap5/checkbox/form.ejs
+++ b/src/templates/bootstrap5/checkbox/form.ejs
@@ -1,9 +1,14 @@
 <div class="form-check checkbox">
   {% 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.input.type}}
       ref="input"
       id="{{ctx.instance.id}}-{{ctx.component.key}}"
-      aria-labelledby="{% if (fieldsetLegendIds) { %}{{fieldsetLegendIds}} {% } %}l-{{ctx.instance.id}}-{{ctx.component.key}}"
+      {{ariaAttr}}="{{ariaValue}}"
       {% for (var attr in ctx.input.attr) { %}
       {{attr}}="{{ctx.input.attr[attr]}}"
       {% } %}
diff --git a/src/templates/bootstrap5/day/form.ejs b/src/templates/bootstrap5/day/form.ejs
index 2b9c4fe68..0d02a7f17 100644
--- a/src/templates/bootstrap5/day/form.ejs
+++ b/src/templates/bootstrap5/day/form.ejs
@@ -1,9 +1,14 @@
 {% 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); %}
 <div class="row" role="group" ref="dayContainer"
   {% if (ctx.label.hidden) { %}
   aria-label="{{ctx.component.label}}"
   {% } else { %}
-  aria-labelledby="{% if (fieldsetLegendIds) { %}{{fieldsetLegendIds}} {% } %}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/bootstrap5/file/form.ejs b/src/templates/bootstrap5/file/form.ejs
index 185381310..5871a964a 100644
--- a/src/templates/bootstrap5/file/form.ejs
+++ b/src/templates/bootstrap5/file/form.ejs
@@ -188,7 +188,7 @@
         {% } %}
         <span class="visually-hidden">
           {{ctx.t('browseToAttachFileFor') + ' ' + ctx.t(ctx.component.label, { _userInput: true }) + '. ' +
-          (ctx.component.description ? ctx.t(ctx.component.description, { _userInput: true }) + '. ' : '') +
+          (ctx.component.description ? ctx.t(ctx.utils.removeHTML(ctx.component.description), { _userInput: true }) + '. ' : '') +
           ((!ctx.component.filePattern || ctx.component.filePattern === '*') ? ctx.t('anyFileTypesAllowed') : ctx.t('allowedFileTypes') + ': ' + ctx.component.filePattern)}}
         </span>
       </a>
diff --git a/src/templates/bootstrap5/input/form.ejs b/src/templates/bootstrap5/input/form.ejs
index 87764d30f..5c4e4bc46 100644
--- a/src/templates/bootstrap5/input/form.ejs
+++ b/src/templates/bootstrap5/input/form.ejs
@@ -15,13 +15,18 @@
   {% } %}
   {% 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}}
       ref="{{ctx.input.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="{% if (fieldsetLegendIds) { %}{{fieldsetLegendIds}} {% } %}l-{{ctx.instance.id}}-{{ctx.component.key}} {% if (ctx.component.description) { %}d-{{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/bootstrap5/radio/form.ejs b/src/templates/bootstrap5/radio/form.ejs
index e5ca8a4af..d9c56ecff 100644
--- a/src/templates/bootstrap5/radio/form.ejs
+++ b/src/templates/bootstrap5/radio/form.ejs
@@ -1,10 +1,15 @@
 {% 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); %}
 <div
   class="form-radio radio"
   ref="radioGroup"
   role="{{ctx.component.type === 'selectboxes' ? 'group' : 'radiogroup'}}"
   aria-required="{{ctx.input.component.validate.required}}"
-  aria-labelledby="{% if (fieldsetLegendIds) { %}{{fieldsetLegendIds}} {% } %}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/bootstrap5/select/form.ejs b/src/templates/bootstrap5/select/form.ejs
index 65387b93b..92ecb3963 100644
--- a/src/templates/bootstrap5/select/form.ejs
+++ b/src/templates/bootstrap5/select/form.ejs
@@ -1,4 +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'}}"
   {{ ctx.input.multiple ? 'multiple' : '' }}
@@ -8,7 +13,7 @@
   {% if (!ctx.input.attr.id) { %}
   id="{{ctx.instance.id}}-{{ctx.component.key}}"
   {% } %}
-  aria-labelledby="{% if (fieldsetLegendIds) { %}{{fieldsetLegendIds}} {% } %}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/bootstrap5/survey/form.ejs b/src/templates/bootstrap5/survey/form.ejs
index 46e36b492..848eb19b8 100644
--- a/src/templates/bootstrap5/survey/form.ejs
+++ b/src/templates/bootstrap5/survey/form.ejs
@@ -1,5 +1,12 @@
 {% var fieldsetLegendIds = ctx.instance.getFieldsetLegendIds ? ctx.instance.getFieldsetLegendIds() : ''; %}
-<table class="table table-striped table-bordered" aria-labelledby="{% if (fieldsetLegendIds) { %}{{fieldsetLegendIds}} {% } %}l-{{ctx.instance.id}}-{{ctx.component.key}}">
+{% 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="table table-striped table-bordered"
+  {{ariaAttr}}="{{ariaValue}}"
+>
   <thead>
     <tr>
       <th></th>
diff --git a/src/translations/en.ts b/src/translations/en.ts
index 604c9201b..2d734756a 100644
--- a/src/translations/en.ts
+++ b/src/translations/en.ts
@@ -24,7 +24,8 @@ export default {
   takePicture: 'Take Picture',
   switchToFileUpload: 'Switch to file upload',
   completeStatus: 'Complete',
-  noStorageSet: 'No storage has been set for this field. File uploads are disabled until storage is set up.',
+  noStorageSet:
+    'No storage has been set for this field. File uploads are disabled until storage is set up.',
   noFileApiSupport: 'File API & FileReader API not supported.',
   noFormDataSupport: "XHR2's FormData is not supported.",
   noProgressSupport: "XHR2's upload progress isn't supported.",
@@ -37,7 +38,7 @@ export default {
   page: 'Page',
   closeBtnDescription: 'Close button. Click to get back to the form',
   cancelBtnDescription: 'Cancel button. Click to cancel the changes and get back to the form.',
-  saveBtnDescription:'Save button. Click to save the changes and get back to the form.',
+  saveBtnDescription: 'Save button. Click to save the changes and get back to the form.',
   addOrRemove: 'Add/Remove',
   anyFileTypesAllowed: 'Any file types are allowed',
   allowedFileTypes: 'Allowed file types',
@@ -50,17 +51,18 @@ export default {
   uploadPdfFile: 'Upload a PDF File',
   dropToStart: 'Drop pdf to start, or',
   expand: 'Expand',
-  collapse:'Collapse',
+  collapse: 'Collapse',
   add: 'Add',
   delete: 'Delete',
   revert: 'Revert',
   removeBtnPressToRemove: 'Remove button. Press to remove',
   file: 'file',
-  captureVideo:'Capture Video',
+  captureVideo: 'Capture Video',
   captureAudio: 'Capture Audio',
   captureImage: 'Capture Image',
   browseFiles: 'Browse Files',
-  noComponentsSetInGrid: 'No components have been set up to display in the Data Table. "Table View" must be checked for components to render.',
+  noComponentsSetInGrid:
+    'No components have been set up to display in the Data Table. "Table View" must be checked for components to render.',
   sortAscending: 'Sort Ascending',
   sortDescending: 'Sort Descending',
   filter: 'Filter',
@@ -76,5 +78,5 @@ export default {
   editGridRow: 'Edit row',
   deleteGridRow: 'Delete row',
   selected: 'selected',
-  actions: 'Actions'
-};
\ No newline at end of file
+  actions: 'Actions',
+};
diff --git a/src/translations/index.ts b/src/translations/index.ts
index 565fe41fe..f83ea7778 100644
--- a/src/translations/index.ts
+++ b/src/translations/index.ts
@@ -1,4 +1,4 @@
 import enTranslations from './en';
 export default {
-    en: enTranslations,
-};
\ No newline at end of file
+  en: enTranslations,
+};