Skip to content
This repository has been archived by the owner on Apr 9, 2024. It is now read-only.

Convert toggle arrows to <button> and make them accessible #185

Open
wants to merge 1 commit into
base: 3.3-branch
Choose a base branch
from

Conversation

bamadesigner
Copy link

@bamadesigner bamadesigner commented Sep 15, 2020

This is an effort to make all of the arrow "toggle" buttons to be <button>s and make expanding/collapsing panels, groups, accordions, and repeater fields accessible to those who cannot use a mouse.

@jbrinley jbrinley requested a review from faction23 September 15, 2020 20:26
@ryanurban ryanurban requested a review from jbrinley September 22, 2020 14:47
@ryanurban
Copy link
Contributor

Thanks Rachel!

@bamadesigner
Copy link
Author

@ryanurban Hey Ryan! No problem. The only area I really wasn't sure about was how y'all recommend adding/handling i18n for the aria labels.

const expanded = this.state.active ? 'true' : 'false';

const escapedLabel = this.props.label.replace(/"/g, '\\\\\"');
const buttonLabel = `${this.state.active ? 'Collapse' : 'Expand'} ${escapedLabel}`;
Copy link
Contributor

Choose a reason for hiding this comment

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

Probably want to make these strings translatable?

Copy link
Author

Choose a reason for hiding this comment

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

I agree but, per my previous comment, I don't know how y'alls setup handles translation.

Copy link
Contributor

Choose a reason for hiding this comment

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

You can add your localized strings here and then use them in your JS like so.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants