Botframework-composer: [Accessibility][Usable - Bot Responses-Specific]: Visual appearance of buttons present within 'Used in' column are not appeared like buttons.

[ShellySoni]

User Experience:
Users will get difficulties to interact the UI of the page if visual appearance of buttons present within 'Used in' column are not appeared like buttons.

Test Environment:
Environment: Chromium Edge (Anaheim) + Narrator
Build Version: 2004 (OS Build 19569.1000)​​
Microsoft Edge Version: 82.0.436.0 (Official build) canary (64-bit)​
Test URL: http://localhost:3000/home

Repro Steps:

1. Open URL: http://localhost:3000/home
2. "Bot Framework Composer" homepage will gets opened.
3. Select any of the previously created bot from "Recent Bots" or create one from the available Bots under 'Examples' and activate it.
   Note: Better to create new "Dialog Actions" bot from example.
4. Select 'Bot Responses' from left navigation.
5. Select any specific response except All.
6. Navigate throughout the page when "Edit toggle button is disabled".
7. Observe the issue within table i.e. within 'Used in' column.

Actual Result:
Visual appearance of buttons present within 'Used in' column are not appeared like buttons as they are appeared like links.

Note:
Same issue is repro within 'User Input - Edit Mode'.

Expected Result:
Visual appearance of buttons present within 'Used in' column should be appeared like buttons.

MAG Guidelines:
https://microsoft.sharepoint.com/:w:/r/teams/msenable/_layouts/15/Doc.aspx?sourcedoc=%7bF98F4235-B6BD-47D3-8DA4-F28B9B6FBFA8%7d&file=Guideline%20101%20%E2%80%93%20Recommended%20Assistive%20Technology%20Tools%20for%20MAS%20Testing%20of%20Microsoft%20Digital%20Properties.docx&action=default&mobileredirect=true

Attachment:
~Usable_Bot responses.zip~

[edited by @corinagum]

Attaching image so devs don't need to download the .zip file.

[corinagum]

Attaching image so devs don't need to download the .zip file.

[corinagum]

Can we also get a11y tags added to this issue? Including severity :)

[corinagum]

There are instances in the emulator where there are link-like buttons are displayed but didn't cause a11y issues. @ShellySoni, could you describe the differences that cause Used in buttons to fail, but not the 'Sign in with your Azure account' button below? (note that the blue border is the focus indicator)

[corinagum]

@ashish315 @ShellySoni ping

[corinagum]

I discussed with @awalia13 offline. As a Sev 4, this is a recommended change to accessible UI, however; if we decide not to make changes to this buttons, we may close the issue at our discretion.

@DesignPolice FYI, this is more of a design decision.

[DesignPolice]

Thanks Corina, alright well from a design side, I want to put this is as a last priority - more because of the Brand color involvement - which may get resolved because of things like this. So let's just hold on the blue for now. Appreciate all of your help!

[ashish315]

Note: As per above comment the development team will work on this and no info is required. So, I removing 'Info Requested' tag.

[zhixzhan]

so we will change this text from hyperlink style to button style ? (like https://developer.microsoft.com/en-us/fabric#/components/button)

[corinagum]

@zhixzhan the decision hasn't been made yet; this work item is lowest priority right now.

[corinagum]

@DesignPolice I'm adding you to the assignees as a reminder that a design decision has to be made; however, this is still low pri so please don't feel pressured to answer right away.

[DesignPolice]

okay I will keep an eye on this - Last week there was an update to the Fluent UI and it gives us some options for situations like this... that said switching up a tool kit probably isn't a great idea halfway through.. ugh. Anyway I will bring it up in standup.. thanks

[beyackle]

This has been addressed by a redesign and can probably be closed.

[ashish315]

As checked the design of the page is changed! So, HCL is closing the issue.