Skip to content

Commit

Permalink
Wrap thumbnails in nav tag to get proper ARIA role (#663)
Browse files Browse the repository at this point in the history
While running an accessibility test on a project using this package we found the following error: `aria-label attribute is not well supported on a div with no valid role attribute`.

You could simply add a `role="navigation"` to the div, but changing the `div` to `nav` will do that and be more semantically correct.
  • Loading branch information
alexdelgado authored May 9, 2022
1 parent 4d2fc70 commit 5137871
Showing 1 changed file with 2 additions and 2 deletions.
4 changes: 2 additions & 2 deletions src/ImageGallery.js
Original file line number Diff line number Diff line change
Expand Up @@ -1429,14 +1429,14 @@ class ImageGallery extends React.Component {
onSwiped={!disableThumbnailSwipe && this.handleOnThumbnailSwiped}
>
<div className="image-gallery-thumbnails" ref={this.thumbnailsWrapper} style={this.getThumbnailBarHeight()}>
<div
<nav
ref={this.thumbnails}
className="image-gallery-thumbnails-container"
style={thumbnailStyle}
aria-label="Thumbnail Navigation"
>
{thumbnails}
</div>
</nav>
</div>
</SwipeWrapper>
) : null
Expand Down

0 comments on commit 5137871

Please sign in to comment.