search

metafizzy / flickity

:leaves: Touch, responsive, flickable carousels
https://flickity.metafizzy.co
7.53k stars 602 forks source link

Label customization via options #1134

Closed iosonogio closed 3 years ago

iosonogio commented 3 years ago

Hi, while appreciating a lot this good piece of work, I would like to suggest an improvement:

it would be nice to have new options to let you customize the aria-label's that are set on buttons and dots, so users may provide custom labels and even translation (for non-English speakers).

It seems to me that this might be fairly simple to implement through the use of the options variable in page-dots.js and prev-next-button.js.

iosonogio commented 3 years ago

This is how it goes:

proof of concept in prev-next-button.js:

element.setAttribute( 'aria-label', this.isPrevious ? 
    (this.parent.options.labelPrevious ? this.parent.options.labelPrevious : 'Previous') :
    (this.parent.options.labelNext ? this.parent.options.labelNext : 'Next')
);

and in page-dots.js:

dot.setAttribute( 'aria-label', (this.parent.options.labelPagedot ? 
    this.parent.options.labelPagedot+' ' : 
    'Page dot ') + ( i + 1 )
);
desandro commented 3 years ago

Thanks for this suggestion. Others have asked for custom ARIA attributes. See related #886

iosonogio commented 3 years ago

Thanks for this suggestion. Others have asked for custom ARIA attributes. See related #886

Hi thank you for caring. Apologies for missing the related #886, it seems like you implemented it like the way I proposed here. Hope you can merge it in the codebase soon :)

desandro commented 3 years ago

I'll be evaluating how to improve accessibility in a future major release for Flickity.

Closing this issue. Please continue discussion in #886