fix: add accessible labels to icon-only carousel navigation buttons - #517
Conversation
21f5b56 to
7e43c92
Compare
|
Hey @TomSweeneyRedHat @ashley-cui! This PR is ready for review. I'd really appreciate any feedback or review whenever you have the chance. Thanks! |
| }`}> | ||
| <div className="space-between container flex"> | ||
| <button onClick={() => setActiveTabIndex(activeTabIndex > 0 ? activeTabIndex - 1 : tabData.length - 1)}> | ||
| <button |
There was a problem hiding this comment.
I think these buttons should have a type="button" statement in their declaration
There was a problem hiding this comment.
Thanks for the review! I've addressed the feedback by adding type="button" to the relevant buttons and included the change in the latest commit.. I'd appreciate another look whenever you have a chance.. Thanks!
Signed-off-by: Aditya Kumar Nayak <adi.nayak45@gmail.com>
7e43c92 to
833916a
Compare
|
LGTM. Just FYI: your PR description syntax suggests it was written by AI. Note that our LLM Policy specifically prohibits this. AI assisted code is allowed, but any communication, including comments, emails, issues, and PR descriptions needs to be written by a person. Please keep your issues concise and human-written. |
|
Thanks for pointing that out @ashley-cui! |
|
LGTM, thanks |
3 participants
Summary
This PR improves the accessibility of the carousel navigation controls by adding descriptive
aria-labelattributes to icon-only navigation buttons.Without an accessible name, these controls may not provide meaningful information to users of assistive technologies such as screen readers.
Changes
Added descriptive
aria-labelattributes to the navigation buttons in:FeaturesCarouselThankYouSectionTestimonialSectionThe labels describe the action performed by each control (for example, "Previous feature" and "Next testimonial") rather than the icon itself, making the controls more understandable for screen reader users.
Why
Icon-only buttons should have an accessible name so that assistive technologies can accurately communicate their purpose.
This change improves accessibility while preserving the existing UI, styling, animations, and functionality.
Testing
yarn build