Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(modal): add a11y module and apply focus trap to modal dialog #1464

Closed
wants to merge 1 commit into from

Conversation

changLiuUNSW
Copy link
Contributor

@changLiuUNSW changLiuUNSW commented Apr 10, 2017

Add a11y module which includes:

  1. Focus trap
  2. Interactivity checker
  3. Platform detection

Most codes are from material 2:
https://github.com/angular/material2/tree/master/src/lib/core/a11y

Apply focus trap to modal dialog to prevent focus "escape" the opened modal

fix:
#1363
#642

@pkozlowski-opensource
Copy link
Member

@changLiuUNSW excellent timing as we are on the accessibility topic right now. I will schedule review of this one for the next release. Thnx for taking a stab at it!

@wesleycho
Copy link
Member

Question about focus trapping - is there no better way to trap the focus with modals? I know we do this in UI Bootstrap, but it was a major pain and error prone.

@changLiuUNSW
Copy link
Contributor Author

Cannot find any better solution.
I have seen all the implementations in UI bootstrap, material 1 and 2. No one is simple.

@changLiuUNSW
Copy link
Contributor Author

changLiuUNSW commented Apr 10, 2017

To fully implement the accessibility for modal, we should add aria-hidden= true to non modal elements when it is open and remove them when it is close. I think this is another major pain later on

@pkozlowski-opensource
Copy link
Member

@changLiuUNSW @wesleycho so I went through the code in this PR and effectively, it is not simple... I'm particularly concerned with the amount of browser sniffing and low-level DOM manipulation involved... Then again, I'm not saying I've got a simpler solution.

I think I was a bit too optimistic about reviewing / landing it as part of this release - I want to take some time to review it better and compare other implementations. In any case accessibility is our top focus for the next days / weeks (as you can see from all the commits that go into this repo) so even if I'm not merging this one today, it remains on top of my priority list.

Once again, thnx for the PR, please bear with us for few more days...

@RobJacobs
Copy link
Contributor

Material Design Components use the following for focus trap that may offer some inspiration: https://github.com/davidtheclark/focus-trap

@changLiuUNSW
Copy link
Contributor Author

@RobJacobs The focus trap of this PR is already from material 2

@changLiuUNSW
Copy link
Contributor Author

@pkozlowski-opensource Thanks, I totally understand your concerns and hope you would find any better solutions.
Pretty happy to see many commits for accessibility these days. Thanks for you guys hard work. Really appreciate !

@changLiuUNSW
Copy link
Contributor Author

@pkozlowski-opensource Just update the PR with latest changes from material 2

@andrii-oleksyshyn
Copy link

Hi guys. Do you have any updates regarding this fix?

@ezzkht
Copy link

ezzkht commented Jul 2, 2017

So sad this update was not included in the milestone alpha.27 :(

@andrii-oleksyshyn
Copy link

Is anybody still working on this feature? Do you plan to include it in the next milestone?

@changLiuUNSW
Copy link
Contributor Author

changLiuUNSW commented Aug 10, 2017

@pkozlowski-opensource The focus trap has been decoupled from material to the @angular/cdk. Do you think it is a good idea to include @angular/cdk as a dependency for ngBootstrap?
https://www.npmjs.com/package/@angular/cdk
https://github.com/angular/material2/tree/master/src/cdk

If you are OK with it, I will update this PR accordingly.

@dholovin
Copy link

dholovin commented Dec 5, 2017

Hi, any update to this issue?

@dholovin
Copy link

dholovin commented Jan 2, 2018

Hello and Happy New Year
Wondering if there is a plan to have background tabbing issue resolved?
Any workarounds known?
@pkozlowski-opensource , @changLiuUNSW can you please comment on 'focus trap' feature of ng-bootstrap modal?

Thanks in advance

@changLiuUNSW
Copy link
Contributor Author

@pkozlowski-opensource What is the plan for this PR? Just notice that the 1.0.0 stable version has been released and still not focus trap for the modal.

@pkozlowski-opensource
Copy link
Member

We've decided to merge 6961cb3 which has a stand-alone focus trap service. It was already applied to datepicker (e7179cd) and we have a PR for modal usage.

Closing given the above. Thnx for the PR, though!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

7 participants