🎉 add ARIA labels to all site buttons #3125
Conversation
|
Warning Rate Limit Exceeded@ikesau has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 13 minutes and 19 seconds before requesting another review. How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. WalkthroughThe recent updates focus on enhancing web accessibility across various components of a website. By adding or refining Changes
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Review Status
Actionable comments generated: 1
Configuration used: CodeRabbit UI
Files selected for processing (19)
- site/CookieNotice.tsx (2 hunks)
- site/DonateForm.tsx (1 hunks)
- site/Feedback.tsx (3 hunks)
- site/NewsletterSubscription.tsx (2 hunks)
- site/NotFoundPage.tsx (1 hunks)
- site/SiteMobileCategory.tsx (1 hunks)
- site/SiteMobileMenu.tsx (1 hunks)
- site/SiteNavigation.tsx (4 hunks)
- site/SiteNavigationToggle.tsx (2 hunks)
- site/SiteNavigationTopics.tsx (1 hunks)
- site/blocks/CookiePreferences.tsx (1 hunks)
- site/blocks/ExpandableParagraph.tsx (1 hunks)
- site/blocks/GalleryArrow.tsx (1 hunks)
- site/blocks/KeyInsights.tsx (5 hunks)
- site/gdocs/components/BlockErrorBoundary.tsx (1 hunks)
- site/gdocs/components/ChartStory.tsx (2 hunks)
- site/gdocs/components/TableOfContents.tsx (1 hunks)
- site/gdocs/pages/DataInsight.tsx (1 hunks)
- site/search/SearchPanel.tsx (2 hunks)
Files skipped from review due to trivial changes (13)
- site/CookieNotice.tsx
- site/DonateForm.tsx
- site/Feedback.tsx
- site/NewsletterSubscription.tsx
- site/NotFoundPage.tsx
- site/SiteNavigation.tsx
- site/SiteNavigationTopics.tsx
- site/blocks/ExpandableParagraph.tsx
- site/blocks/GalleryArrow.tsx
- site/gdocs/components/BlockErrorBoundary.tsx
- site/gdocs/components/ChartStory.tsx
- site/gdocs/components/TableOfContents.tsx
- site/search/SearchPanel.tsx
Additional comments: 8
site/SiteNavigationToggle.tsx (2)
- 7-15: The addition of the
ariaLabelprop and its type declaration is correct and aligns with the PR's objective to enhance accessibility.- 30-30: The
aria-labelattribute has been correctly added to the button element, ensuring that the button's purpose is conveyed to screen reader users.site/SiteMobileCategory.tsx (1)
- 31-33: The dynamic setting of the
ariaLabelprop based on theisActivestate is a good practice for accessibility, providing contextually relevant information to assistive technologies.site/SiteMobileMenu.tsx (1)
- 54-54: The
ariaLabelprop has been correctly added to theSiteNavigationTogglecomponent, enhancing accessibility for the resources menu toggle.site/blocks/CookiePreferences.tsx (1)
- 124-124: The
aria-labelattribute has been correctly added to the button, providing a clear description of the button's action for screen reader users.site/gdocs/pages/DataInsight.tsx (1)
- 127-127: The
aria-labelattribute has been appropriately added to the "copy-link-button", which will help screen reader users understand the button's function.site/blocks/KeyInsights.tsx (2)
- 18-21: The addition of the
ArrowDirectionenum is a good practice for code readability and maintainability, providing clear direction indicators for the arrows.- 226-228: The
aria-labelattribute in theArrowcomponent is correctly based on thedirectionprop, providing directional context for screen reader users.
site/blocks/KeyInsights.tsx
Outdated
| @@ -27,6 +32,7 @@ const Thumb = ({ | |||
| }) => { | |||
| return ( | |||
| <button | |||
| aria-label="Go to slide" | |||
There was a problem hiding this comment.
The aria-label attribute added to the Thumb component's button element is a good accessibility improvement, but it could be more descriptive by including the slide title.
- aria-label="Go to slide"
+ aria-label={`Go to slide: ${title}`}Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| aria-label="Go to slide" | |
| aria-label={`Go to slide: ${title}`} |
Just a quick and easy thing I noticed when reviewing our Lighthouse audits. Effectively, procrastination in the face of our other, much harder to improve metrics like Largest Contentful Paint 😬
Summary by CodeRabbit
aria-labelattributes to various interactive elements across the site.