Skip to content

feat(ContainedList): fix a11y issues with story#14192

Merged
kodiakhq[bot] merged 2 commits into
carbon-design-system:mainfrom
tw15egan:contained-list-tag
Jul 13, 2023
Merged

feat(ContainedList): fix a11y issues with story#14192
kodiakhq[bot] merged 2 commits into
carbon-design-system:mainfrom
tw15egan:contained-list-tag

Conversation

@tw15egan

@tw15egan tw15egan commented Jul 11, 2023

Copy link
Copy Markdown
Contributor

Closes #13948

Adds an aria-label so the Tag makes more sense when using a screenreader and viewing the With List Title Decorators story

Changelog

New

  • aria-label added to story to give context to Tag

Testing / Reviewing

Enable your screenreader and ensure the 4 has more context than simply announcing 4

@tw15egan tw15egan requested review from a team as code owners July 11, 2023 17:18
@tw15egan tw15egan requested review from alisonjoseph and guidari July 11, 2023 17:18
@netlify

netlify Bot commented Jul 11, 2023

Copy link
Copy Markdown

Deploy Preview for carbon-components-react ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 1672385
🔍 Latest deploy log https://app.netlify.com/sites/carbon-components-react/deploys/64b0121e24408f0008ac3719
😎 Deploy Preview https://deploy-preview-14192--carbon-components-react.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@netlify

netlify Bot commented Jul 11, 2023

Copy link
Copy Markdown

Deploy Preview for carbon-elements ready!

Name Link
🔨 Latest commit 1672385
🔍 Latest deploy log https://app.netlify.com/sites/carbon-elements/deploys/64b0121ece71940008e52dec
😎 Deploy Preview https://deploy-preview-14192--carbon-elements.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@janhassel

Copy link
Copy Markdown
Member

@tw15egan Just chiming in from the design side: the use case of a tag displaying the number of items in a list was just used as one example of many possibilities of what could be shown in the header of a ContainedList. The design intent was essentially to just have a slot of fully customizable content.

Some other use cases we've seen include:

  • A tooltip behind the label for further explanation
  • A button to perform one action on all items within the list
  • A timestamp for a the group of items
  • A combination of the above

I can share some designs via slack with the component in action that I can't post publicly.

Maybe when building out the stories I should've been more clear of what is just an example use case and what is a locked down part of the component. I wonder how we could make that more clear, visually 🤔

@tw15egan tw15egan force-pushed the contained-list-tag branch from c7f66da to 6c49e7e Compare July 12, 2023 14:26
@tw15egan

Copy link
Copy Markdown
Contributor Author

@janhassel that makes sense! I wasn't sure if it was part of the spec, I can just fix the a11y violations and leave the component as is 👍🏻 thanks for confirming!

@tw15egan tw15egan changed the title feat(ContainedList): add prop to generate title decorator feat(ContainedList): fix a11y issues with story Jul 12, 2023
@kodiakhq kodiakhq Bot merged commit a696203 into carbon-design-system:main Jul 13, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[a11y]: ContainedList [with list title decorators] - number next to list title

4 participants