Problem/Motivation

When using an AJAX filter on a Drupal view page having auto-submit enabled, the keyboard focus is not being properly managed during the update process. After a filter selection is made, the focus remains on the parent div rather than being set to the same element / updated content. This makes it difficult for keyboard-only users and the users of assistive technology to understand the context of changes made to the view after a filter selection is made.

Issue : The Filter form is also getting re-rendered on the ajax along with the updated content. ( Failure of WCAG 2.0 Success Criterion 2.1.1 - Keyboard Accessible, and WCAG 2.0 Success Criterion 2.4.3 - Focus Order)

Steps to reproduce

  1. Navigate to a Drupal view page with an AJAX filter (having auto-submit enabled) using a keyboard interface.
  2. Select a filter option from the dropdown menu..
  3. Observe that the view updates with new content, but the keyboard focus on the parent div. Not on the element that triggered the AJAX update or the updated content.

Impact:
This issue affects keyboard-only users who rely on a keyboard interface to navigate and understand content on web pages. It can make it difficult or impossible for them to understand the context of changes made to the view after a filter selection is made.

Proposed resolution

When a user selects a filter option, the view should be updated with the new content, and the keyboard focus should be set to the updated content or on the element that triggered the AJAX update.

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

CommentFileSizeAuthor
#8 better-exposed-filters-keyboard-focus-not-properly-managed-after-ajax-filter-selection-3360314-#8.patch1.58 KBnexusnovaz

Issue fork better_exposed_filters-3360314

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

ananthakrishnan0496 created an issue. See original summary.

ananthakrishnan0496’s picture

ananthakrishnan0496 commented
Component: responsive_image.module » views.module
lendude’s picture

lendude
Primary language Dutch
Location Amsterdam
commented
Status: Active » Postponed (maintainer needs more info)

(having auto-submit enabled)

How do you enable auto-submit for filters with just Drupal core?

ananthakrishnan0496’s picture

ananthakrishnan0496 commented
Project: Drupal core » Better Exposed Filters
Version: 9.5.x-dev » 6.0.3
Component: views.module » Code

The auto-submit has been enabled using Better Exposed Filters.

ananthakrishnan0496’s picture

ananthakrishnan0496 commented
Status: Postponed (maintainer needs more info) » Active
w01f’s picture

w01f commented
Status: Active » Closed (duplicate)
Related issues: +#3103626: Better Exposed Filters: Textfield in auto-submit filter with Ajax should retain focus submitted

Closing as seems to be a duplicate of https://www.drupal.org/project/better_exposed_filters/issues/3103626, which has a working patch for the expected ajax behavior on the latest 6.x dev version.

nitesh624’s picture

nitesh624
he/him
Primary language English
Location Ranchi, India
commented
Version: 6.0.3 » 7.0.x-dev
Status: Closed (duplicate) » Active

This I can reproduce on 7.x version of module also.

nexusnovaz’s picture

nexusnovaz commented
StatusFileSize
new better-exposed-filters-keyboard-focus-not-properly-managed-after-ajax-filter-selection-3360314-#8.patch1.58 KB

I was also able to replicate this and made a quick patch. Will turn this into a PR shortly. Hopefully I have understood the issue and fixed it according to what others need.

smustgrave’s picture

smustgrave commented
Version: 7.0.x-dev » 7.1.x-dev

May be good to get a simple test case.

smustgrave’s picture

smustgrave commented

FYI patch appears to be malformed when applying. Test coverage probably can be a simple assertion added to an existing test.

mdranove made their first commit to this issue’s fork.

mdranove opened merge request !199

mdranove’s picture

mdranove commented
Status: Active » Needs review

Updated the auto_submit js and added a test.

I ran into some issues with select autosubmit more generally using the default widget and a fresh install, but it was unrelated. Might capture in a separate issue.

adambraun’s picture

adambraun commented

I was not able to apply the patch/MR to the current release, but I was able to test it against the 7.1.x-dev branch and it did not resolve the issue for my configuration. Focus was not preserved when using a radio type control, auto-submit and ajax.

smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work
mdranove’s picture

mdranove commented
Status: Needs work » Needs review

The MR is only for select elements, as the repro steps state "Select a filter option from the dropdown menu.."

Radios/checkboxes are not mentioned and not covered by this.

smustgrave’s picture

smustgrave commented
Status: Needs review » Fixed

Appears to be working.

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.