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

[Masthead v2.1.0]: Phase 2 - Add improvements to Contact us CTA button #9369

Closed
proeung opened this issue Sep 14, 2022 · 3 comments
Closed

[Masthead v2.1.0]: Phase 2 - Add improvements to Contact us CTA button #9369

proeung opened this issue Sep 14, 2022 · 3 comments
Assignees
@andy-blum
Labels
Feature request A new adopter requested feature owner: Innovation Team used when the engineering work will be done by Hybrid Cloud with DDS engineers as consultants package: web components Work necessary for the IBM.com Library web components package

Comments

@proeung
Copy link
Contributor

proeung commented Sep 14, 2022 •
edited
Loading

Engineering info:

Description

  • A follow-up phase 2 task from fix(masthead-v2): fix masthead-contact & add DDO for testing #9359
  • From @oliviaflory
    • I like that when you have a mega menu open and then select the contact us button, the mega menu collapses/closed. I think the reverse should also be true. When I select the Contact us button first, the contact module opens, and if I then select a mega menu the chat module stays open and obstructs part of the mega menu content

contact module mega menu Sep-13-2022 17-49-10

Questions that we should run by the accessibility team:

  • Should clicking the chat button again (after the chat module is opened) trigger the chat module to close? Asking because otherwise the user has to move their mouse to the contact module to close, and all other navigation items (mega menus and profile menu) close the menus on a second click.
  • Should the focus state move to the Chat module once the user clicks it for keyboard users?
  • When testing with the screen reader, there is no announcement that the chat module has opened
  • After you select the Contact us button, a keyboard user has to tab through the entire page before getting to the contact module. This doesn't seem like a great experience (hence the suggestion to move the focus state). Shift tab would go back to the contact us button.

Design Specs
@proeung proeung added Feature request A new adopter requested feature package: web components Work necessary for the IBM.com Library web components package owner: Innovation Team used when the engineering work will be done by Hybrid Cloud with DDS engineers as consultants labels Sep 14, 2022
@proeung proeung mentioned this issue Sep 14, 2022
Merged
@RichKummer RichKummer mentioned this issue Oct 21, 2022
Closed
@andy-blum
Copy link
Member

I've been looking into this, and it appears these changes will need to be made within the cm-app script, not in Carbon. As far as I can tell, the event listeners that handle this interaction are on the document and/or body element and are placed by the cm-app.min.js file.

Screenshot 2022-11-08 at 2 14 50 PM

@sirkitree
Copy link

Do we know where cm-app.min.js comes from, or who owns that?

@andy-blum
Copy link
Member

Per @jeffchew:

The repo for that script is here: https://github.ibm.com/live-advisor/cm-app

@andy-blum andy-blum mentioned this issue Jan 12, 2023
Merged
kodiakhq bot pushed a commit that referenced this issue Feb 7, 2023
@andy-blum
feat(masthead-contact): improve interactions with contact module (#9902)
3313251 
### Related Ticket(s)

Closes #9369

[ADCMS-2602](https://jsw.ibm.com/browse/ADCMS-2602)

### Description

- Masthead container adds an event listener to the Document for `cm-app-ready` from the Contact Module ([source](https://github.ibm.com/live-advisor/cm-app/blob/943dfbcac5b8efde05a00c4c5558947495f96a58/js/helpers/documentEvents.js#L7))
- Stores reference to `window.CM_APP` internally to DDSMastheadContainer
- Uses internal reference to CM_APP to close with `.init()` method

### Changelog

**Changed**

- Improved UX between masthead and contact module
@proeung proeung closed this as completed Feb 7, 2023
jkaeser pushed a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue Apr 6, 2023
@andy-blum @jkaeser
feat(masthead-contact): improve interactions with contact module (car…
0527d92 
…bon-design-system#9902)

Closes carbon-design-system#9369

[ADCMS-2602](https://jsw.ibm.com/browse/ADCMS-2602)

- Masthead container adds an event listener to the Document for `cm-app-ready` from the Contact Module ([source](https://github.ibm.com/live-advisor/cm-app/blob/943dfbcac5b8efde05a00c4c5558947495f96a58/js/helpers/documentEvents.js#L7))
- Stores reference to `window.CM_APP` internally to DDSMastheadContainer
- Uses internal reference to CM_APP to close with `.init()` method

**Changed**

- Improved UX between masthead and contact module
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@andy-blum andy-blum

Labels
Feature request A new adopter requested feature owner: Innovation Team used when the engineering work will be done by Hybrid Cloud with DDS engineers as consultants package: web components Work necessary for the IBM.com Library web components package
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@sirkitree @proeung @andy-blum