1684456 - Not all buttons can be activated by both the Enter and Space keys in the customization panel

Status: RESOLVED WORKSFORME

(Firefox :: New Tab Page, defect, P3)

Description

[Ciprian Muresan [:cmuresan], Ecosystem QA]

Attachment: space and enter do not activate the options in the panel.gif

[Notes]:

• Given that some actions in the panel only work with the Space key, others with the Enter key, and a few with both keys, it would be best (for the sake consistency across the panel) if all actions would work with either of the keys.

[Affected versions]:

• Firefox Nightly 86.0a1, BuildID 20201228205313
• Firefox Beta 85.0b4, BuildID 20201220193140

[Affected Platforms]:

• Windows 10
• macOS 10.15
• Linux MX 4.19

[Prerequisites]:

• Have a new Firefox profile.
• Have the browser.newtabpage.activity-stream.newNewtabExperience.enabled pref set to true.

[Steps to reproduce]:

1. Open the browser with the profile from prerequisites.
2. Open a new tab and click the "Personalize" button.
3. Click inside the panel.
4. Using the Tab key focus the dropdown button.
5. Press the Enter key and observe the behavior.
6. Press the Space key and focus a different option using the arrow keys.
7. Press the Space key and observe the behavior.

[Expected results]:

• Step 5: The dropdown menu is displayed.
• Step 7: The option is selected.

[Actual results]:

• Step 5: Nothing happens.
• Step 7: Nothing happens.

[Additional notes]:

• The issue is also reproducible with the Shortcuts, Recommended by Pocket, Recent Activity, and Snippets toggles. In this case, the Enter key does nothing while the Space key activates the toggle.
• The issue is also reproducible with the "Sponsored stories" and "Sponsored shortcuts" checkboxes. Only the Space key activates the checkbox.
• The issue is NOT reproducible with the "Personalize", "Close", or "Manage more settings" buttons. In this case BOTH keys open/close the panel.
• Attached a screen recording of the issue.

Comment 1

[Gavin Suntop [:gvn] (they/them)]

Can y'all prioritize this? Thx!

Comment 2

[Maxx Crawford [:maxx]]

Hey there! I was confirming this bug was still an issue and wanted to comment on some of the behaviors I observed. It appears that the Personalize form is now keyboard accessible. I observed the following expected keyboard interactions:

• The dropdown fields (<select>) opened as expected when the element had focus AND then the up/down arrow key was pressed OR the space bar was pressed.
• When an option was selected (and had focus), pressing the Enter key selected and closed the dropdown.

I wanted to confirm that this pattern (space to open/enter to select) mirrored other sites. I observed the same bindings on MDN <select> examples and on Bugzilla. If it's a pattern we should be following (open with the enter key), please advise. Happy to jump on Slack/zoom to chat further as well.

Additional note, the HNT has requested a thorough a11y review so I expect some additional keyboard issues to come up.

From this point, I would recommend resolving this bug as filed as "WORKSFORME".

Comment 3

[Ciprian Muresan [:cmuresan], Ecosystem QA]

Hey @maxx, thanks for looking into this! And thanks for your explanation! My only leg to stand on was the aspect of consistency, which seems to be met as it's consistent with similar implementations in various places, and had no idea that this was, in fact, the norm.

I'll go ahead and close this out as WFM based on your comment. Sorry for having wasted your time, but thank you for the lesson!

Comment 4

[Maxx Crawford [:maxx]]

You bet! I am in the same boat — I didn't know the default/expected keyboard interactions either. Glad you filed this so I could also learn the space better. Thanks again!

Comment 5

[Anna Yeddi [:ayeddi]]

Thank you both for the investigation and for making sure Firefox provides the most delightful experience for users!

As you both said, and per WebAIM and W3C's documentation, and based on the behavior of the HTML <select> element (MDN), Enter key on the combobox is not expected to open the list of options (while a Down Arrow opens it), unless the combobox is editable, per ARIA Combobox design pattern:

Enter: If the combobox is editable and an autocomplete suggestion is selected in the popup, accepts the suggestion either by placing the input cursor at the end of the accepted value in the combobox or by performing a default action on the value.
Down Arrow: If the popup is available, moves focus into the popup