Buttons in blue app bar should have a label + tooltip to show the label

[mareekuh]

Open composer. Notice the top header bar has several icons:

• three stacked horizontal lines, no label, no hover to show tooltip with label
• 2 chat bubbles, no label, no hover to show tooltip with label
• bell icon, no label, no hover to show tooltip with label
• rocket icon, no label, no hover to show tooltip with label

This will not pass usability, accessibility nor can it be documented as such for instructions (Imagine this (-; : go to the blue toolbar a the top of your screen. Click the icon 3nd from the left that looks like 3 horizonal stacked lines and...)

Expected:

• three stacked horizontal lines: Add label and provide descriptive copy on hover
• 2 chat bubbles: Add label and provide descriptive copy on hover
• bell icon: REMOVE THIS ICON as this is now handled in the diagostics bar at the bottom bar
• rocket icon: Add label and provide descriptive copy on hover

[mewa1024]

@mareekuh by label, do you mean instead of icon buttons (like this:

they should be action buttons, like this?

(images from the UI Fabric guidelines).

For tooltip content, it looks like 3 of them already have them (but it take over a second for them to appear at least on Mac:

Does the timing need to be faster for accessibility?

For the bell icon, we still need it for now for provisioning messages. (Hover text should be "Notifications").

[srinaath]

Native tooltips seems really slow and finicky. We could take an action item to wrap these buttons on the Header with ToolTip Fluent Component like we do on the left nav items.

[mareekuh]

Updated copy, approved by @garypretty is available here ('Product tour and Chrome'): https://microsoft.sharepoint.com/:x:/r/teams/ConversationalAI785/_layouts/15/Doc.aspx?sourcedoc=%7B6B1FACBD-B5FE-4AD2-A35B-995635C1696B%7D&file=glossary.xlsx&action=edit&mobileredirect=true&wdPreviousSession=36539654-a42b-4b87-be1b-de96507b4422&wdOrigin=TEAMS-ELECTRON.teams.undefined&cid=676cf454-61e0-4182-bd27-39044bb51cea

@garypretty - who should I assign this to get the copy for the following updated: Composer chrome including

• rocket icon
• webchat icon
• run bots icon
• Diagnostics (bottom drawer)
• Product tour

[mewa1024]

@srinaath can we look at why the hover text for the app bar butttons is slower than the for the main menu on the left?

https://user-images.githubusercontent.com/39317542/123054671-ee93b480-d3b9-11eb-8294-2aba6eea8abf.mov

I think the other issues in the bug have been addressed (so I'm removing the "UX design" label.)

[srinaath]

@mewa1024 We need to wrap the Button with a tooltip. We are currently just using the title field on the button. https://developer.microsoft.com/en-us/fluentui#/controls/web/button

Are you looking to add it for R14?

[garypretty]

@srinaath if we can get these into R14 then I think we should. I have grabbed the copy from the spreadsheet for you.

Three stacked lines button Hover / tooltip - 'Start and stop local bot runtimes'

2 chat bubble / webchat icon Label - 'webchat icon' Hover / tooltip - 'Test your bot'

Rocket icon Hover / tooltip - 'Recommended actions'

Notifications icon Hover / tooltip - 'Notifications'

[mewa1024]

Thanks! I wasn't thinking of this as necessarily R14 (I was just going through issues with the "UX label" trying to unblock anything).

[beyackle]

@mewa1024 The reason for the speed difference is that the tooltips on the left-side nav bar are actual Fluent Tooltip components, while the little boxes that pop up in the top bar are actually from the browser itself, displaying the alt-text.