Keyboard tabbing

  • Resolved johndaltrey

    (@johndaltrey)


    1 year, 9 months ago

    Hi, great flexible modal plugin!

    One issue I’m having is with keyboard accessibility. You can launch the modal with keyboard tabbing if assigned to a button but then cannot get any focus/tab around within the modal. Is there anyway to resolve this?

    Thanks

    The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author merbmerb

    (@merbmerb)

    Hi

    Thanks for the feedback. Do you have an example, and also what version are you using. I just did a quick test and opened a modal with a link and button inside of the modal and it received focus without a problem. Was also able to tab between elements.

    Thread Starter johndaltrey

    (@johndaltrey)

    Yes, I can launch the modal by tabbing to the “filters” button but then the tabbing into the modal to toggle the checkboxes, or close the modal with the ‘X’ doesn’t work for me. Were you able to?

    Just to confirm the is tabbing with the keyboard alone (not using mouse/cursor) for accessibility reasons.

    • This reply was modified 1 year, 9 months ago by johndaltrey.
    • This reply was modified 1 year, 9 months ago by johndaltrey.
    Thread Starter johndaltrey

    (@johndaltrey)

    Version 2.1

    Plugin Author merbmerb

    (@merbmerb)

    OK, I have looked at the page you provided and I think I found the problem. The checkboxes used on the page are not actual checkboxes. These are the criteria I use to define an element that can receive focus:

    button, [href], input, select, textarea, [tabindex]:not([tabindex=”-1″])

    The checkboxes used in the modal are div (must have some js to get them to work) while to be compliant (real checkboxes according to HTML spec) they should be input.

    Regarding the close X, that is my fault, I chose to only look for items actually within the modal, I should really also include the X. Note you can still close using ESC.

    Plugin Author merbmerb

    (@merbmerb)

    I hope that made sense, let me know if you have any more problems.

    Thread Starter johndaltrey

    (@johndaltrey)

    Hi, thanks for looking into this and sorry for the delay, this one dropped down the list!

    I have solved the issue with Facet and if on page checkboxes are fully tab-able. When used in the modal though I am still not able to tab through them?

    Plugin Author merbmerb

    (@merbmerb)

    OK, I tabbed to the filters, pressed enter, and the modal opened with the first option highlighted. I can then tab through the checkboxes without a problem. The only problem I can see is the + options are not tab-able.

    Plugin Author merbmerb

    (@merbmerb)

    OK, so sometimes it works and sometimes it does not. Let me dig deeper.

    Thread Starter johndaltrey

    (@johndaltrey)

    Interesting! I can always open the modal but can’t ever seem get inside the modal to tab through checkboxes. Thanks for looking into this!

    Plugin Author merbmerb

    (@merbmerb)

    I cannot get it to fail now. A question for you, are the contents of the modal dynamically generated at runtime or fixed?

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Keyboard tabbing’ is closed to new replies.