Bug 1967979

Summary: Masthead dropdowns options are not accessible via the keyboard
Product: OpenShift Container Platform Reporter: Robb Hamilton <rhamilto>
Component: Management ConsoleAssignee: Cyril <cajieh>
Status: CLOSED ERRATA QA Contact: Yanping Zhang <yanpzhan>
Severity: low Docs Contact:
Priority: low    
Version: 4.8CC: aos-bugs, cajieh, jokerman, spadgett, yanpzhan, yapei
Target Milestone: ---   
Target Release: 4.9.0   
Hardware: Unspecified   
OS: Unspecified   
Whiteboard:
Fixed In Version: Doc Type: Bug Fix
Doc Text:
Cause: Incorrect code implementation Consequence: A user is unable to use masthead dropdown options via keyboard Fix: Yes Result: A user is able to use masthead dropdown options via keyboard
Story Points: ---
Clone Of: Environment:
Version: 4.8.0-0.ci-2021-06-04-110612 Cluster ID: 17e39c95-aa7d-4368-8669-d0e5ef00aa88 Browser: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36
Last Closed: 2021-10-18 17:32:54 UTC Type: Bug
Regression: --- Mount Type: ---
Documentation: --- CRM:
Verified Versions: Category: ---
oVirt Team: --- RHEL 7.3 requirements from Atomic Host:
Cloudforms Team: --- Target Upstream Version:
Embargoed:

Description Robb Hamilton 2021-06-04 15:52:52 UTC
To reproduce:

1.  With the console freshly loaded in the browser, begin clicking the tab key until you reach the help icon in the masthead.  
2.  Press enter to open the help dropdown.  
3.  Press tab to try to reach an item in the help dropdown.
4.  Note the focus changes to the user dropdown and the help dropdown closes.

The dropdown menu items are also not accessible via the arrow keys, but this is a common problem with the dropdowns in console.

Comment 3 Yanping Zhang 2021-07-13 02:31:32 UTC
Checked on ocp 4.9 cluster with payload 4.9.0-0.nightly-2021-07-12-143404. 
1. After console is freshly loaded in the browser, press tab until reach the help icon in the masthead.
2. Press enter to open the help dropdown.  
3. Press arrow keys could switch between items in the help dropdown list. But press tab couldn't switch between items in the help dropdown, the focus still changes to the user dropdown and the help dropdown closes.
If it's enough that only the arrow keys work in the help dropdown list and tab doesn't work?

Comment 4 Cyril 2021-07-13 14:07:33 UTC
@yanpzhan 
The Masthead drop-downs makes use of PatternFly ApplicationLauncher component, and ApplicationLauncher uses the arrow keys to navigate the items and tab to enter/exit the drop-down. I think that should be the expected behavior. 
https://www.patternfly.org/2020.06/documentation/react/components/applicationlauncher

cc: @spadgett

Comment 5 Yanping Zhang 2021-07-14 05:48:57 UTC
According to Comment 4, the fix LG, so move the bug go Verified.

Comment 6 Samuel Padgett 2021-07-20 16:16:56 UTC
The behavior in comment #3 is intended. Tab moves to the next masthead item, and arrow keys navigate the dropdown.

Comment 9 errata-xmlrpc 2021-10-18 17:32:54 UTC
Since the problem described in this bug report should be
resolved in a recent advisory, it has been closed with a
resolution of ERRATA.

For information on the advisory (Moderate: OpenShift Container Platform 4.9.0 bug fix and security update), and where to find the updated
files, follow the link below.

If the solution does not work for you, open a new bug report.

https://access.redhat.com/errata/RHSA-2021:3759