Sidebar - shortcuts : Add Shortcut button is not accessible for Keyboard & screen reader users.

Issue Summary

In BitBucket sidebar, the "Add shortcut" button is not accessible for Keyboard & screen reader users.

Steps to Reproduce

1. Navigate to BitBucket homepage.
2. Navigate to the "Repository" menu in header section.
3. Activate any repository link from the menu. For Example : "Test 1.1"
4. Navigate to "Add shortcut" button in the sidebar.
5. Observe that the button doesn’t get activated with Keyboard alone.

Actual Results

While navigating with keyboard & screen reader, when user navigate to the "Add shortcut" button present inside sidebar, the button receives keyboard focus but doesn’t get activated via Keyboard enter or space keys.

The button doesn’t have required ARAI attributes such as "aria-haspopup" & "aria-expanded". The attribute "aria-controls" is provided unnecessarily.

This makes Keyboard & screen reader users difficult to access the add Shortcut component effectively.

Note: currently the button gets activated via mouse click only.

Expected Results

The "Add shortcut" button should be accessible with keyboard & screen reader users. Apply following fixes in the source code.

• Modify the scripts to ensure that the "Add shortcut" button can be activated with Keyboard enter or space keys.
• Remove the "aria-controls" attribute from the <button> element. 
• Provide "aria-expanded=false" attribute to the <button> element and ensure that value is toggled between true & false as per user interaction.
• Provide "aria-haspop=dialog" to the <button> element.

Screenshot

Screen Recording

Screen Recording 2022-04-27 at 5.55.49 PM.mov

Workaround

Currently there is no known workaround for this behavior. A workaround will be added here when available

Bug Ref: 734665