Skip to content

Redesign: focus guard#11504

Merged
alecslupu merged 2 commits intodevelopfrom
fix/a11y-focus-guard
Sep 10, 2023
Merged

Redesign: focus guard#11504
alecslupu merged 2 commits intodevelopfrom
fix/a11y-focus-guard

Conversation

@Crashillo
Copy link
Copy Markdown
Contributor

🎩 What? Why?

Keep the focus where it takes, after any keyboard interactions on dialogs

📌 Related Issues

📷 Screenshots

https://decidim-redesign.populate.tools/processes/Decidim4Dummies/f/1941/

♥️ Thank you!

@Crashillo Crashillo added the project: redesign Barcelona City Council contract label Aug 21, 2023
@Crashillo Crashillo requested a review from a team August 21, 2023 14:20
Copy link
Copy Markdown
Contributor

@alecslupu alecslupu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This PR fixes both reported issues.
I have found an additional, may be related.

  1. Go to a proposal page ( being logged in )
  2. Use tab until you reach the comment button
  3. Press enter or space, your page will scroll down to the comment box
  4. Press Tab, The page will move to the next element ( the category link)
Screencast.from.2023-08-21.23-39-21.webm

Is there anything that can be done in the scope of this PR ?

Additionally, i have noticed that focus_guard.js is actually importing keyboard object from foundation website. Is there any plans from your end to remove foundation-sites anytime soon ?

@Crashillo
Copy link
Copy Markdown
Contributor Author

Is there anything that can be done in the scope of this PR ?

I'm not getting your point. Look at the screencast: after the comment button, the next focusable element is the tag. But if you browse to the comments, the next focusable element becomes the order. I think that0s the expected behaviour. I cannot reproduce the cast you sent.

Screencast.from.23-08-23.12.08.05.webm

@Crashillo
Copy link
Copy Markdown
Contributor Author

Additionally, i have noticed that focus_guard.js is actually importing keyboard object from foundation website. Is there any plans from your end to remove foundation-sites anytime soon ?

I was taking a look at the functions we're using (releaseFocus and trapFocus) and we can fetch just the code we need from Foundation (I'll do a quick test anyway) in order to remove such dependency. This would be slightly dirty approach, but faster.

A longer, but better approach, would be use an external library like focus-trap, which would become deprecated the current focus_guard.js, since that logic is already included in the library. But, I believe you @decidim/maintainers should consider to go this way or not, as we would be talking about replacing a present feature.

@Crashillo Crashillo requested a review from alecslupu August 23, 2023 11:03
@Crashillo
Copy link
Copy Markdown
Contributor Author

@alecslupu I did the quick test. Share your thoughts, if you want to.

@Crashillo
Copy link
Copy Markdown
Contributor Author

I'm doing another test just in case, @alecslupu, but I'm afraid I'm gonna revert the last commits, as removing Foundation from the focus_guard provokes a cascade of problems

@andreslucena andreslucena added this to the 0.28.0 milestone Aug 23, 2023
@alecslupu
Copy link
Copy Markdown
Contributor

Is there anything that can be done in the scope of this PR ?

I'm not getting your point. Look at the screencast: after the comment button, the next focusable element is the tag. But if you browse to the comments, the next focusable element becomes the order. I think that0s the expected behaviour. I cannot reproduce the cast you sent.
Screencast.from.23-08-23.12.08.05.webm

I confirm that now is ok for me as well (works only with enter, and not space).

@alecslupu
Copy link
Copy Markdown
Contributor

I'm doing another test just in case, @alecslupu, but I'm afraid I'm gonna revert the last commits, as removing Foundation from the focus_guard provokes a cascade of problems

Eventually the Foundation needs to be removed. I do like the idea of focus-trap, but I am not 100% sure how much would be the browser payload if we add that library as well ...

Let's revert the changes, as removing foundation is not in the scope of this PR.

@Crashillo Crashillo force-pushed the fix/a11y-focus-guard branch from d105704 to 111f4a8 Compare August 24, 2023 07:59
@Crashillo
Copy link
Copy Markdown
Contributor Author

Last three commits removed

Copy link
Copy Markdown
Contributor

@alecslupu alecslupu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Foundation issues reverted. LGTM based on my previous comment.

@alecslupu alecslupu merged commit 8b663f3 into develop Sep 10, 2023
@alecslupu alecslupu deleted the fix/a11y-focus-guard branch September 10, 2023 08:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

project: redesign Barcelona City Council contract

Projects

No open projects
Archived in project
Status: Done

Development

Successfully merging this pull request may close these issues.

WCAG: Focus position is not maintained with dynamic actions on the page WCAG: Focus guard does not preserve the focus within an opened modal

3 participants