[Tab Extended with Media]: Enable Lightbox Media Viewer carousel feature (prototype)

[proeung]

Engineering info:

• Innovation Team engineer:
• Innovation Team JIRA Ticket: https://jsw.ibm.com/browse/ADCMS-2408
• DPO consulting engineer: N/A

---

The problem

• Within the new Product Overview v2 template there's a need to have the image within the Tab Extended with Media be clickable through the Lightbox Media Viewer carousel.
• The purpose of this feature is to take users through the content of the different tabs within the lightbox media viewer.
• This would eliminate multiple clicks and provide a better user experience once the lightbox is opened.
• This is a follow up issue to https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6372.

The solution

• @oliviaflory @kennylam I'd like to get a review from you both regarding this request.

Application/website

AEM

Business priority

Medium Priority = upcoming release but is not pressing

What time frame would this ideally be needed by (if applicable)

@jwitkowski79 Can you provide a time frame from the Interface Team perspective?

Examples

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate issues

[oliviaflory]

Adding this thought from the lightbox media viewer with carousel PR:

I think we will need to consider where the user lands once they close the carousel. I'm assuming if they closed the carousel at slide 3/5, they should land on tab 3/5 within the page. I can comment on the issue you tagged above as well.

[kennylam]

I think this probably belongs in the Carbon for AEM library. This is a bit of an awkward experience, in my opinion, and I'd rather not add something so large and untested. @oliviaflory what do you think?

[oliviaflory]

@kennylam agreed, I would love to have AEM test this first to ensure it's a good experience/pattern for users before we add this to Carbon for IBM.com cc: @jwitkowski79

[jwitkowski79]

@oliviaflory @kennylam @proeung Hello! Yep. We don't have an issue testing this in AEM first.

[proeung]

@kennylam Let's regroup on this as I'd like to get a better understanding of why you think this is an awkward experience and how we can best bring this into Carbon for AEM.

[kennylam]

@proeung My opinions about the experience aside, we'd like to start following the governance process and not simply add new features to our components. Since these features satisfy a requirement for one particular adopter, it may not be right for all, and as such shouldn't be part of the core component. What we're trying to do is avoid having our components become bloated with features that deviate too far from their original intent.

[proeung]

@kennylam I completely understand. We'll need some consulting support to bring this feature into Carbon for AEM. Is this something that you and your team can provide?

cc: @andy-blum

[andy-blum]

It might be a good idea to bring the accessibility testers into this conversation as well before any kind of plan is formulated to get their suggestions.

Every level of 'hiding' content we add (hidden in a different tab, hidden inside a lightbox, hidden on the next carousel slide) is another way we make the site harder to navigate for assistive tech users, and is another wrinkle we have to make sure is fully perceivable, operable, understandable, and robust to all different sorts of users, devices and interaction methods.

[kennylam]

@andy-blum Agree completely. This is actually one of our main concerns.

[proeung]

@kennylam I'm going to move this ticket back to future planning, but do you mind adding this to the next engineering office hour and inviting both @andy-blum and I, so that we can review this with your accessibility experts?

[kennylam]

Sounds good!

[jwitkowski79]

@proeung @kennylam Completely agree on reviewing for any accessibility concerns. Could you please keep our team in the loop on the outcome of that meeting? We'd love to take a second look at this as needed to address any concerns that come out of the review. Thanks!!!

[proeung]

Notes from the "Carbon for IBM.com issue review with Innovation team" meeting with @kennylam

• Moving this feature into a POC so that we can have an example up so that the QA team can test and identify accessibility concerns.
• The results coming out of the POC will determine whether this feature will be a good fit to bring into the core component as part of the C4IBM library.

[jwitkowski79]

@andy-blum @proeung Hello! Olivia and I discussed this during office hours 7/27 and there's some exploration from the design side that our team is going to do. Can we hold on the POC until our team meets to discuss this next week?

[proeung]

@jwitkowski79 Sounds good! @andy-blum has a prototype PR (see - link) opened for adding the carousel functionality to the "Tab Extended" component which we can use for the design review and accessibility evaluation purposes.