Problem/Motivation
Fragment links and fragment/hash changes pointing to elements inside closed or invisible grouping elements like vertical tabs and details don't work.
This is particularly problematic for Inline Form Errors. In case of an error in a hidden grouping element, the error summary links don't work anymore.
Proposed resolution
A JavaScript patch that does something like:
- Listen to URL fragment/hash changes
- Listen to fragment link clicks (in case the fragment of the URL stays the same)
- On fragment change/ link click:
-- Find targeted field
-- Find all closed parents of that field grouping elements (we can potentially have details in details)
-- Open/show all closed parent grouping elements
-- Jump to target field that is now visible and focus
There are some examples of working with hash changes and jumping to fields in the final patch in this issue:
#2729663: Fragment link pointing to <textarea> should be redirected to CKEditor instance when CKEditor replaced that textarea
Before
Details
Vertical tabs
After
Details
Vertical tabs
Remaining tasks
- Screenshots (but better gifs) that show the problem for all affected grouping elements (like fieldsets/details).- Issue summary update based on latest comments- JavaScript patch as suggested above.
Related issues
* #2395065: Certain URL fragments cause javascript error when collapsible fieldset is present on page
* #2848507: Indicate that grouping elements have child element errors for ux and a11y
* Parent issue: #2504847: [meta] Roadmap for stabilizing Inline Form Errors module (IFE)