3 ms·

It suffers from the same bug as the stock bootstrap modal; focus is not contained in the popup window. Press tab a few times and soon your keyboard focus is on

by moe 14y ago

It suffers from the same bug as the stock bootstrap modal; focus is not contained in the popup window. Press tab a few times and soon your keyboard focus is on elements on the page behind the modal.

rhizome 14y ago
Is there even a way to avoid that?
- harlanlewis 14y ago
  Assuming your modal is an element lacking native focus (eg a div) and you're using jQuery: modal.attr('tabindex','1').style('outline','0'); modal.focus(); That: 1 - enables focus on the modal div 2 - hides focus visual indicator on the modal (because it's not an interactive element, just a wrapper) 3 - sets focus on the modal The user's next tab keypress will select the first focusable element inside the modal. Restricting tab keypress to just elements inside the modal (ie cycling through only modal content) doesn't return significant benefit and it's a whole lot more work. It's easy for a user to error-correct by simply clicking back inside the modal, but it's hard for a developer to manage enabled/disabled states for native behavior.
- pebb 14y ago
  Not without heavy js code
  - moe 14y ago
    Well, I actually submitted a pull-request almost a year ago but it was rejected for "complexity"... I didn't understand that decision back then and I don't understand it today. The patch weighs in at about 100 lines which doesn't seem heavy to me. Especially when you consider that without the patch the bootstrap-"modal" is not a modal... Anyway, here's the fixed bootstrap-modal.js for the version that was current back then: https://gist.github.com/0d04646ab6cf4df50610 https://gist.github.com/0d04646ab6cf4df50610 Line 23-82 is the important bit, that snippet is lifted nearly 1:1 from jquery.ui.dialog which fixed this issue ages ago. Beyond that there's only a couple lines of glue code. Feel free to port this forward to the current version (or better-modal). Personally I've stopped using the javascript parts of bootstrap because I don't want to maintain forks for basic bugs like that.
    - pokoleo 14y ago
      You might want to change the language/syntax highlighting of that gist. That apostrophe on line 120...
      - moe 14y ago
        Sorry, here's the same gist with proper syntax highlighting https://gist.github.com/bca7185d4cf0b71bd55b https://gist.github.com/bca7185d4cf0b71bd55b
        jschr 14y ago
        Thanks for this. Currently I have a workaround by using data-tabindex instead of the standard tabindex but I've been trying to find a more robust solution to this problem so I'm going to take a look at implementing something like this.

by moe 14y ago

It suffers from the same bug as the stock bootstrap modal; focus is not contained in the popup window. Press tab a few times and soon your keyboard focus is on elements on the page behind the modal.

rhizome 14y ago

Is there even a way to avoid that?

harlanlewis 14y ago
Assuming your modal is an element lacking native focus (eg a div) and you're using jQuery: modal.attr('tabindex','1').style('outline','0'); modal.focus(); That: 1 - enables focus on the modal div 2 - hides focus visual indicator on the modal (because it's not an interactive element, just a wrapper) 3 - sets focus on the modal The user's next tab keypress will select the first focusable element inside the modal. Restricting tab keypress to just elements inside the modal (ie cycling through only modal content) doesn't return significant benefit and it's a whole lot more work. It's easy for a user to error-correct by simply clicking back inside the modal, but it's hard for a developer to manage enabled/disabled states for native behavior.
pebb 14y ago
Not without heavy js code
- moe 14y ago
  Well, I actually submitted a pull-request almost a year ago but it was rejected for "complexity"... I didn't understand that decision back then and I don't understand it today. The patch weighs in at about 100 lines which doesn't seem heavy to me. Especially when you consider that without the patch the bootstrap-"modal" is not a modal... Anyway, here's the fixed bootstrap-modal.js for the version that was current back then: https://gist.github.com/0d04646ab6cf4df50610 https://gist.github.com/0d04646ab6cf4df50610 Line 23-82 is the important bit, that snippet is lifted nearly 1:1 from jquery.ui.dialog which fixed this issue ages ago. Beyond that there's only a couple lines of glue code. Feel free to port this forward to the current version (or better-modal). Personally I've stopped using the javascript parts of bootstrap because I don't want to maintain forks for basic bugs like that.
  - pokoleo 14y ago
    You might want to change the language/syntax highlighting of that gist. That apostrophe on line 120...
    - moe 14y ago
      Sorry, here's the same gist with proper syntax highlighting https://gist.github.com/bca7185d4cf0b71bd55b https://gist.github.com/bca7185d4cf0b71bd55b
      - jschr 14y ago
        Thanks for this. Currently I have a workaround by using data-tabindex instead of the standard tabindex but I've been trying to find a more robust solution to this problem so I'm going to take a look at implementing something like this.