The goal of this PR is to allow keyboard users to operate the lightbox and gallery.
Adding hidden, focusable divs with the class '.focus-bounds' along with some refs and aria-attributes provides a sensible tabbing order while not being too prescriptive. Any future additions made to the sections of the lightbox should not affect tabbing with the exception of the toolbar, where refs are used. Adding or re-ordering toolbar buttons could affect tab order but this could be solved by using querySelectors instead of refs and targeting the first/last toolbar button. Happy to make that change if you'd like.
Also worth considering is adding @keyup.enter="index = mediaIndex" alongside the @click listener in the examples on media items to be pulled into the lightbox. This allows the lightbox to be opened with a keyboard as well as a mouse.
Big fan of this project and I hope I was able to help contribute to its success.
Answers issue #143.
The goal of this PR is to allow keyboard users to operate the lightbox and gallery.
Adding hidden, focusable divs with the class
'.focus-bounds'along with some refs and aria-attributes provides a sensible tabbing order while not being too prescriptive. Any future additions made to the sections of the lightbox should not affect tabbing with the exception of the toolbar, where refs are used. Adding or re-ordering toolbar buttons could affect tab order but this could be solved by using querySelectors instead of refs and targeting the first/last toolbar button. Happy to make that change if you'd like.Also worth considering is adding
@keyup.enter="index = mediaIndex"alongside the@clicklistener in the examples on media items to be pulled into the lightbox. This allows the lightbox to be opened with a keyboard as well as a mouse.Big fan of this project and I hope I was able to help contribute to its success.
Cheers!