Problem/Motivation
\src\Controller\ActionLinkController.php has the following code:
// Put the focus back on the link.
$focus = new InvokeCommand($selector . '>a', 'focus');
$response->addCommand($focus);
to focus the clicked flag after clicking.
The request-response for example looks like this:
{
"command": "invoke",
"selector": ".js-flag-likes-100170\u003Ea",
"method": "focus",
"args": []
},
Sadly this logic is broken, if there is more than one flag with that class on the page.
We for example have two "Like" buttons on the page. One on the top and one at the end of the page, which isn't really untypical for articles.
The command never knows, which of these flag links on the page was clicked and so always focuses the last one. In our case the page then jumps to the bottom.
Steps to reproduce
- Add the same flag link with AJAX (at least) twice on the page
- See page focus jumping to the last one of them, when clicking any
Expected:
No jumping of the page
Proposed resolution
The question is, if this focus is really needed, because the user already must have the element in the focus and doesn't expect the page to jump anyway.
So I'd vote to simply remove it, seems like over-optimization?
Remaining tasks
User interface changes
Remove focus after Ajax Flag Link click
API changes
None
Data model changes
None
Issue fork flag-3553976
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:
Comments
Comment #2
anybodyComment #3
anybodyJust fund that this is a duplicate of #3524123: Implementation of 2901287 causes issues when multiple instances of a flag are rendered on page and the bug was introduced in #2901287: Accessibility : Focus lost when link is clicked