Amphtml: amp-carousel, next/previous button labels should include additional information

[aghassemi]

What you will need to know

• Basic Javascript
• Basic HTML

Background

Currently the aria-label for next/previous buttons for amp-carousel read as previous item in carousel / next item in carousel, ideally they should also indicate the total number of items and which one next/previous is. This additionally allows the user to infer there where they are in the carousel.

The change

We like to change the aria-label for next/previous buttons to read as Next item (# of ##) / Previous item (# of ##) where # is the slide number and ## is the total number of slides.

For instance if user is currently on slide 5 of 20 the labels should be:
Next item (6 of 20)
Previous item (4 of 20)

We need to be mindful of loop property which allows user to navigate back to slide 1 after hitting the last slide using the next button.

Step by step

• [ ] Claim this issue by adding a comment below. Please only claim this bug if you plan on starting work in the next day or so. (If you join the AMP Project we'll be able to assign this issue to you after you've claimed it.)
• [ ] If you aren't too familiar with Git/GitHub, see the Getting Started End-to-End Guide for an intro to Git & GitHub, and how to get a copy of the code. You can also refer to the Quick Start Guide for the necessary setup steps with less explanation than the End-to-End guide.
• [ ] Follow the instructions for building AMP.
• [ ] [Create a Git branch](https://github.com/ampproject/amphtml/blob/master/contributing/getting-started-e2e.md#create-a-git-branch) for making your changes.
• [ ] [Sign the Contributor License Agreement](https://github.com/ampproject/amphtml/blob/master/CONTRIBUTING.md#contributor-license-agreement) before creating a Pull Request. (If you are contributing code on behalf of a corporation start this process as early as possible.)
  
• [ ] [Commit your changes](https://github.com/ampproject/amphtml/blob/master/contributing/getting-started-e2e.md#edit-files-and-commit-them) frequently.
• [ ] [Push your changes to GitHub](https://github.com/ampproject/amphtml/blob/master/contributing/getting-started-e2e.md#push-your-changes-to-your-github-fork).
• [ ] [Create a Pull Request](https://github.com/ampproject/amphtml/blob/master/contributing/getting-started-e2e.md#send-a-pull-request-ie-request-a-code-review). Mention @aghassemi and closes Issue #12500 in the description.
• [ ] [Respond to your reviewer's comments](https://github.com/ampproject/amphtml/blob/master/contributing/getting-started-e2e.md#respond-to-pull-request-comments) (if any).

Once approved, your changes will be merged. ⚡⚡⚡Congrats on making your first contribution to the AMP Project!⚡⚡⚡ You'll be able to see it live across the web soon!

Thanks, and we hope to see more contributions from you soon.

Questions?

If you have questions ask @aghassemi in this issue or on your Pull Request (if you've created one) or see the How to get help section of the Getting Started guide.

[bpaduch]

How about having (# of ##) in parenthesis, like: Next item (4 of 20). I question whether they need to know it's a carousel. The relevant details are, there's many items to move back/forwards to.

HTH.

[cathyxz]

Assigning to myself to write-up as a GFI.

[cjdeleon62]

@aghassemi @cathyxz I can work on this issue if no one else has taken it yet

[aghassemi]

@cjdeleon62 got for it! Thank you.