[Accessibility][Object Information - Bot Responses]: While navigating within table using ctrl alt arrow keys, screen reader read all contents as ‘Read only’.

[ashish315]

User Experience:
Screen reader users will not get confused if screen reader read all table contents as ‘Read only’.

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

Repro Steps:

1. Open URL: http://localhost:3000/home
2. Select 'Bot Responses' link from left navigation.
3. Navigate within the table using ctrl alt arrow keys.
4. Observe the issue with screen reader.

Actual Result:
While navigating within table using ctrl alt arrow keys, screen reader read all contents as ‘Read only’.

Note:
Same issue is repro in 'User Input' table.

Expected Result:
While navigating within table using ctrl alt arrow keys, screen reader should not read all contents as ‘Read only’ as 'used in' and ;more option' buttons are not read only.

MAS Reference:
https://microsoft.sharepoint.com/:w:/r/sites/accessibility/CELA/Official_Microsoft_Accessibility_Standards/MAS%204.2.1%20%E2%80%93%20Object%20Information.docx?d=weee97bbd999048a08b036ea775581aa8&csf=1&e=UYEfO3

Attachment:
MAS4.2.1_Bot responses_table.zip

[corinagum]

image added to thread for ease of access. Please note there is also a video in the .zip

[beyackle]

This issue has evolved some from how it was described; the "Used in" column has been replaced by a simple read-only "been used" checkmark, and the kebab menu button on the right now correctly leaves out the "read-only" tag. However, the checkmark isn't screen-reader friendly - when it's there, the SR reads a value of "read-only; button", and when it's not, the SR just says "read-only". This isn't a great SR experience, so I'm going to fix that.

[ashish315]

As checked on below environment the issue is still repro.
Test Environment
Browser: Microsoft Edge Dev {Version 83.0.467.0 (Official build) dev (64-bit)}
Browser: Microsoft Edge Canary {Version 83.0.474.0 (Official build) canary (64-bit)}
OS build: 2004 (19588.1000)
Screen Reader: Narrator
URL: Bot Framework Composer
Prerequisite Here

[corinagum]

I'm not repro-ing the original 'read only' problem. Could we have this verified again?

Right now the 'used' check mark is a button. However there's no action item associated with it. Do we need to change it to an icon and ensure it's tab-able? @beyackle what do you think?

[beyackle]

It gets read as "used" or "unused" when the entire row is highlighted by the SR. I think that's meant to be the normal case for navigation, although it is a little weird that we render it as a button when there's no action associated with it.

[corinagum]

@beyackle for organization, I'll file a separate bug to track the button convo. Thank you.

[ashish315]

@corinagum As checked, the narrator still announces read only for edit button i.e. issue still repro. Please look into the attachment for the reference: Edit button as read only.zip

We checked on the below environment and the latest 'Master' build downloaded on 23rd April.
Test Environment
Browser: Microsoft Edge Dev {Version 84.0.488.1 (Official build) dev (64-bit)}
OS build: 2004 (19562.1000)
Screen Reader: Narrator
URL: Bot Framework Composer
Prerequisite Here

[ashish315]

As checked it still repro.

[beyackle]

Reproed this too. I'll work on fixing it.

[beyackle]

On further investigation, this looks like an issue in Fluent UI. All cells in a DetailsList (which is what we use for that table) get the aria-readonly="true" property, and there doesn't seem to be a way to change that. A button isn't an editable object either (which is what aria-readonly="false" would imply), so I think this either should be closed as a "won't do" or moved to the Fluent UI team for further investigation.

[ashish315]

@beyackle As discussed with SME, we need to forward the issue to Fluent UI team.

[Amit8527510735]

#Nonbenchmark;