Accessibility: 'Buttons do not have an accessible name'

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.

[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