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

[Tabs Extended]: Tabs that aren't open by default are unusable on iOS with VoiceOver #8357

Closed
2 tasks done
andy-blum opened this issue Feb 22, 2022 · 0 comments · Fixed by #8365
Closed
2 tasks done

[Tabs Extended]: Tabs that aren't open by default are unusable on iOS with VoiceOver #8357

andy-blum opened this issue Feb 22, 2022 · 0 comments · Fixed by #8365
Assignees
@andy-blum
Labels
bug Something isn't working dev Needs some dev work owner: Innovation Team used when the engineering work will be done by Hybrid Cloud with DDS engineers as consultants package: web components Work necessary for the IBM.com Library web components package severity 2 Affects major functionality, has a workaround

Comments

@andy-blum
Copy link
Member

andy-blum commented Feb 22, 2022 •
edited by annawen1
Loading

Engineering info:

Description

When using iOS (iPad device) where tabs-extended is displayed with desktop design, with Voiceover, there is no way to change the active tab in the tabs-extended component. I think this may be related to using links in place of buttons, but regardless, the tabs component hides page content from screen reader users and prevents them from accessing content or links on hidden-by-default tabs.

For an example of how tabs should work per the W3, see this codepen

Component(s) impacted

tabs-extended, tabs-extended-with-media

Browser

Safari

Carbon for IBM.com version

Latest

Severity

Severity 2 = Aspects of design is broken, and impedes users in a significant way, but there is a way to complete their tasks. Affects major functionality, has a workaround.

Application/website

carbon-for-ibmdotcom

Package

@carbon/ibmdotcom-web-components

CodeSandbox example

https://carbon-design-system.github.io/carbon-for-ibm-dotcom/canary/web-components/iframe.html?id=components-tabs-extended--default

Steps to reproduce the issue (if applicable)

Attempt to use tabs on iOS with VO active

Release date (if applicable)

No response

Code of Conduct
@andy-blum andy-blum added the bug Something isn't working label Feb 22, 2022
@andy-blum andy-blum added package: web components Work necessary for the IBM.com Library web components package severity 1 Affects major functionality, no workaround severity 2 Affects major functionality, has a workaround and removed severity 1 Affects major functionality, no workaround labels Feb 22, 2022
@proeung proeung added the owner: Innovation Team used when the engineering work will be done by Hybrid Cloud with DDS engineers as consultants label Feb 22, 2022
@andy-blum andy-blum mentioned this issue Feb 23, 2022
Merged
@proeung proeung mentioned this issue Feb 24, 2022
Closed
2 tasks
@jeffchew jeffchew added the dev Needs some dev work label Mar 1, 2022
@kodiakhq kodiakhq bot closed this as completed in #8365 Mar 8, 2022
kodiakhq bot pushed a commit that referenced this issue Mar 8, 2022
@andy-blum
fix(tabs-extended): change anchor-based tabs to button-based tabs (#8365
2225471 
)

### Related Ticket(s)

Fixes #8357 

### Description

Fixes an issue where iOS on tablet couldn't use tabs.

### Changelog

**Changed**

- changes `<a>` elements to `<button>` elements in tabs so iOS devices getting the desktop-style layout can navigate with voiceover
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@andy-blum andy-blum

Labels
bug Something isn't working dev Needs some dev work owner: Innovation Team used when the engineering work will be done by Hybrid Cloud with DDS engineers as consultants package: web components Work necessary for the IBM.com Library web components package severity 2 Affects major functionality, has a workaround
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(tabs-extended): change anchor-based tabs to button-based tabs andy-blum/carbon-for-ibm-dotcom
7 participants
@jeffchew @proeung @RichKummer @ljcarot @IgnacioBecerra @andy-blum @oliviaflory