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.

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

feat(masthead): update simple megamenu #12108

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

andy-blum
Copy link
Member

Related Ticket(s)

https://jsw.ibm.com/browse/ADCMS-6733

Description

Updates the "simple" megamenu to add a title element to the left-side portion.

Changelog

Changed

  • Updated simple megamenu layout

@andy-blum andy-blum added the test: CDN preview used for generating @carbon/ibmdotcom-web-components CDN for testing label Nov 18, 2024
@andy-blum andy-blum requested a review from a team as a code owner November 18, 2024 18:53
@andy-blum andy-blum requested review from m4olivei, bruno-amorim, marcelojcs and Valentin-Sorin-Nicolae and removed request for a team November 18, 2024 18:53
Copy link

netlify bot commented Nov 18, 2024

Deploy Preview for ibm-dotcom-web-components-react-wrap ready!

Name Link
🔨 Latest commit de869b4
🔍 Latest deploy log https://app.netlify.com/sites/ibm-dotcom-web-components-react-wrap/deploys/673de07f13728e0008bfb0c0
😎 Deploy Preview https://deploy-preview-12108--ibm-dotcom-web-components-react-wrap.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

netlify bot commented Nov 18, 2024

Deploy Preview for ibm-dotcom-web-components ready!

Name Link
🔨 Latest commit de869b4
🔍 Latest deploy log https://app.netlify.com/sites/ibm-dotcom-web-components/deploys/673de07f7b8ff60008cd098a
😎 Deploy Preview https://deploy-preview-12108--ibm-dotcom-web-components.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@ibmdotcom-bot
Copy link
Contributor

ibmdotcom-bot commented Nov 18, 2024

Deploy preview created for package IBM.com Web Components Deploy Preview CDN:
https://ibmdotcom-cdn.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/12108/index.html

Built with commit: de869b404c8e82e583b1b3c2eb115787443d930a

Copy link
Contributor

@m4olivei m4olivei left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure what level of design review this needs, but quick look and it seems the design intent for the left indentation of the new title is off.

Figma:
image

Storybook:
image

`
: null}
<c4d-megamenu-left-navigation>
<span>${title}</span>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this supposed to be a link? Also, have we considered if this should be a heading?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It should not be a link, I considered a heading, but wasn't sure if that was the right semantics. Considering also adding aria-hidden to make this a presentation-only element.

Copy link
Contributor

@m4olivei m4olivei Nov 21, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Right, on closer look that seems fine. Especially considering the <c4d-megamenu-right-navigation> can have an <h2> (see below). I mean, if design is saying that the repetition is useful for sighted users, it should follow that its useful for non-sighted users, so I'd avoid using aria-hidden.

Also we should probably add a part attribute to the <span>.

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
priority: medium test: CDN preview used for generating @carbon/ibmdotcom-web-components CDN for testing
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants