Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🎉 add ARIA labels to all site buttons #3125

Merged
merged 4 commits into from
Jan 23, 2024
Merged

🎉 add ARIA labels to all site buttons #3125

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6d600d0
🎉 add aria labels to nav buttons
ikesau Jan 22, 2024
7533890
🎉 add aria labels to all site buttons
ikesau Jan 22, 2024
dc3bb33
🎉 button aria label improvements
ikesau Jan 23, 2024
8c657fc
✨ specify insight title in key insight button
ikesau Jan 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions site/CookieNotice.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ export const CookieNotice = ({
</div>
<div className="actions">
<button
aria-label="Reject cookies"
className="button"
onClick={() =>
dispatch({
Expand All @@ -55,6 +56,7 @@ export const CookieNotice = ({
No thanks
</button>
<button
aria-label="Accept cookies"
className="button accept"
onClick={() =>
dispatch({
Expand Down
1 change: 1 addition & 0 deletions site/DonateForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -352,6 +352,7 @@ export class DonateForm extends React.Component {
/>
<div className="donation-payment">
<button
aria-label="Submit donation"
type="submit"
className="donation-submit"
disabled={this.isLoading || this.isSubmitting}
Expand Down
15 changes: 12 additions & 3 deletions site/Feedback.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,7 @@ export class FeedbackForm extends React.Component<{
messages we are not able to reply to all.
</p>
</div>
<div className="actions">
<div aria-label="Close feedback form" className="actions">
<button onClick={this.onClose}>Close</button>
</div>
</div>
Expand Down Expand Up @@ -276,7 +276,11 @@ export class FeedbackForm extends React.Component<{
) : undefined}
</div>
<div className="footer">
<button type="submit" disabled={loading}>
<button
aria-label="Submit feedback"
type="submit"
disabled={loading}
>
Send message
</button>
</div>
Expand Down Expand Up @@ -330,11 +334,16 @@ export class FeedbackPrompt extends React.Component {
</div>
</div>
{this.isOpen ? (
<button className="prompt" onClick={this.toggleOpen}>
<button
aria-label="Close feedback form"
className="prompt"
onClick={this.toggleOpen}
>
<FontAwesomeIcon icon={faTimes} /> Close
</button>
) : (
<button
aria-label="Open feedback form"
className="prompt"
data-track-note="page_open_feedback"
onClick={this.toggleOpen}
Expand Down
7 changes: 6 additions & 1 deletion site/NewsletterSubscription.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,11 @@ export const NewsletterSubscription = ({
</>
)}
{isOpen ? (
<button className="prompt" onClick={() => setIsOpen(false)}>
<button
aria-label="Close subscription form"
className="prompt"
onClick={() => setIsOpen(false)}
>
<FontAwesomeIcon icon={faTimes} /> Close
</button>
) : (
Expand Down Expand Up @@ -136,6 +140,7 @@ export const NewsletterSubscriptionForm = ({
name="EMAIL"
/>
<button
aria-label="Subscribe to newsletter"
type="submit"
disabled={!isSubmittable}
onClick={() =>
Expand Down
6 changes: 5 additions & 1 deletion site/NotFoundPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,11 @@ export const NotFoundPage = (props: { baseUrl: string }) => {
/>
<FontAwesomeIcon icon={faSearch} />
</div>
<button className="btn" type="submit">
<button
aria-label="Submit search"
className="btn"
type="submit"
>
Search
</button>
</form>
Expand Down
3 changes: 3 additions & 0 deletions site/SiteMobileCategory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,9 @@ export const SiteMobileCategory = ({
ref={categoryRef}
>
<SiteNavigationToggle
ariaLabel={
isActive ? `Collapse ${category}` : `Expand ${category}`
}
isActive={isActive}
onToggle={() => toggleCategory(category)}
dropdown={
Expand Down
1 change: 1 addition & 0 deletions site/SiteMobileMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ export const SiteMobileMenu = ({
</li>
<li>
<SiteNavigationToggle
ariaLabel="Toggle resources menu"
isActive={menu === Menu.Resources}
onToggle={() =>
toggleMenu(
Expand Down
4 changes: 4 additions & 0 deletions site/SiteNavigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,7 @@ export const SiteNavigation = ({
})}
>
<SiteNavigationToggle
ariaLabel="Toggle menu"
isActive={isActiveMobileMenu}
onToggle={() => toggleMenu(Menu.Topics)}
className="SiteNavigationToggle--mobile-menu hide-sm-up"
Expand All @@ -149,6 +150,7 @@ export const SiteNavigation = ({
<ul>
<li>
<SiteNavigationToggle
ariaLabel="Toggle topics menu"
isActive={menu === Menu.Topics}
onToggle={() => toggleMenu(Menu.Topics)}
dropdown={
Expand All @@ -172,6 +174,7 @@ export const SiteNavigation = ({
</li>
<li className="with-relative-dropdown">
<SiteNavigationToggle
ariaLabel="Toggle resources menu"
isActive={menu === Menu.Resources}
onToggle={() =>
toggleMenu(Menu.Resources)
Expand All @@ -194,6 +197,7 @@ export const SiteNavigation = ({
onActivate={setSearchAsActiveMenu}
/>
<SiteNavigationToggle
ariaLabel="Toggle subscribe menu"
isActive={menu === Menu.Subscribe}
onToggle={() => toggleMenu(Menu.Subscribe)}
dropdown={
Expand Down
3 changes: 3 additions & 0 deletions site/SiteNavigationToggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,15 @@ import { faCaretDown, faCaretUp } from "@fortawesome/free-solid-svg-icons"
import cx from "classnames"

export const SiteNavigationToggle = ({
ariaLabel,
children,
isActive,
onToggle,
withCaret = false,
dropdown,
className,
}: {
ariaLabel: string
children: React.ReactNode
isActive: boolean
onToggle: () => void
Expand All @@ -25,6 +27,7 @@ export const SiteNavigationToggle = ({
})}
>
<button
aria-label={ariaLabel}
onClick={onToggle}
className={cx("SiteNavigationToggle__button", {
active: isActive,
Expand Down
1 change: 1 addition & 0 deletions site/SiteNavigationTopics.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ export const SiteNavigationTopics = ({
{topics.map((category) => (
<li key={category.slug}>
<button
aria-label={`Toggle ${category.name} sub-menu`}
onClick={() => {
setActiveCategory(category)
}}
Expand Down
1 change: 1 addition & 0 deletions site/blocks/CookiePreferences.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,7 @@ export const CookiePreferences = ({
</div>
) : (
<button
aria-label="Save cookie preferences"
className="owid-button"
onClick={() =>
dispatch({
Expand Down
1 change: 1 addition & 0 deletions site/blocks/ExpandableParagraph.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@ export const ExpandableParagraph = (
/>

<button
aria-label="Expand paragraph"
className={cx(
"expandable-paragraph__expand-button",
`expandable-paragraph__expand-button--${buttonVariant}`
Expand Down
3 changes: 3 additions & 0 deletions site/blocks/GalleryArrow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,9 @@ export const GalleryArrow = ({

return (
<button
aria-label={`Go to ${
direction === GalleryArrowDirection.next ? "next" : "previous"
} slide`}
disabled={disabled}
onClick={onClick}
className={classes.join(" ")}
Expand Down
25 changes: 23 additions & 2 deletions site/blocks/KeyInsights.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,11 @@ export const KEY_INSIGHTS_SLIDE_CONTENT_CLASS_NAME = "content"

type scrollVisibilityApiType = React.ContextType<typeof VisibilityContext>

export enum ArrowDirection {
prev = "prev",
next = "next",
}

const Thumb = ({
title,
onClick,
Expand All @@ -27,6 +32,7 @@ const Thumb = ({
}) => {
return (
<button
aria-label="Go to slide"
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
aria-label="Go to slide"
aria-label={`Go to slide: ${title}`}

onClick={onClick}
role="tab"
aria-selected={selected}
Expand Down Expand Up @@ -206,15 +212,20 @@ const Arrow = ({
disabled,
onClick,
className,
direction,
}: {
children: React.ReactNode
disabled: boolean
onClick: VoidFunction
className?: string
direction: ArrowDirection
}) => {
const classes = ["arrow", className]
return (
<button
aria-label={`Scroll to ${
direction === ArrowDirection.next ? "next" : "previous"
} slide`}
disabled={disabled}
onClick={onClick}
className={classes.join(" ")}
Expand Down Expand Up @@ -243,7 +254,12 @@ const LeftArrow = () => {
}, [isFirstItemVisible, visibleItemsWithoutSeparators])

return !disabled ? (
<Arrow disabled={false} onClick={() => scrollPrev()} className="left">
<Arrow
disabled={false}
onClick={() => scrollPrev()}
className="left"
direction={ArrowDirection.prev}
>
<FontAwesomeIcon icon={faAngleRight} flip="horizontal" />
</Arrow>
) : null
Expand All @@ -263,7 +279,12 @@ const RightArrow = () => {
}, [isLastItemVisible, visibleItemsWithoutSeparators])

return !disabled ? (
<Arrow disabled={false} onClick={() => scrollNext()} className="right">
<Arrow
disabled={false}
onClick={() => scrollNext()}
className="right"
direction={ArrowDirection.next}
>
<FontAwesomeIcon icon={faAngleRight} />
</Arrow>
) : null
Expand Down
1 change: 1 addition & 0 deletions site/gdocs/components/BlockErrorBoundary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ export const BlockErrorFallback = ({
{resetErrorBoundary ? (
<div>
<button
aria-label="Reload content"
style={{ margin: "10px" }}
onClick={resetErrorBoundary}
>
Expand Down
2 changes: 2 additions & 0 deletions site/gdocs/components/ChartStory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ export default function ChartStory({
{`Chart ${currentIndex + 1} of ${items.length}`}
</div>
<button
aria-label="Go to previous slide"
disabled={currentIndex === 0}
className={
"chart-story__nav-arrow chart-story__nav-arrow--left span-cols-1 align-center "
Expand All @@ -58,6 +59,7 @@ export default function ChartStory({
{renderSpans(currentSlide.narrative.value)}
</div>
<button
aria-label="Go to next slide"
disabled={currentIndex === maxSlide}
className={
"chart-story__nav-arrow chart-story__nav-arrow--right span-cols-1 col-start-8 align-center"
Expand Down
1 change: 1 addition & 0 deletions site/gdocs/components/TableOfContents.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ export default function TableOfContents({
data-track-note="toc_toggle"
>
<button
aria-label="Toggle table of contents"
id="toc-menu-button"
className="toc-toggle span-cols-6 span-md-cols-8 span-sm-cols-10"
onClick={toggleIsOpen}
Expand Down
1 change: 1 addition & 0 deletions site/gdocs/pages/DataInsight.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,7 @@ const DataInsightMeta = (props: {
Share this insight
</label>
<button
aria-label="Copy link to clipboard"
id="copy-link-button"
className="data-insight-meta__copy-link-button body-3-medium"
onClick={() => {
Expand Down
5 changes: 4 additions & 1 deletion site/search/SearchPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,9 @@ function ShowMore({
<div className="search-results__show-more-container">
<em>{message}</em>
{!isShowingAllResults && (
<button onClick={handleClick}>Show more</button>
<button aria-label="Show more results" onClick={handleClick}>
Show more
</button>
)}
</div>
)
Expand Down Expand Up @@ -188,6 +190,7 @@ function Filters({
className="search-filters__tab"
>
<button
aria-label={`Toggle filter results by ${label}`}
disabled={hitsLengthByIndexName[key] === 0}
onClick={() => handleCategoryFilterClick(key)}
className={cx("search-filters__tab-button", {
Expand Down
Loading