refactor(Dropdown): ariaLabel to aria-label #13272

jsehull · 2023-03-01T20:14:04Z

#12802

Update Dropdown to use the proper aria-label

Changelog

New

n/a

Changed

added deprecated() to the old propType
added new usage for aria-label
kept backwards compatibility so that both aria versions can work with ariaLabel (deprecated) and aria-label (new).
updated tests API

Removed

n/a

Testing / Reviewing

Open Storybook > Dropdown in browser for Dev Tool testing
Open Dropdown.stories.js in code
Add one aria label type at a time to the component in story code.

1. Only one version can be active at a time.
- aria-label (new)
- ariaLabel (deprecated))
1. Be sure to find the correct usage for the given component as explained in code or on the story itself
1. Test examples below.
- Note: For my testing, I duplicate the lines and then comment out the one I am not using. The image blow does NOT yet comment out one of the test lines:

confirm that both propTypes still display in Dev Tools as intended
confirm that Storybook > Docs > Component API contains both propTypes as options

netlify · 2023-03-01T20:18:21Z

✅ Deploy Preview for carbon-components-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`8edecbb`
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-components-react/deploys/640fc01cfab00b0008a88871
😎 Deploy Preview	https://deploy-preview-13272--carbon-components-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

netlify · 2023-03-01T20:19:09Z

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	`8edecbb`
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/640fc01c5946a40008c89601
😎 Deploy Preview	https://deploy-preview-13272--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

…osed (#13195) * fix(menu): only clear registered items when root is closing * fix(menu): auto-cleanup registered items --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* feat(theme): add $icon-interactive token * Update packages/themes/src/tokens/v11TokenGroup.js Co-authored-by: Alison Joseph <[email protected]> * Update packages/themes/src/tokens/__tests__/metadata-test.js Co-authored-by: Alison Joseph <[email protected]> * Update packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap * Update packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap * chore(snapshot): update snapshots --------- Co-authored-by: Alison Joseph <[email protected]> Co-authored-by: Francine Lucca <[email protected]>

* feat(TextInput): add typescript types * fix(Text Input): submcompnent workaround + add helperID prop

* chore(format): format Popover file * chore(format): format ListBox files * chore(format): update format command

Co-authored-by: tay1orjones <[email protected]>

* fix(toggle): make props.labelText optional * docs(toggle): add 'with accessible labels' story * test(toggle): update public api snapshot --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

…key improvements (#13173) * fix(MultiSelect): a11y - move filter tag as sibling of menu trigger * fix(Multiselect): remove tag from tab order * fix(FilterableMultiselect): remove clear, tag from tab order * fix(ComboBox): retain input value when menu is open and esc is pressed * fix(FilterableMultiSelect): a few more UX tweaks * style(MultiSelect): update styles to fix invalid issues when focused * style(FluidMultiselect): adjust focus styles when invalid * chore(log): remove console log --------- Co-authored-by: Andrea N. Cardona <[email protected]>

* docs(style): add section on authoring inline styles * docs(style): rephrase inline style docs * docs(style): typo --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* refactor(ComboBox): ariaLabel to aria-label * fix: formatting --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Andrea N. Cardona <[email protected]>

* fix(tabs): remove max-width * docs(tabs): add max width guidance * docs(tabs): format --------- Co-authored-by: Andrea N. Cardona <[email protected]> Co-authored-by: TJ Egan <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* style(MultiSelect): update styles to fix invalid issues when focused * style(FluidMultiselect): adjust focus styles when invalid * chore(log): remove console log * fix(ListBox): align open behaviors across ListBox components --------- Co-authored-by: Andrea N. Cardona <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

…13235) * refactor(typescript): type annotations on Select* Add Typescript annotations to Select, SelectItem and SelectItemGroup. * fix(lint): removed unused imports Left SelectItem and SelectItemGroup in the imports after using them for testing. Removed. * fix(Select-test): update label to labelText Previously removed label as it was not a property of Select. On recommendation of maintainers reintroduced using labelText. * Apply suggestions from code review Co-authored-by: Andrea N. Cardona <[email protected]> * Follow up to change suggestions --------- Co-authored-by: Andrea N. Cardona <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Co-authored-by: Andrea N. Cardona <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: TJ Egan <[email protected]>

Co-authored-by: Alessandra Davila <[email protected]>

* feat(tabTipPopover): add tabTip to Popover * feat(tabTipPopover): add tab-tip styles, story * test(Popover): add e2e tests * style(Popover): adjust storybook styles * fix(Popover): add new prop to proptypes * chore(snapshot): update snapshots * docs(Popover): add close on esc to story * docs(Popover): fix typo --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

…13254) Bumps [minimist](https://github.com/minimistjs/minimist) from 1.2.5 to 1.2.8. - [Release notes](https://github.com/minimistjs/minimist/releases) - [Changelog](https://github.com/minimistjs/minimist/blob/main/CHANGELOG.md) - [Commits](minimistjs/minimist@v1.2.5...v1.2.8) --- updated-dependencies: - dependency-name: minimist dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: TJ Egan <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* refactor(StructuredListWrapper): ariaLabel to aria-label * fix(StructuredList test): use 'aria-label' --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Co-authored-by: TJ Egan <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* feat(TableToolbar): add typescript typings * feat(TableToolbarAction): add typescript typings * feat(TableToolbarContent): change to `tsx` * feat(TableToolbarMenu): add typescript typings * feat(OverflowMenuItem): add typescript typings * fix: format --------- Co-authored-by: Francine Lucca <[email protected]> Co-authored-by: Francine Lucca <[email protected]>

Forward ref to input node of RadioTile, such that it behaves the same as other form inputs. Co-authored-by: Francine Lucca <[email protected]>

* feat(ContentSwitcher): preliminary unstable refactor * feat: added prefix and id prefix examples * fix: delete content switcher directory * feat: update demos * Update examples/id-prefix/src/App.jsx Co-authored-by: Francine Lucca <[email protected]> * Update packages/react/src/components/IdPrefix/index.js * feat: added docs * fix: update context * fix: yarn install * fix: update context 2 * chore: update yarn packages * chore: udpate yarn carbon/react --------- Co-authored-by: Francine Lucca <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* feat(DataTableSkeleton): 12513 - Add TS types for props * fix: yarn run format --------- Co-authored-by: Francine Lucca <[email protected]> Co-authored-by: Francine Lucca <[email protected]>

* chore: wip * chore: wip * test(datatable): refactor to use RTL * chore: typo --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Co-authored-by: Francine Lucca <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

…13302) * docs(Storybook): update storybook config so actions display properly * fix(DatePicker): change action names --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Co-authored-by: Andrea N. Cardona <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* fix(CodeSnippet): a11y tabstop + attributes * fix(CSS): add Carbon CSS to focus outline * refactor(CodeSnippet): relocate parens

* fix(CodeSnippet): a11y tabstop + attributes * fix(CSS): add Carbon CSS to focus outline * refactor(OverflowMenu): ariaLabel to aria-label NEW * Delete CodeSnippet.js error from a rebase/merge * Delete _code-snippet.scss error from rebase/merge * revert(missingFiles): they'll be ignored on merge --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* test(accordion): refactor from enzyme to RTL * chore(test): remove enzyme --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Co-authored-by: Taylor Jones <[email protected]>

jsehull · 2023-03-10T20:00:20Z

I don't think the conflict here is solely TS related, as it seems to duplicate a section, but since it is TS I'm not familiar with what needs to happen to resolve. Any suggestions?

francinelucca · 2023-03-10T20:45:27Z

Hi 👋🏼 @jsehull. Typesript files' conflicts can be resolved the same way as in a .js file, shouldn't make a difference

* feat(TextArea): add warning state * chore: update snapshots * fix: textarea error bottom border and default value in story * chore: hide resize fluid textarea invalid and warn --------- Co-authored-by: Andrea N. Cardona <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* refactor: convert TextAreaSkeleton to TypeScript * chore: remove unneeded omit * chore: remove unneeded omit --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* refactor(Notification): ariaLabel to aria-label * fix(Notification): rm stories default dupes * fix(InlineNotification): rm deprecated prop --------- Co-authored-by: Francine Lucca <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

…dropbox

This reverts commit 15a136c.

refactor(Dropdown): ariaLabel to aria-label

7df5143

jsehull requested review from a team as code owners March 1, 2023 20:14

jsehull requested review from tw15egan and aledavila March 1, 2023 20:14

janhassel and others added 23 commits March 2, 2023 15:48

fix(menu): fix arrow key navigation when onClose is called but not cl…

22d87ca

…osed (#13195) * fix(menu): only clear registered items when root is closing * fix(menu): auto-cleanup registered items --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

feat(TextInput): add typescript types (#13142)

e1d4884

* feat(TextInput): add typescript types * fix(Text Input): submcompnent workaround + add helperID prop

chore(format): format Popover, Listbox files (#13284)

07b5f48

* chore(format): format Popover file * chore(format): format ListBox files * chore(format): update format command

chore(release): v11.24.0 (#13282)

07168bf

Co-authored-by: tay1orjones <[email protected]>

fix(toggle): make props.labelText optional (#13196)

5aff418

* fix(toggle): make props.labelText optional * docs(toggle): add 'with accessible labels' story * test(toggle): update public api snapshot --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

docs(style): add section on authoring inline styles (#13289)

c38e1a8

* docs(style): add section on authoring inline styles * docs(style): rephrase inline style docs * docs(style): typo --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

refactor(ComboBox): ariaLabel to aria-label (#13273)

b0f39f3

* refactor(ComboBox): ariaLabel to aria-label * fix: formatting --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Andrea N. Cardona <[email protected]>

refactor(FilterableMultiSelect): ariaLabel to aria-label (#13276)

b4d3e74

Co-authored-by: Andrea N. Cardona <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: TJ Egan <[email protected]>

fix(SkeletonText): prevent negative px width values (#13270)

13d5afc

Co-authored-by: Alessandra Davila <[email protected]>

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

8c8e942

* refactor(StructuredListWrapper): ariaLabel to aria-label * fix(StructuredList test): use 'aria-label' --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

feat(DataTable): add rowIds to the sortRows extra params list (#13236)

af37b74

Co-authored-by: TJ Egan <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

fix(RadioTile): forward ref to input node (#13130)

21536a5

Forward ref to input node of RadioTile, such that it behaves the same as other form inputs. Co-authored-by: Francine Lucca <[email protected]>

feat(DataTableSkeleton): 12513 - Add TS types for props (#13245)

5f0172d

* feat(DataTableSkeleton): 12513 - Add TS types for props * fix: yarn run format --------- Co-authored-by: Francine Lucca <[email protected]> Co-authored-by: Francine Lucca <[email protected]>

test(datatable): refactor to use RTL (#13294)

885108d

* chore: wip * chore: wip * test(datatable): refactor to use RTL * chore: typo --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

alisonjoseph and others added 2 commits March 8, 2023 19:02

fix(modal): aria-label a11y bug (#13242)

c74db90

Co-authored-by: Francine Lucca <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

test(HeaderSideNavItems): add tests (#13303)

94ebea3

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

francinelucca approved these changes Mar 8, 2023

View reviewed changes

francinelucca added the status: one more review 👀 label Mar 8, 2023

tw15egan and others added 7 commits March 9, 2023 00:27

docs(Storybook): update storybook config so actions display properly (#…

f4b3903

…13302) * docs(Storybook): update storybook config so actions display properly * fix(DatePicker): change action names --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

fix(tabs): deprecate light prop (#13262)

ad3ca2f

Co-authored-by: Andrea N. Cardona <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

fix(menu): focus first item when opened (#13277)

0229bf0

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

fix(CodeSnippet): a11y tabstop + attributes (#13310)

2d94846

* fix(CodeSnippet): a11y tabstop + attributes * fix(CSS): add Carbon CSS to focus outline * refactor(CodeSnippet): relocate parens

chore(test): remove enzyme (#13316)

184d1a9

* test(accordion): refactor from enzyme to RTL * chore(test): remove enzyme --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

refactor(CodeSnippet): ariaLabel to aria-label (#13274)

4886cb9

Co-authored-by: Taylor Jones <[email protected]>

tw15egan added the status: ready to merge 🎉 label Mar 10, 2023

tw15egan approved these changes Mar 10, 2023

View reviewed changes

alisonjoseph and others added 6 commits March 13, 2023 14:01

refactor: convert TextAreaSkeleton to TypeScript (#13275)

997d7e2

* refactor: convert TextAreaSkeleton to TypeScript * chore: remove unneeded omit * chore: remove unneeded omit --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

fix(batchToolTips): make tooltips on batch visible (#13328)

4871a96

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Merge branch '12802/dropbox' of github.com:jsehull/carbon into 12802/…

b80e086

…dropbox

fix(format): tsx formatting

8edecbb

kodiakhq bot merged commit 15a136c into carbon-design-system:main Mar 14, 2023

tw15egan added a commit that referenced this pull request Mar 14, 2023

Revert "refactor(Dropdown): ariaLabel to aria-label (#13272)"

f9a384e

This reverts commit 15a136c.

jsehull deleted the 12802/dropbox branch March 21, 2023 13:58

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor(Dropdown): ariaLabel to aria-label #13272

refactor(Dropdown): ariaLabel to aria-label #13272

jsehull commented Mar 1, 2023 •

edited

Loading

netlify bot commented Mar 1, 2023 •

edited

Loading

netlify bot commented Mar 1, 2023 •

edited

Loading

jsehull commented Mar 10, 2023 •

edited

Loading

francinelucca commented Mar 10, 2023

refactor(Dropdown): ariaLabel to aria-label #13272

refactor(Dropdown): ariaLabel to aria-label #13272

Conversation

jsehull commented Mar 1, 2023 • edited Loading

Changelog

Testing / Reviewing

netlify bot commented Mar 1, 2023 • edited Loading

✅ Deploy Preview for carbon-components-react ready!

netlify bot commented Mar 1, 2023 • edited Loading

✅ Deploy Preview for carbon-elements ready!

jsehull commented Mar 10, 2023 • edited Loading

francinelucca commented Mar 10, 2023

jsehull commented Mar 1, 2023 •

edited

Loading

netlify bot commented Mar 1, 2023 •

edited

Loading

netlify bot commented Mar 1, 2023 •

edited

Loading

jsehull commented Mar 10, 2023 •

edited

Loading