Add accessibility to Zoom buttons

[exodussystem]

Currently the zoom buttons (+/-) are SVGs and some browser does not support focus for SVG. We are working on application that supports accessibility and tabbing/focusable is a must.

It would be great if these buttons are focusable. Thanks

[cotton123236]

Hi @exodussystem ,

I'm working on Zoomist v2 with TypeScript, and I'll take your advice on v2. But for v1, maybe you can consider making your own buttons by using

const options = {
  inEl: '.custom-in-button',
  outEl: '.custom-out-button',
}

Thanks!

[exodussystem]

@cotton123236

Hi Wilson,

Thank you very much for your prompt reply. We love your library and we are looking forward to Typescript version of this library. I figured out that but I did not know where to put these custom elements.

Finally, I could make it work. I post my codes here for anyone wants to do the same

HTML:

<div data-zoomist-src="assets/images/my-image.jpg">
    <div class="zoomist-zoomer">
      <a href="javascript:void(0);" class="zoomist-in-zoomer">
        <i class="fa fa-plus"></i>
      </a>
      <a href="javascript:void(0);" class="zoomist-out-zoomer">
        <i class="fa fa-minus"></i>
      </a>
    </div>
</div>

Javascript:

zoomer = {
        inEl:  '.zoomist-in-zoomer',
        outEl: '.zoomist-out-zoomer',
        disableOnBounds: true
    }

In order to get the focus, tag must have href attribute. This would make clicking on these zoomer butons will open another page or reload the page. I set href="javascript:void(0);" but this is not optimal solution.

If possible, in the zoomer handlers, adding "return false;" will stop the event propagation.