A11y enhancements

[jenemde]

This pull request is related to #3149.
It contains three new parameters for a11y:

• containerMessage (String)
• containerRoleDescriptionMessage (String)
• itemRoleDescriptionMessage (String)

Their default value is null, considering that the a11y community doesn't share a common opinion about aria-roledescription (s. #3149).

There are some new functions in the a11y section:

• getRandomNumber(size), returning a random number, used to create a random id for the wrapper element.
• addElRoleDescription($el, description), adding the attribute "aria-roledescription" with value "description" to $el
• addElControls($el, controls), adding the attribute "aria-controls" with value "controls" to $el
• addElId($el, id), adding the attribute "id" with value "id" to $el
• addElLive($el, live), adding the attribute "aria-live" with value "live" to $el

In the code you can find the desired enhancement features:

• <section> as the outer container, instead of a <div> element: changed in playground/index.html
• outer container has aria-roledescription="carousel": changed in a11y (optional, default value is null)
• outer container has aria-label="Example Content" (Label can be set like the next/prev slider buttons text): changed in a11y (optional, default value is null)
• next and previous buttons are <a>-tags: changed in playground/index.html, but used <button>-tags instead of <a>-tags
• next and previous buttons have role="button": changed in a11y (role is only set if buttons have no <button>-tag)
• next and previous buttons has aria-controls="swiperID" (this connects with the id of the content): changed in a11y (relates to next feature)
• content container has id="swiperID" (this connects with the aria-attribute of the next and previous buttons): changed in a11y (a random id which is also used for aria-controls in next and previous buttons is generated)
• content container has aria-live="off" when autoplay is on and aria-live="polite" when autoplay is off: changed in a11y (checks autoplay status and sets aria-live accordingly)
• content item has role="group": changed in a11y
• content item has aria-roledescription="slide": changed in a11y (optional, default value is null)
• content item has the slide number as aria-label. Example :aria-label="1 / 6": changed in a11y

There is also a pull request for an according change in the documentation for swiper-website: nolimits4web/swiper-website#74

[nolimits4web]

Thanks for this PR, appreciate it! Added one comment about wrapper ID and can you please also add docs for new parameters to TypeScript definitions here https://github.com/nolimits4web/swiper/blob/master/src/types/components/a11y.d.ts ?

[nolimits4web]

Merged, thanks!