diff --git a/CHANGELOG.md b/CHANGELOG.md index 45e76d64..767d4c55 100644 --- 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 index d875f8ae..8fa36e6e 100644 --- a/src/QueryBuilder/QueryBuilder/QueryBuilderModal/QueryBuilderModal.js +++ b/src/QueryBuilder/QueryBuilder/QueryBuilderModal/QueryBuilderModal.js @@ -222,7 +222,7 @@ export const QueryBuilderModal = ({ label={} size="large" contentClass={css.modalClass} - enforceFocus={false} + enforceFocus > diff --git a/src/QueryBuilder/QueryBuilder/QueryBuilderModal/RepeatableFields/RepeatableFields.js b/src/QueryBuilder/QueryBuilder/QueryBuilderModal/RepeatableFields/RepeatableFields.js index 4e9fbdac..fea5be3e 100644 --- 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) => {