• Registered: 2023-02-12
  • Posts: 2

Topic: Button Keyboard Accessibility?

I've noticed that 1.5.1 doesn't have keyboard accessible expand buttons.  Any chance this can be resolved somehow?

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Button Keyboard Accessibility?

You could create a custom JavaScript event listener in your gallery's embedding page which triggers the Juicebox-Pro API toggleExpand() method (to expand/close the gallery) when a certain key is pressed.
Here's an example which toggles the gallery's expanded status when the 'x' key is pressed.

To see this example in action, create a sample gallery with JuiceboxBuilder-Pro and use the following code as the gallery's 'index.html' page.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <style>
            body {
                margin: 0px;
            }
        </style>
        <script src="jbcore/juicebox.js"></script>
        <script>
            var jb = new juicebox({
                containerId: "juicebox-container",
                galleryHeight: "400",
                galleryWidth: "600"
            });
            jb.onInitComplete = function() {
                window.addEventListener('keydown', function(e) {
                    if (e.keyCode === 88) {
                        jb.toggleExpand();
                    }
                });
            };
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="juicebox-container"></div>
    </body>
</html>

Notes:

(1) Use of the Juicebox-Pro API requires Juicebox-Pro. Unfortunately, this will not work with Juicebox-Lite.

(2) This should work fine with a regular gallery or when useFullscreenExpand="TRUE" but it will not work if the gallery is expanded in a new page (e.g. on an iOS device or when expandInNewPage="TRUE"). In order to close a gallery which has been expanded in a new page, the code would need to be incorporated into the gallery's 'jbcore/full.html' page as well as the gallery's embedding page.

(3) Keycodes (if you wanted to change the 'x' key for something else) can be found here: https://css-tricks.com/snippets/javascr … -keycodes/

As this does not work with Juicebox-Lite, you might like to post this as a suggestion for a future version in the Feature Requests forum thread.
I do not know what suggestions might be incorporated into future versions but this is the best place for all ideas to ensure that they are seen by the developers. (I know the Feature Requests forum thread is a sub-forum of the Juicebox-Pro forum but there's no specific Feature Requests thread for Juicebox-Lite so this is still the best place to post.)
Thank you.

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Button Keyboard Accessibility?

I think this might be undocumented but try 'F' to expand the gallery (fullscreen) and ESC to close the gallery.

Notes:

(1) Juicebox-Pro only (set enableKeyboardControls="TRUE").

(2) The gallery must have focus (need to click somewhere within the gallery before pressing 'F' (or any other keyboard control)).

(3) As with the example in my previous post, this does not work if the gallery is expanded in a new page (no easy solution).

  • Registered: 2023-12-26
  • Posts: 2

Re: Button Keyboard Accessibility?

lukeleber wrote:

I've noticed that 1.5.1 doesn't have keyboard accessible expand buttons.  Any chance this can be resolved somehow?

you can use the tabindex attribute in HTML to make elements keyboard-focusable.

Look at the javascript example.

<button class="expand-button" tabindex="0" aria-label="Expand">Expand</button>

<script>
  const expandButton = document.querySelector('.expand-button');
  
  expandButton.addEventListener('keydown', function(event) {
    if (event.key === 'Enter' || event.key === ' ') 
    { 
      console.log('Expand functionality triggered.');
    }
  });
</script>