React-responsive-carousel: Accessibility: 'Buttons do not have an accessible name'

[wildpow]

Lighthouse accessibility audit message 'Buttons do not have an accessible name'. Here are the two element listed:

<button type="button" class="control-arrow control-prev"></button>
<button type="button" class="control-arrow control-next"></button>

Would this pass by just adding a role or aria-label to these buttons? If so I would like to make a PR for this. I've never contributed to an open source project before and this seems like something easy for a newbie like myself.

[leandrowd]

A pr would be great.

[wildpow]

Well I have a fork that is passing the Lighthouse accessibility test for these buttons but, now the build is failing 10 tests. What are some first steps I can go about to fix these? I've only just started learning how to use testing frameworks so any resources would be great.

[laneysmith]

@wildpow Snapshot tests are just "snapshots" of what the component tree should look like to pass a particular test. If you scroll up, you'll see the diffs for all 10 failing tests, and they pretty much all look similar to this:

         <button
    +      aria-label="mobile navigation"
           className="control-arrow control-prev control-disabled"
           onClick={[Function]}
    +      role="presentation"
           type="button"
         />

All 10 are failing because previous snapshots didn't have those role & aria-label attributes you added. You'll need to update all those tests using npm test -- -u, then commit those updated snapshots along with your code changes.

[wildpow]

PR: https://github.com/leandrowd/react-responsive-carousel/pull/275

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.