Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.Problem/Motivation
A follow up to #3310884: Ability to clear keyword/search filter with one click discussed in https://drupal.slack.com/archives/C01UHB4QG12/p1713974496119919. Based on the recommendation of Scott oHara it is recommendable to exclude the the clear button from the tab order. The corresponding blog post can be found here: https://www.scottohara.me/blog/2022/02/19/custom-clear-buttons.html and the explanation for the underlaying problem here: https://scottaohara.github.io/clear-text-field-button/
The clear button is purposefully not in the tabbing order of the web page. Keyboard users can use the Delete or Backspace keys (or first select all the text field’s text and then use these keys) to delete the contents of the text field.
Important: if the clear button was part of the web page’s tabbing order, every text field a user had entered data into would then require that they tab past the clear button that they have no use for. This clear button being useless to them if they had filled out the field with the data they intended. Adding clear buttons to the web page’s tabbing order is not recommended for this reason, as it has the potential to require two keyboard focus stops for every text field on the page that has a clear button.
In the context of Project Browser it isn't that much of a pressing issue since there aren't 7 or 8 fields with clear buttons on the same page where each would require an extra tab but still for the sake for consistency it might be adviceable to remove the clear button from the tab order. as mentioned in the quote the keyboard user can use the delete and or backspace button plus in the context of project browser there is also the option to press the esc button but at the same time the clear button is also still available in the AOM since it is marked up as a button.
Steps to reproduce
- Go to
/admin/modules/browse
- Enter something in the search field
- tab one time to reach the clear button
Proposed resolution
/admin/modules/browseRemove the clear button from the tab order
Issue fork project_browser-3444658
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:
- 3444658-clear-button-tabindex
changes, plain diff MR !465 - 3444658-remove-the-clear compare
Comments
Comment #2
bernardm28 commentedI wonder if tabindex="-1" would be good enough or would there be a better way.
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabi...
Comment #3
bernardm28 commentedAfter chatting with Mike Herchel about this. He recommended we get rid of the x altogether and use the standard HTML web search element.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/search
Comment #4
rkollerre #2: yes Scott o Hara is simply adding a tabbindex of -1 for excluding the element from the tab order.
re #3 problem going with the search element is that the clear button is then based on the browser and styling and behavior differs in between browsers. firefox for example doesnt have a clear button at all.
Comment #5
chrisfromredfinComment #6
chrisfromredfinYes, and standard search clear button then doesn't allow refreshing the results in a good way - see #3310884: Ability to clear keyword/search filter with one click.
let's do the tabindex -1 approach.
Comment #9
kwiseman commentedComment #11
chrisfromredfinconfirmed pre-MR and post-MR that this fixes it. ship it!Will open a follow-up cuz I already merged before I realized this probably should have a test...
Comment #12
kwiseman commentedAdded Portland2024 tag