@ukhomeoffice/cop-react-form-renderer 6.15.11 → 6.15.12-accessibility
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -129,6 +129,18 @@ const InternalFormRenderer = _ref2 => {
|
|
|
129
129
|
validate
|
|
130
130
|
} = (0, _hooks.useValidation)();
|
|
131
131
|
|
|
132
|
+
// Set focus to header for accessibility, Screen reader to anounce the page heading
|
|
133
|
+
const setFocusToHeading = () => {
|
|
134
|
+
if (document) {
|
|
135
|
+
const header = Array.from(document.getElementsByTagName('h1')).pop();
|
|
136
|
+
if (header && document.activeElement !== header) {
|
|
137
|
+
header.setAttribute('tabIndex', '-1');
|
|
138
|
+
header.focus();
|
|
139
|
+
header.removeAttribute('tabIndex');
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
};
|
|
143
|
+
|
|
132
144
|
// Need to set submission data when going back
|
|
133
145
|
window.onpopstate = e => {
|
|
134
146
|
var _formState$page;
|
|
@@ -192,6 +204,11 @@ const InternalFormRenderer = _ref2 => {
|
|
|
192
204
|
setFormState(_helpers.default.getFormState(pageId, pages, hub));
|
|
193
205
|
}, [pages, hub, pageId, setFormState, type, goingBack, data, formState.page]);
|
|
194
206
|
|
|
207
|
+
// Set focus to heading for accessibility
|
|
208
|
+
(0, _react.useEffect)(() => {
|
|
209
|
+
setFocusToHeading();
|
|
210
|
+
}, [formState]);
|
|
211
|
+
|
|
195
212
|
// Call the onFormLoad hook just when this component first renders.
|
|
196
213
|
(0, _react.useEffect)(() => {
|
|
197
214
|
setPagePoint(undefined);
|