search

humaan / Modaal

An accessible dialog window library for all humans.
http://humaan.com/modaal/
MIT License
2.72k stars 183 forks source link

How to set `aria-label` for items in gallery #91

Closed sposhe closed 7 years ago

sposhe commented 7 years ago

I like Modaal a lot, but I'm stumped on how to set the aria-label value on each item in a lightbox gallery. When the gallery is opened, each item is labeled as;

<div class="modaal-gallery-item gallery-item-1 is_active" aria-label="Image 1 no description" tabindex="0">
  <img src="http://placehold.it/300x500" alt=" " style="width:100%">
  <div class="modaal-gallery-label"><span class="modaal-accessible-hide">Image 2</span></div>
</div>

How can I change the value from "Image 1 no description" to something meaningful? I've tried adding aria-label and aria-description attributes to both the a tag that triggers Modaal and the contained img element.

I can't find anything in the documentation or elsewhere. Thanks.

sposhe commented 7 years ago

After digging through the code, I've also tried using a data-modaal-desc attribute, with no effect.

danhumaan commented 7 years ago

Thanks for sharing @sposhe - we'll investigate the data-modaal-desc attribute soon to see what's up, and update this issue accordingly.

danhumaan commented 7 years ago

Hi @sposhe - thanks for your patience while we find the time to address some outstanding tasks. I've spent some time this morning investigating this issue and haven't been able to replicate a problem where using the attribute hasn't been applied as expected.

Are you able to prepare a jsFiddle or jsBin to provide a test page showing your issue? This will help us narrow in on whether it's a bug or some other issue.

danhumaan commented 7 years ago

@sposhe - spent a little more time this morning looking into this task and still having difficulty replicating this issue as you've described. At this stage i'm going to close this unless you're able to provide us more context and a demo or example where we can see the problem occurring.