Notifications -Core #5579
Description
Accessibility: Notifications -Core Component (There are couple of accessibility issues found while testing, so i have attached error document for you reference.)
Screenshot:
Notifications_Core_ARIBA Controls.docx
Application & Test Environment Details
Application Name: ARIBA Controls- Fundamental Library for Angular
URL: https://fundamental-ngx.netlify.app/#/core/home
Web browser: Google Chrome 91.0.4472.77
Operating System: Microsoft Windows 10 x64
Screen Reader: JAWS 2021.2012.57.400
Issue 1
Priority: High
Checkpoint: ACC-270
Within template as content notification header navigate to open notification button
Observed Behavior:
The ‘open notification’ button cannot be activated using keyboard.
Expected Behavior:
Ideally, all the UI elements should be accessible using keyboard.
Screenshot:
Case 1
Case 2:
Issue 2
Priority: High
Checkpoint: ACC-264
Within notification group header, navigate to open notification group button and activate it. Navigate to the new messages
Observed Behavior:
On activating ‘open notification group’ button, information regarding the state of the button i.e. activated, pressed etc. is not read. i.e. on activating the button, the button gets activated and the list of elements is displayed below but the same information is not read.
Expected Behavior:
Ideally, the state on activating the button should be read by the screen reader. i.e. on activating the button either the focus should shift to the active section or the information ‘pressed’ or ‘activated’ should be read.
Screenshot:
Issue 3
Priority: High
Checkpoint: ACC-255
Navigate to the more menu.
Observed Behavior:
There is no tooltip or text alternative provided for the more menu.
The speech output is:
overflow Button
To activate press spacebar.
Expected Behavior:
Ideally, a text alternative or tooltip should be provided for all the non textual elements and the same information should also be read by the screen reader on navigation.
Screenshot:
Issue 4
Priority: High
Checkpoint: ACC-264
Navigate to the more menu.
Observed Behavior:
The element type for More menu is not read precise on navigation. It is read as a button being a menu.
The speech output is:
overflow Button
To activate press spacebar.
Expected Behavior:
Ideally, the element type for all the Ui element should be read precise on navigation.
Screenshot:
Issue 5
Medium
Priority:
Checkpoint: ACC-264
Navigate to the more menu and activate it. Navigate within the items available
Observed Behavior:
The item count for the items available within the More menu is not read on navigating within the items.
The speech output is:
Approve
To move through items press up or down arrow.
Reject
Forward
Expected Behavior:
Ideally, the item count for the items available within the menu should be read on navigation.
Screenshot:
Issue 6
Priority: High
Checkpoint: ACC-264
Navigate to accept button within new messages (2) header
Observed Behavior:
On navigating to the buttons ‘accept all’, ‘close’, ‘accept’ etc., the group header and information regarding the related notification is not read. i.e. the related information about the notification is not read. Therefore, the group header and the related information is not associated to the buttons.
The speech output is:
Accept All Button
To activate press spacebar.
close Button
To activate press spacebar.
Accept Button
To activate press spacebar.
close Button
To activate press spacebar.
Accept Button
To activate press spacebar.
close Button
To activate press spacebar.
Expected Behavior:
Ideally, on navigating to the buttons, the group header should be read. Therefore, the group header should be associated to the buttons.
Screenshot:
Case 1
Case2:
Issue 7
Priority: Medium
Checkpoint: ACC-260.4
Observed Behavior:
When resizing the screen to ‘Responsive Design’ (320) pixels, the horizontal scroll bar is available
Expected Behavior:
Ideally, the horizontal scroll bar must be removed to the user.
Screenshot:
Issue 8
Priority: Medium
Checkpoint: ACC-282.1
Observed Behavior:
When resizing the screen to ‘Responsive Design’ (320) pixels, the texts are out of the card layout.
Expected Behavior:
Ideally, the text must be adapted to the responsive design and should be within the card without loss of content.
Screenshot:
Priority: High
Checkpoint: ACC-270.1
Observed Behavior:
On activating the ‘Open Notification’ ad ‘Open Notification Group’ and ‘Open from Component’ button, the dialog appears and there is no keyboard support provided for the ‘Open’ and ‘Close’ button, Once the keyboard support is provided the information about the dialog should be read.
Expected Behavior:
Ideally, all the associated functionality of an UI must be invokable using keyboard and mouse. Also, application shall be designed so end users can work with the keyboard alone, without requiring to use a mouse or a touch device.
Screenshot:
Issue 9
Priority: High
Checkpoint: ACC-270.1
Observed Behavior:
On activating the ‘Open Notification’ ad ‘Open Notification Group’ and ‘Open from Component’ button, the dialog appears and there is no keyboard support provided for the ‘Open’ and ‘Close’ button, Once the keyboard support is provided the information about the dialog should be read.
Expected Behavior:
Ideally, all the associated functionality of an UI must be invokable using keyboard and mouse. Also, application shall be designed so end users can work with the keyboard alone, without requiring to use a mouse or a touch device.
Screenshot:
Issue 10
Priority: High
Checkpoint: ACC-264.1
Observed Behavior:
On accessing the ‘Close’ button, of the message strip information and its Type and UI information is not read for the user.
Expected Behavior:
Ideally, all important information visually conveyed to the user must be read
Screenshot:
Issue 11
Priority: Medium
Checkpoint: ACC-264.1
Observed Behavior:
On activating the ‘More’ menu button, the list item such as ‘Accept’ and Forward’ is activated, the toast message information is not conveyed to the user.
Expected Behavior:
Ideally, all important information visually conveyed to the user must be read
Screenshot:
Screenshot:
Issue 12
Priority: Medium
Checkpoint: ACC-264.1
Observed Behavior:
On activating the ‘Open Notification Group’ button, the tab such as ‘BY date’, ’By Type’ and ‘By Priority’ tab section additional information is read such as ‘To switch pages, press Control+PageDown.
Expected Behavior:
Ideally, all such additional information should be removed.
Screenshot:
Screenshot:
Issue 13
Priority: Medium
Checkpoint: ACC-270.5
Observed Behavior:
On activating the ‘Open Notification Group’ button, the tab such as ‘BY date’, ’By Type’ tab section, additional tab stop is provided to reach the selected tab section.
Expected Behavior:
Ideally, all such additional tab should be removed, On selecting the tab the focus should land on the respective selected details region.
Screenshot:
Issue 14
Priority: Medium
Checkpoint: ACC-264.1
Observed Behavior:
On activating ‘Open Notification Group’ button, the dialog has ‘Expand and Collapse’ button, its associated label such as ‘New Messages(2)’ and ‘Today(2) is not read to the user.
Expected Behavior:
Ideally, all important information visually conveyed to the user must be read
Screenshot:
Screenshot:
Issue 15
Priority: Medium
Checkpoint: ACC-264.1
Ensure ARIA roles, states, and properties are valid
Code Snippet:
