Refactor `ariaLabel` props to `aria-label` #12802

ItsMarcoMSF · 2022-12-06T18:38:28Z

Click to expand details

Package

carbon-components, carbon-components-react

Browser

Chrome

Operating System

MacOS

Package version

[email protected] & [email protected]

React version

v16.14.0

Automated testing tool and ruleset

IBM Equal Access Accessibility Checker

Assistive technology

No response

Description

According to @carbon/[email protected] storybook, the Modal component accepts a prop called aria-label.

However, in most other Carbon components in react, the prop ariaLabel is accepted

Can there be at least consistency between components in this area? A deeper dive into the source can also show that a number of components still accepts aria-label as a prop while the storybook says ariaLabel. And then there are other components that only accept one of ariaLabel or aria-label and not both.

According to React's official document on WAI-ARIA: https://reactjs.org/docs/accessibility.html#wai-aria:

Note that all aria-* HTML attributes are fully supported in JSX. Whereas most DOM properties and attributes in React are camelCased, these attributes should be hyphen-cased (also known as kebab-case, lisp-case, etc) as they are in plain HTML

So perhaps, the best approach is to support aria-label in all components?

WCAG 2.1 Violation

No response

Reproduction/example

Not applicable.

Steps to reproduce

Not applicable.

Code of Conduct

I agree to follow this project's Code of Conduct
I checked the current issues for duplicate problems

Plan of action

As described below, Components with the prop ariaLabel need to be refactored to aria-label. We wanted to ship this as part of v11, #9535, but it fell out of scope. There are currently 13 usages that need to be refactored: https://carbon-react-explorer.vercel.app/props/ariaLabel

Steps to complete for each component

Deprecate ariaLabel by updating to use deprecate()
Add aria-label prop -- e.g. ['aria-label']: PropTypes.string,
Refactor usages of ariaLabel to prefer aria-label if it's provided. Both props need to work for the time being to remain backwards compatibility

The text was updated successfully, but these errors were encountered:

tay1orjones · 2022-12-09T14:17:24Z

Thanks for bringing this up @ItsMarcoMSF - yes, usages of ariaLabel should be converted to be aria-label instead.

We intended to ship this as part of v11, #9535, but it fell out of scope. There are currently 13 usages that need to be refactored: https://carbon-react-explorer.vercel.app/props/ariaLabel

tay1orjones · 2022-12-09T14:33:57Z

I just updated the issue title and body with a new "Plan of action" section outlining the work that needs done.

This issue is a lower priority item for our team, but we'll happily accept PRs if you're open to contributing!

ItsMarcoMSF · 2022-12-14T05:40:44Z

@tay1orjones Thanks for replying to the issue. I'm open to contribute, let me know if you have a timeline in mind!

tay1orjones · 2022-12-20T17:45:04Z

@ItsMarcoMSF Whatever timeline works for you! We won't be able to pick this up for quite some time unfortunately.

It's all in the contributing.md, but at a high level just fork the repo into your personal account, make a branch, make the changes, commit/push up, and open a PR. As this is a change to props on a component you may need to regenerate the public API snapshot via yarn test -u at the root after making your changes, but we can triage that in the pull request reviews.

Let me know if I can help get you up and running. You could start with a single component and just ref this issue #

jsehull · 2023-02-24T15:09:49Z

Hey team - good find with the aria inconsistencies. I'm going to start working on some fixes for this.

jsehull · 2023-02-27T15:28:30Z

@tay1orjones this is a rather large body of work for all of this. I could break it down into multiple PRs for merging to get some things out there door sooner. How would you prefer something like this be handled?

jsehull · 2023-02-27T15:57:22Z

@tay1orjones Can you clarify what to do with the following regarding aria-label?

FilterableMultiSelect: on the list, but does not have it
NumberInput: on the list, but does not have it
Notifications

1. ActionableNotification has aria-label but is not on Issue list above. Update or remove?
1. ToastNotification has the propType listed, but it is not currently used. Update or remove?

InlineCheckbox is not active in Storybook nor is it listed as an subitem under Checkbox. Ignore? Remove?

Note: there is a current request for checkboxes in rows. Is this similar enough that it needs to be kept and could be used towards a solution here instead of trying to pass an "inline prop" to the current Checkbox?
Issue: [Feature]: Checkboxes improperly format as a row#11803

tay1orjones · 2023-02-27T20:33:24Z

@jsehull Yeah, I would sequence it out into separate PRs per component to get it out the door sooner.

The list of components to refactor was generated by searching the codebase for ariaLabel: PropTypes. Every usage listed there needs to be refactored to use aria-label unless the prop is not used (and not spread onto a child via ...other or similar)

InlineCheckbox is used in a few spots - TableSelectRow, TableSelectAllRow, etc. and can be viewed in those DataTable stories using those components.

Also I think we can just ignore any feature requests for now and focus on updating the existing API in the state it's in.

jsehull · 2023-02-28T22:26:34Z

Below are some of my progress updates in case others are monitoring.

Items removed:

NumberInput

Not started:

In process:
3. all 4 table related items (half done)

for some I get the new aria-label working but am having trouble keeping the deprecated ariaLabel functional

Completed code

Done (PR created)

StructuredListWrapper
Dropdown
ComboBox
CodeSnippet
FilterableMultiSelect
OverflowMenu
Notification
InlineCheckbox

jsehull · 2023-03-03T16:30:57Z

8 of 12 completed and pending PR approvals.

4 of 12 remaining:

TableSelectRow
TableSelectAll
TableExpandRow
TableExpandHeader

The table section is proving more challenging, though the fix should be nearly the same. I'm having varying degrees of success getting those working.

At best, for some, I get the new aria-label working but am having trouble keeping the deprecated ariaLabel functional

For now I'm moving on to other Issues. Anyone is welcome to hop in and try these out!

Whoever works on this next can reference recent fixes as the updates should be similar.

Once a solution is found and properly tested, I run the following to ensure that snapshots are updated. It's common to have to fix tests afterwards. DataTable has many tests!

yarn && yarn build && yarn test -u

tw15egan · 2023-03-22T18:19:17Z

Still a few left to complete

TannerS · 2023-03-28T21:34:38Z

@tay1orjones @tw15egan do yall mind if i help out with this?

tw15egan · 2023-03-31T13:39:25Z

Go for it @TannerS 🎉

fitrahmunir · 2023-09-26T14:19:14Z

@tay1orjones @tw15egan May I help by working on this?

tw15egan · 2023-09-26T17:07:57Z

Sure thing @fitrahfm 👍🏻

ItsMarcoMSF added the type: a11y ♿ label Dec 6, 2022

carbon-automation bot added the status: needs triage 🕵️‍♀️ label Dec 6, 2022

carbon-automation bot added the status: waiting for author's response 💬 label Dec 9, 2022

tay1orjones changed the title ~~[a11y]: ariaLabel vs aria-label Naming Convention Mismatch~~ Refactor ariaLabel props to aria-label Dec 9, 2022

This was referenced Feb 28, 2023

refactor(OverflowMenu): ariaLabel to aria-label #13256

Closed

refactor(StructuredList): ariaLabel to aria-label #13261

Merged

jsehull mentioned this issue Mar 2, 2023

refactor(InlineCheckbox): ariaLabel to aria-label #13285

Closed

jsehull mentioned this issue Mar 16, 2023

refactor(InlineCheckbox): update aria-label (NEW) #13364

Merged

kodiakhq bot closed this as completed in #13364 Mar 22, 2023

tw15egan reopened this Mar 22, 2023

tay1orjones mentioned this issue Aug 4, 2023

fix:(datatable): improve screenreader support in expandable rows #14386

Merged

tay1orjones added the afrohacks See https://ibm.biz/afrohacks-hackathon label Oct 30, 2023

This was referenced May 6, 2024

refactor(data-table): data-table #16331

Closed

refactor(data-table): DataTable components to use aria-label instead of ariaLabel #16332

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refactor `ariaLabel` props to `aria-label` #12802

Refactor `ariaLabel` props to `aria-label` #12802

ItsMarcoMSF commented Dec 6, 2022 •

edited by sstrubberg

Package

Browser

Operating System

Package version

React version

Automated testing tool and ruleset

Assistive technology

Components to update

tay1orjones commented Dec 9, 2022 •

edited

tay1orjones commented Dec 9, 2022

ItsMarcoMSF commented Dec 14, 2022

tay1orjones commented Dec 20, 2022

jsehull commented Feb 24, 2023

jsehull commented Feb 27, 2023

jsehull commented Feb 27, 2023 •

edited

tay1orjones commented Feb 27, 2023

jsehull commented Feb 28, 2023 •

edited

jsehull commented Mar 3, 2023

tw15egan commented Mar 22, 2023

TannerS commented Mar 28, 2023

tw15egan commented Mar 31, 2023

fitrahmunir commented Sep 26, 2023

tw15egan commented Sep 26, 2023

Refactor ariaLabel props to aria-label #12802

Refactor ariaLabel props to aria-label #12802

Comments

ItsMarcoMSF commented Dec 6, 2022 • edited by sstrubberg

Package

Browser

Operating System

Package version

React version

Automated testing tool and ruleset

Assistive technology

Description

WCAG 2.1 Violation

Reproduction/example

Steps to reproduce

Code of Conduct

Plan of action

Components to update

Steps to complete for each component

tay1orjones commented Dec 9, 2022 • edited

tay1orjones commented Dec 9, 2022

ItsMarcoMSF commented Dec 14, 2022

tay1orjones commented Dec 20, 2022

jsehull commented Feb 24, 2023

jsehull commented Feb 27, 2023

jsehull commented Feb 27, 2023 • edited

tay1orjones commented Feb 27, 2023

jsehull commented Feb 28, 2023 • edited

Not started:

Completed code

jsehull commented Mar 3, 2023

tw15egan commented Mar 22, 2023

TannerS commented Mar 28, 2023

tw15egan commented Mar 31, 2023

fitrahmunir commented Sep 26, 2023

tw15egan commented Sep 26, 2023

Refactor `ariaLabel` props to `aria-label` #12802

Refactor `ariaLabel` props to `aria-label` #12802

ItsMarcoMSF commented Dec 6, 2022 •

edited by sstrubberg

tay1orjones commented Dec 9, 2022 •

edited

jsehull commented Feb 27, 2023 •

edited

jsehull commented Feb 28, 2023 •

edited