Skip to content

Commit

Permalink
docs(HorizontalScroll): add accessibility section
Browse files Browse the repository at this point in the history
  • Loading branch information
mvidalgarcia committed Jan 30, 2025
1 parent 49b7418 commit 56068e6
Showing 1 changed file with 26 additions and 0 deletions.
26 changes: 26 additions & 0 deletions packages/orbit-components/src/HorizontalScroll/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -62,3 +62,29 @@ After adding import into your project you can use it simply like:
| `"1000"` |
| `"1200"` |
| `"1600"` |

## Accessibility

The HorizontalScroll component comes with built-in accessibility features for screen reader users through ARIA labels.

### ARIA labels

When using arrows (`arrows`), you must provide accessibility labels for both arrow buttons using the `arrowLeftAriaLabel` and `arrowRightAriaLabel` props. These labels should be properly translated strings, as they will be read by screen readers to users in their preferred language.

```jsx
<HorizontalScroll
arrows
arrowLeftAriaLabel="Scroll left" // Should be a translated string
arrowRightAriaLabel="Scroll right" // Should be a translated string
>
{/* content */}
</HorizontalScroll>
```

The labels should clearly describe the action that will occur when the button is pressed. For example:

- "See previous items"
- "Scroll to previous cards"
- "Show previous products"

Remember that these strings must be translated to provide an accessible experience for screen reader users across different languages.

0 comments on commit 56068e6

Please sign in to comment.