diff --git a/src/open_inwoner/cms/cases/tests/test_htmx.py b/src/open_inwoner/cms/cases/tests/test_htmx.py index 6afa96ccc6..f01eec0f88 100644 --- a/src/open_inwoner/cms/cases/tests/test_htmx.py +++ b/src/open_inwoner/cms/cases/tests/test_htmx.py @@ -586,7 +586,7 @@ def mock_upload(request, context): upload_form = page.locator("#document-upload") file_input = upload_form.get_by_label("Sleep of selecteer bestanden") submit_button = upload_form.get_by_role("button", name=_("Upload documenten")) - notification_list = page.get_by_role("alert").get_by_role("list") + notification_list = page.locator(".notification").get_by_role("list") notification_list_items = notification_list.get_by_role("listitem") file_list = page.get_by_role("list").last file_list_items = file_list.get_by_role("listitem") diff --git a/src/open_inwoner/components/templates/components/Form/Error.html b/src/open_inwoner/components/templates/components/Form/Error.html index 8d90046f0d..6542a11f9a 100644 --- a/src/open_inwoner/components/templates/components/Form/Error.html +++ b/src/open_inwoner/components/templates/components/Form/Error.html @@ -4,7 +4,7 @@
{{ message.message }}
{{ notification }}
{% endif %} {% if action %}{% button href=action text=action_text %}{% endif %} diff --git a/src/open_inwoner/js/components/notifications/index.js b/src/open_inwoner/js/components/notifications/index.js index b56267d960..1c213cb68c 100644 --- a/src/open_inwoner/js/components/notifications/index.js +++ b/src/open_inwoner/js/components/notifications/index.js @@ -25,10 +25,12 @@ export class Notification { } /** - * Scrolls to the notification content. + * Scrolls to the notification content and sets focus. */ scrollToNotification() { - const notificationContent = document.querySelector('.notification__content') + const notificationContent = this.node.querySelector( + '.notification__content' + ) if (notificationContent) { // If errors are present, scroll and trigger the opened state @@ -36,6 +38,8 @@ export class Notification { block: 'center', behavior: 'smooth', }) + // Set focus for screen readers + notificationContent.focus() } } diff --git a/src/open_inwoner/scss/components/Grid/Grid.scss b/src/open_inwoner/scss/components/Grid/Grid.scss index 75032c9d49..c84a2fda01 100644 --- a/src/open_inwoner/scss/components/Grid/Grid.scss +++ b/src/open_inwoner/scss/components/Grid/Grid.scss @@ -35,6 +35,12 @@ } } } + + /// Search grid + &--search { + display: flex; + flex-direction: column; + } } &--limit &__sidebar, diff --git a/src/open_inwoner/scss/components/Notification/_Notification.scss b/src/open_inwoner/scss/components/Notification/_Notification.scss index 89f5e3212a..27d879bc8c 100644 --- a/src/open_inwoner/scss/components/Notification/_Notification.scss +++ b/src/open_inwoner/scss/components/Notification/_Notification.scss @@ -101,6 +101,12 @@ & &__content { margin-top: var(--spacing-tiny); + &:focus, + &:focus-visible { + outline: none; + border: none; + } + & * { margin: 0; } diff --git a/src/open_inwoner/templates/pages/search.html b/src/open_inwoner/templates/pages/search.html index 08db380435..70ef7b8f5c 100644 --- a/src/open_inwoner/templates/pages/search.html +++ b/src/open_inwoner/templates/pages/search.html @@ -28,7 +28,7 @@