-
Notifications
You must be signed in to change notification settings - Fork 6.7k
fix(modal) Implement W3-compliant tabbing on the modal - no tabbing into the background document #2461
Conversation
this is the initial implementation... doesn't do shift-tab wrap around the other way. Tests also aren't working because simulated tab keypress event isn't changing document.activeElement.
Updates of modal and testing updates to support W3 specification for tabbing through form elements.
Changed the focus ring color to black to raise less questions when users see it.
@jmwolfe thnx for the PR! Could you squash all the commits into one so it is easier to review? Thnx! |
Not sure what you mean... how do I do that? do another branch, copy files in from the first-round branch and recommit? |
The easiest (?) way would be (from top of my head):
|
OK... got this: |
I tried consolidating... what's the next step? is it stuck in pull-purgatory? ⌚ |
Any notion when this might appear in a stable build of Angular-ui/bootstrap? |
bump @pkozlowski-opensource -- do I need to do something else to get this in? I used a good chunk of my holiday to get this ready as there seemed to be some healthy demand for it. Do I really need to create a new branch, pull all my changes over to it, and do it in only a single commit? The few commits i have aren't that complicated I don't think. |
+1 |
3 similar comments
+1 |
+1 |
+1 |
Any idea when this might be merged? |
^^^ this |
+1
|
Thanks for working on this! I'm looking forward to seeing this fixed. However, as a non-contributor, I'm a little concerned that this approach reimplements the sequential focus navigation algorithm and takes over focus navigation from the browser. Although the implementataion is very good, the approach seems very error prone and likely to need updating whenever new focus targets are added to one of the HTML standards. Also, as noted in the source comments, it doesn't handle dynamic changes to focusable elements (e.g. if readonly/disabled/visibility/etc. are dynamic). Is there a reason why the upstream Bootstrap approach of listening for |
+1 |
1 similar comment
+1 |
OK. I see what happened. I looked into the focusin approach, and actually started that way. but bootstrap 3's implementation of this seemed really JQuery heavy. I wasn't sure about trying to engineer it without JQuery. I went off of @hall5714 's comment ( #738 (comment)) and did a tab-override approach. I noted that @chrisirhc noted we could ignore tabindex and made a reference to focusin but I must have read it too quickly and didn't notice the fact I wasn't dealing with focusin. I asked for feeback on the approach, but nobody had anything to say about it (unfortunately until after it was polished and tested, etc. :( ). I guess it's back to the drawing board. I have more DOM event experience at this point; perhaps I can build it again around focusin. Until then, if anyone really needs an implementation, the one on the named fork works perfectly. :) And really, how soon will the tabbing specification change? Closing this PR. |
This PR enables the bootstrap modal to use tabbing in forms without the tab cycle taking you to the background document. It implements the full standard W3 specification for browser tabbing. Demo is updated to demonstrate tabbing. May want to scale that back if it's "too much about tabbing." But I think it makes for a strong demo and test of the feature. Added a red outline