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

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

Closed
annawen1 opened this issue Aug 25, 2021 · 1 comment
Closed

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

annawen1 opened this issue Aug 25, 2021 · 1 comment
Assignees
@annawen1
Labels
adopter: Innovation Team used when component or pattern will be used by this adopter bug Something isn't working dev Needs some dev work package: web components Work necessary for the IBM.com Library web components package severity 3 Affects minor functionality, has a workaround
Milestone
Sprint 21-18

Comments

@annawen1
Copy link
Member

annawen1 commented Aug 25, 2021 •
edited
Loading

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
@annawen1 annawen1 added bug Something isn't working adopter: Innovation Team used when component or pattern will be used by this adopter labels Aug 25, 2021
@RobertaJHahn RobertaJHahn added the dev Needs some dev work label Aug 25, 2021
@proeung proeung added package: web components Work necessary for the IBM.com Library web components package severity 3 Affects minor functionality, has a workaround labels Aug 25, 2021
@annawen1 annawen1 changed the title [Cloud-masthead]: Tab content not appearing for arabic masthead data [Cloud-masthead]: Adjust tabs to not use title as the identifier for related tab content, use unique ID instead Aug 25, 2021
@proeung
Copy link
Contributor

proeung commented Aug 25, 2021

@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.

@RobertaJHahn RobertaJHahn added this to the Sprint 21-18 milestone Aug 25, 2021
@annawen1 annawen1 mentioned this issue Aug 31, 2021
Merged
kodiakhq bot pushed a commit that referenced this issue Aug 31, 2021
@annawen1
fix(cloud-masthead): set unique id for megamenu tabs instead of using…
9008a53 
… title (#7024)

### Related Ticket(s)

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

### Description

Ran into an issue with the cloud megamenu tabs when the same tab title is used in two different megamenus. This causes an issue because the current logic uses the title as the identifier of the tabs. Solution is to use a unique id for the tabs instead so no issues occur if the same title is used in multiple megamenus.

**BEFORE:**
<img width="850" alt="Screen Shot 2021-08-31 at 1 09 35 PM" src="https://user-images.githubusercontent.com/54281166/131546404-3afc520d-cb9a-4fc7-ae08-149c316e9214.png">


**AFTER:**
<img width="837" alt="Screen Shot 2021-08-31 at 1 06 59 PM" src="https://user-images.githubusercontent.com/54281166/131546142-5cb53e96-8bbc-4405-8d0c-a53133c5a404.png">


### Changelog

**Changed**

- set a unique id using the parent menu item key + the tab key


<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "package: styles": Carbon Expressive -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@annawen1 annawen1

Labels
adopter: Innovation Team used when component or pattern will be used by this adopter bug Something isn't working dev Needs some dev work package: web components Work necessary for the IBM.com Library web components package severity 3 Affects minor functionality, has a workaround
Projects
None yet
Milestone
Sprint 21-18
Development

No branches or pull requests
9 participants
@kennylam @jeffchew @proeung @photodow @emyarod @shixiedesign @ljcarot @RobertaJHahn @annawen1