Make NTP setting menu keyboard accessible

[imptrx]

fixes brave/brave-browser#5041
fixes brave/brave-browser#5199
Brave-ui PR: brave/brave-ui#506
Quick View:

Submitter Checklist:

• Submitted a ticket for my issue if one did not already exist.
• Used Github auto-closing keywords in the commit message.
• Added/updated tests for this change (for new code or code which already has tests).
• Verified that these changes build without errors on
  • Android
  • iOS
  • Linux
  • macOS
  • Windows
• Verified that these changes pass automated tests (unit, browser, security tests) on
  • iOS
  • Linux
  • macOS
  • Windows
• Verified that all lint errors/warnings are resolved (npm run lint)
• Ran git rebase master (if needed).
• Ran git rebase -i to squash commits (if needed).
• Tagged reviewers and labelled the pull request as needed.
• Request a security/privacy review as needed.
• Add appropriate QA labels (QA/Yes or QA/No) to include the closed issue in milestone
• Public documentation has been updated as necessary. For instance:
  • https://github.com/brave/brave-browser/wiki/Deviations-from-Chromium-(features-we-disable-or-remove)
  • https://github.com/brave/brave-browser/wiki/Proxy-redirected-URLs
  • https://github.com/brave/brave-browser/wiki/Fingerprinting-Protection-Mode
  • https://github.com/brave/brave-browser/wiki/Brave%E2%80%99s-Use-of-Referral-Codes
  • https://github.com/brave/brave-browser/wiki/Custom-Headers
  • https://github.com/brave/brave-browser/wiki/Web-compatibility-issues-with-tracking-protection
  • https://github.com/brave/brave-browser/wiki/QA-Guide

Test Plan 1:

• Go to new tabs page
• Press tab
• There should be an outline when you reach the settings icon at the bottom left of the page
• Pressing space or enter will open the setting menu
• Pressing tab will allow you to select the settings (i.e. show background image)
• Pressing space or enter or 'escape' will allow you to close the menu
• Clicking the settings icon while menu is open will also close the menu

Test Plan 2:

• Open new tabs page
• Open customization menu at the bottom right corner
• Open another NTP and assert customization menu is closed
• Close browser with customization menu open; NTP on a fresh browser instance should be closed

Reviewer Checklist:

• New files have MPL-2.0 license header.
• Request a security/privacy review as needed.
• Adequate test coverage exists to prevent regressions
• Verify test plan is specified in PR before merging to source

After-merge Checklist:

• The associated issue milestone is set to the smallest version that the
  changes has landed on.
• All relevant documentation has been updated.

[cezaraugusto]

@imptrx still wip?

[imptrx]

@imptrx still wip?

yep - currently waiting on the status of a recently filed issue: brave/brave-browser#5199 to be confirmed since they touch upon the same logic

[cezaraugusto]

comments left

[cezaraugusto]

code looks good, feature works, and mentioned issues are confirmed to be fixed by these changes. left two questions and a request.

[cezaraugusto]

++

[petemill]

Thanks for addressing, this is now nice and clean.

A good practice would be to make the commits that we end up putting in master work towards keeping the code and code-history understandable. Two things would improve that:

1. Make sure each commit message is descriptive about a feature
   • always referencing New Tab Page in this case
2. Squash commits
   • Code that we don't need and never wanted to merge usually just adds noise to the story of the file
   • Something like "Address feedback" isn't a meaningful commit message to see why a change was made. If there's no meaningful reason to have it as a commit, then it should be folded in to the feature that is being modified.

In general a PR should have as few commits as possible. If there are multiple commits then they would probably be for very separate features that happen to be in the same PR, which should be a rare thing (prefer multiple PRs).

If you need help learning some good techniques for how to rebase and squash, I'd be happy to share some tips.

In this case maybe there would be a few commits in an ideal world, after looking at your end result:

• New Tab Page: settings tabindex matches visual order
• New Tab Page: settings menu is keyboard accessible
• New Tab Page: settings open / close state is not persisted
• Storybook: Add normalizer for parity with browser webui