search

carbon-design-system / carbon-for-ibm-dotcom

Carbon for IBM.com is based on the Carbon Design System for IBM
https://www.ibm.com/standards/carbon/
Apache License 2.0
264 stars 157 forks source link

[Cloud-masthead]: Adjust tabs to not use title as the identifier for related tab content, use unique ID instead #6975

Closed annawen1 closed 3 years ago

annawen1 commented 3 years ago

Detailed description

Describe in detail the issue you're having.

The first tab from the Solutions menu is not showing any content when using the arabic masthead data. The content is rendered with the hidden attribute still applied to it.

Appears to only be affecting the arabic locales.

This is occurring due to the titles of the first tabs in both "Products" and "Solutions" being the same. The solution is to not use the title as an ID for the tabs.

Screen Shot 2021-08-25 at 9 40 59 AM

Steps to reproduce the issue

  1. Issue can be viewed at the translations deploy preview: https://ibm-translations-cloud.s3-web.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/417/index.html?cc=ae&lc=ar
  2. Open the second menu item from the left in masthead
  3. Notice the content for the first tab is not being displayed
proeung commented 3 years ago

@annawen1 Thanks for opening this issue! I think adding a unique ID instead of using the title to connect the tab item with the content would eliminate the special case that we've seen in the Arabic translation.

I'm marking this issue as "Severity 3" and slated for the v.1.25 release.