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

Jump to bottom

[a11y]: Provide clearer labellling for Codesnippet copy buttons #10526

Closed
dakahn opened this issue Jan 25, 2022 · 2 comments
Closed

[a11y]: Provide clearer labellling for Codesnippet copy buttons #10526

dakahn opened this issue Jan 25, 2022 · 2 comments
Labels
component: code-snippet role: dev 🤖 severity: 3 https://ibm.biz/carbon-severity type: a11y ♿ type: bug 🐛

Comments

@dakahn
Copy link
Contributor

dakahn commented Jan 25, 2022

Two accessibility improvements were suggested for Codesnippet in the Carbon Accessibility Guild:

  • <button> elements should be aria labelled to describe their functionality. for example "Copy to clipboard". These buttons can be aria-describedby the copyable text itself
  • inline, single line, and multiline copy buttons should show tooltips on hover/focus
@mbgower
Copy link

mbgower commented Jan 26, 2022 •
edited
Loading

there are some considerations for the accessible name needing to include the text of the button. So inline code snippets may need a bit more consideration, as aria-describedby does not become part of accessible name. I suggest we work through possible approaches

@tay1orjones tay1orjones added the severity: 3 https://ibm.biz/carbon-severity label Dec 12, 2022
@tay1orjones tay1orjones moved this to ⏱ Backlog in Design System Dec 12, 2022
@guidari
Copy link
Contributor

guidari commented Jan 9, 2024

Hey @dakahn
Looks like your issue have already been adressed by the team. Also in the code the aria-labels are there.

Is tehre anything I am missing here? Otherwise we can close this issue.

Screenshot 2024-01-09 at 17 19 26

@github-project-automation github-project-automation bot moved this from ⏱ Backlog to ✅ Done in Design System Apr 10, 2024
kennylam pushed a commit to kennylam/carbon that referenced this issue Jul 30, 2024
@annawen1 @IgnacioBecerra
feat(ui-shell): sync with @carbon/react version (carbon-design-system…
560a753 
…#10526)

* feat(ui-shell): ui-shell carbon v11 sync

* feat(ui-shell): header side nav items and new props

* feat(ui-shell): side-nav overlay

* feat(ui-shell): active header menu

* feat(ui-shell): add box-sizing to switcher link

* feat(ui-shell): import grid styles

* Update packages/carbon-web-components/src/components/ui-shell/header-side-nav-items.ts

Co-authored-by: Ignacio Becerra <[email protected]>

* feat(ui-shell): address some of the feedback

* feat(ui-shell): header styles

* feat(ui-shell): set correct tabbing order for sidenav

* feat(ui-shell): fix rail focus and overlay

* feat(ui-shell): story book content

* feat(ui-shell): remove unnecessary test

* feat(ui-shell): add elements to index

* feat(ui-shell): adjust focus order for sidenav,actions,nav

---------

Co-authored-by: Ignacio Becerra <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
component: code-snippet role: dev 🤖 severity: 3 https://ibm.biz/carbon-severity type: a11y ♿ type: bug 🐛
Projects
Design System
Archived in project
Milestone
No milestone
Development

No branches or pull requests
7 participants
@alisonjoseph @tay1orjones @mbgower @sstrubberg @abbeyhrt @dakahn @guidari