Accessibility: Quick View

[Sanjay-1312]

Accessibility: Illustrated Message Component (There are couple of accessibility issues found while testing, so i have attached error document for you reference.)
Screenshot:
Quick View_Core_ARIBA Controls.docx

[artolshansky]

Changed estimate to 2 since it has 7 issues in one card and needs additional investigation about native behavior of email/phone links.

[artolshansky]

• Issue 1 EB: Ideally, on navigating to the links, the corresponding label should be read. Therefore, the label should be associated to the respective UI element. (fix(core): fix Quick View Accessibility issues #5493)
• Issue 2 EB: Ideally, no additional information should be read and the information read should be clear and precise. – NOTE: it's native browser behavior, can't find information on how to customize it (most likely this is impossible at the moment).
• Issue 3 EB: Ideally, all the UI elements should be accessible using keyboard. – NOTE: from the issue, email could be activated by Enter keypress
• Issue 4 EB: Ideally, the dialog header along with the focused element information should be read when a dialog appears on the screen and no additional information should be read. (fix(core): fix Quick View Accessibility issues #5493)
• Issue 5 EB: Ideally, on activating the button focus should move to the active pop up. Also, the information ‘activated or selected’ should be read on activating the button. (fix(core): fix Quick View Accessibility issues #5493)
• Issue 6 EB: Ideally, the dialog must be closed using ‘ESC’ key. (fix(core): fix Quick View Accessibility issues #5493)
• Issue 7 EB: Ideally, the horizontal scroll bar must be avoided for the user. (fix: quick view inherit display for fit in parent block fundamental-styles#2385)

[Sanjay-1312]

Hello Colleagues,

Issue 1: fixed

Issue 2:
The issue is not fixed. An additional information is being read.

Issue: 3 : fixed

Issue 4:
The Company is read but the whole dialog details is read once.

Ideally, the dialog header along with the focused element information should be read when a dialog appears on the screen and no additional information should be read.
The dialog should have focus and should read the focused element.

Issue 5:
The issue is partially fixed and The Selected or Activated information of 'Open Popover', 'Open Pop over with heading' and 'Open Dialog' buttons is not read.

Issue 6: fixed.

Issue: 7
The horizontal scroll bars is available and the pop up is not visible properly.

Issue 1-6 URL: https://deploy-preview-5493--fundamental-ngx.netlify.app/#/core/quick-view
Issue 7: URL: https://deploy-preview-2385--fundamental-styles.netlify.app/?path=/docs/components-quick-view--popover
JAWS 2021

Thanks and Regards
Sanjay

[artolshansky]

@Sanjay-1312 @puru-hk

Issue 2: we can't manipulate data in this 'Make a call' popover from our library (at least I can't find any information about it), it's related to native Chrome and OS behavior. I can just remove the link, and make the phone text not clickable to prevent appearing of this popover, but I believe a clickable phone number is more user-friendly.

Issue 4: could be re-tested. I hope it fixed, right now it's focusing on the first focusable item. (I just following wai-aria example)

Issue 5: could be re-tested. Added aria-expanded and aria-haspopup to the popover's and dialog buttons.

Issue 7: could be re-tested. I've updated fundamental-styles version in fundamental-ngx library, it should fix the issue with scrollbars inside quick view component.

the pop up is not visible properly

As for this issue in fund-styles it's related to the implementation of documentation and popover component, not exactly to the quick view component.

[Sanjay-1312]

Issue 2: chrome issue.

Issue 4:
issue: The dialog all information is read at all once.
Expected behavior: The focus should be available on the first UI element on the 'Details' dialog
The dialog details such as dialog header 'Details' and the Michael Adams, Account Manager and Contact Details header and the mobile label and number should be read when the focus is available on 'Mobile number'.(first element )in the dialog.

issue 5:
Expected: The button selected and the dialog name "Employee' and the details of the person and the 'Contact Administration' is not read.

Issue 7:
The Horizontal scroll bar should be removed to the user in the Responsive design.

[Sanjay-1312]

Hello Colleagues,

Issue: 4
The group header information 'Contact Details' should be for all the pop over and dialog.

Expected : The group header name 'Contact Details' should be read.

Issue: 5
On activating the button, the dialog appears and the focus is available on 'Mobile number' but all information about dialog is read at once.

On activating the button dialog name and details of the employee and header Contact Details and the focused mobile information should be read.

Issue 7:
The horizontal scroll bar should be avoided.

URL: https://deploy-preview-5493--fundamental-ngx.netlify.app/#/core/quick-view
JAWS 2021