Fixed customise button preventing to click setting icon (#15221)

[Dzheky]

Fixes brave/brave-browser#15221

Submitter Checklist:

• I confirm that no security/privacy review is needed, or that I have requested one
• There is a ticket for my issue
• Used Github auto-closing keywords in the PR description above
• Wrote a good PR/commit description
• Added appropriate labels (QA/Yes or QA/No; release-notes/include or release-notes/exclude; OS/...) to the associated issue
• Checked the PR locally: npm run test -- brave_browser_tests, npm run test -- brave_unit_tests, npm run lint, npm run gn_check, npm run tslint
• Ran git rebase master (if needed)

Reviewer Checklist:

• A security review is not needed, or a link to one is included in the PR description
• New files have MPL-2.0 license header
• Adequate test coverage exists to prevent regressions
• Major classes, functions and non-trivial code blocks are well-commented
• Changes in component dependencies are properly reflected in gn
• Code follows the style guide
• Test plan is specified in PR before merging

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, 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-Protections
  • 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-Exceptions-in-Brave
  • https://github.com/brave/brave-browser/wiki/QA-Guide
  • https://github.com/brave/brave-browser/wiki/P3A

Test Plan:

[simonhong]

@petemill I confirmed this change fixed the issue and this looks good to me. WDYT?

[petemill]

Thanks I didn't notice this. It's good for now, I'll rebase on the latest refactor.

[karenkliu]

Is there any way to just keep the same Customize button instead of having a different one for Brave News?

[Dzheky]

@karenkliu this would be a bit tricky but could be done, but why complicating it by making it the same button?

[karenkliu]

@Dzheky Experientially it is the same button since it opens the Customize Dashboard panel; the only difference is which section the Customize Dashboard panel is opened to. Also, it would be more accessible since it is always visible regardless of where the user has scrolled on the New Tab page.

This is how it would look:

We're getting rid of the settings, bookmark, history, and video icon once sidebar is out because these are all default items in the sidebar. At that point, the customize button would end up where we started:

[Dzheky]

@karenkliu Oh I see, that would make sense yes. So if I understood correctly settings, bookmark, history, and video will be removed in future updates? If so then it makes sense to just keep one Customize button.

[petemill]

Re-designing / re-using can come as a follow-up. This is a simple bug fix. Thanks for your contribution @Dzheky. It's a good bug fix. We should also remove the element from the DOM, or use an aria label to show it's hidden, otherwise screen readers may still announce it and allow click.

[petemill]

@Dzheky I'm closing this as I've moved your commit now to #8830