feat(carousel): accessibility

[divdavem]

This PR adds accessibility to the carousel:

• the carousel is now automatically paused when the focus is inside it (this can be controlled with the pauseOnFocus property)
• some roles and aria attributes are added to make it easier to use the carousel with a screen reader. This mostly relies on the carousel indicators that act like tabs.

In the future, it would be nice to integrate assistive-webdriver to execute end-to-end tests with a screen reader.

Before submitting a pull request, please make sure you have at least performed the following:

• read and followed the CONTRIBUTING.md and DEVELOPER.md guide.
• built and tested the changes locally.
• added/updated any applicable tests.
• added/updated any applicable API documentation.
• added/updated any applicable demos.

Fixes #3755

[codecov-commenter]

Codecov Report

Merging #3773 into master will decrease coverage by 0.05%.
The diff coverage is 86.66%.

@@            Coverage Diff             @@
##           master    #3773      +/-   ##
==========================================
- Coverage   91.23%   91.18%   -0.06%     
==========================================
  Files         100      100              
  Lines        2988     3016      +28     
  Branches      555      562       +7     
==========================================
+ Hits         2726     2750      +24     
  Misses        192      192              
- Partials       70       74       +4     

Flag	Coverage Δ
#e2e	55.90% <20.00%> (-0.33%)	⬇️
#unit	87.73% <86.66%> (-0.02%)	⬇️

Impacted Files	Coverage Δ
src/carousel/carousel.ts	95.61% <86.20%> (-3.24%)	⬇️
src/carousel/carousel-config.ts	100.00% <100.00%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update a95c910...c659989. Read the comment docs.

[benouat]

I still have one consideration regarding all these changes.

I was having a look a the first demo, if you click on previous/next arrow, I assume that focus will be somewhere caught inside the widget, but there is no visual hint such as an outline. Hence the carousel gets stuck in pause mode, and for the end user you don't know why...

It's not very intuitive that you have to click elsewhere for the carousel to resume.

[benouat]

LGTM! I just left a couple nitpick comments.

[divdavem]

@benouat Thank you for your review and your comments. I have updated the code accordingly.