Carbon: AVT1 <nav> sections must have unique labels specified with 'aria-label' or 'aria-labelledby' in tabs componenent

Created on 18 Oct 2019  ·  14Comments  ·  Source: carbon-design-system/carbon

===== ENVIRONMENT =====
Test Tool Type: DAP
Checkpoint: 2.4.1 Bypass Blocks
IBM Guidance: https://www.ibm.com/able/guidelines/ci162/bypass_blocks.html
Carbon version: V9

===== DEFECT DESCRIPTION =====
The rule detected multiple navigation landmarks without unique labels.

=====STEPS TO REPRODUCE =====

  1. Go to https://dev.console.test.cloud.ibm.com/catalog
  2. Login with IBM id
  3. Click Block Storage for VPC card. See the below screenshot, have 1 violation that say 'navigation' section is missing unique label specified with 'aria-label' or 'aria-labelledby'.

===== EXPECTED RESULT =====
https://aat.w3ibm.mybluemix.net/token/fdf96dfd-3031-4561-94cb-667da8ff38cb/313576cf-5c13-4f99-9a98-7e0247653a2e/archives/2019SeptDeploy//doc/w3/help/en-US/idhi_accessibility_check_g1164.html

Screenshot:
image

low react a11y ♿ bug 🐛 9

All 14 comments

@carmacleod Carolyn, the issue found in V9 version. Could you please also make fix into V9? Thanks.

@joshblack @dakahn @emyarod Would it be possible to have #2853 backported to v9?

@carmacleod I think it'd be a fair candidate to back-port, although I'm not sure if there is a team member who can pick it up at the moment. Would folks in this issue have the time to back-port the changes? Should be a one-line change if I understand things correctly.

@carmacleod Still no one assigned, can you assign somebody to fix this issue?

@dakahn The defect is blocking the compliance of Cloud Platform and also multiple services. Can you please help me understand why this defect is on low priority? @shinytoyrobots

@dhyliu @cmqchen This issue is in our backlog with a priority of low. Legacy versions of Carbon are fixed as our bandwidth allows, but do not take priority over our v10 backlog. That said we're always accepting PRs if you need a fix sooner rather than later.

@dakahn, Thank you for the advice. But are you able to raise the priority for this issue? As I said it is blocking accessibility compliance for GA. Multiple services are looking for a quick fix to this issue into the V9 package.

@dhyliu diving into this now, it seems like <nav> is no longer used in the latest versions of v9:

https://github.com/carbon-design-system/carbon-components-react/blob/c3bf0123a2a98ca84acfc7e86e69840eaf57a89e/src/components/Tabs/Tabs.js#L256

Is it possible that these teams aren't using the latest versions from v6 of carbon-components-react?

@joshblack Thanks for the information. I will ask dev to use the latest Carbon version to fix this issue.

@joshblack They said they are already using the latest version 6.116.2 of carbon-components-react.
We are still seeing <nav> in the latest v6 code.
https://github.com/carbon-design-system/carbon-components-react/blob/v6/src/components/Tabs/Tabs.js#L259

@icemanlily got it, my mistake!

@joshblack I tried to add aria-label to tabs tag. Seems it works. So I think we can close this issue. Thanks for your support
image

@icemanlily Great, but please remember to take that code out when you upgrade to Carbon v10. :)

Was this page helpful?
0 / 5 - 0 ratings

Related issues

mouadcherkaoui picture mouadcherkaoui  ·  3Comments

kalyanixraut picture kalyanixraut  ·  3Comments

windgaucho picture windgaucho  ·  3Comments

joshblack picture joshblack  ·  3Comments

JordanWSmith15 picture JordanWSmith15  ·  3Comments