UIPQB-141: Modal dialog focus inconsistencies across screenreaders (#197

)
folio-org · Dec 17, 2024 · 2825566 · 2825566
1 parent a1661ef
commit 2825566
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## IN PROGRESS
 
 * [UIPQB-168](https://folio-org.atlassian.net/browse/UIPQB-168) Allow editing queries containing no fields.
+* [UIPQB-141](https://folio-org.atlassian.net/browse/UIPQB-141) Modal dialog focus inconsistencies across screenreaders.
 
 ## [1.2.6](https://github.com/folio-org/ui-plugin-query-builder/tree/v1.2.6) (2024-12-11)
 

diff --git a/src/QueryBuilder/QueryBuilder/QueryBuilderModal/QueryBuilderModal.js b/src/QueryBuilder/QueryBuilder/QueryBuilderModal/QueryBuilderModal.js
@@ -222,7 +222,7 @@ export const QueryBuilderModal = ({
       label={<FormattedMessage id="ui-plugin-query-builder.trigger" />}
       size="large"
       contentClass={css.modalClass}
-      enforceFocus={false}
+      enforceFocus
     >
       <Headline size="medium" margin="none" tag="h3">
         <FormattedMessage id="ui-plugin-query-builder.modal.query" />

diff --git a/src/QueryBuilder/QueryBuilder/QueryBuilderModal/RepeatableFields/RepeatableFields.js b/src/QueryBuilder/QueryBuilder/QueryBuilderModal/RepeatableFields/RepeatableFields.js
@@ -6,6 +6,7 @@ import {
   Selection,
   Col,
   Row,
+  getFirstFocusable,
 } from '@folio/stripes/components';
 
 import PropTypes from 'prop-types';
@@ -42,6 +43,17 @@ export const RepeatableFields = ({ source, setSource, getParamsSource, columns }
     const filteredFields = source.filter((_, i) => i !== index);
 
     setSource(filteredFields);
+
+    const previousRowSelector = `[class^=repeatableFieldItem-]:nth-child(${index})`;
+    const previousRowElement = document.querySelector(previousRowSelector);
+
+    if (previousRowElement) {
+      const firstFocusableElement = getFirstFocusable(previousRowElement);
+
+      if (firstFocusableElement) {
+        firstFocusableElement.focus();
+      }
+    }
   };
 
   const handleChange = (value, index, fieldName) => {