Somewhat related issue: it is possible to open the menus by pressing enter, but that does not trigger closing of the other menu like clicking does, so the menus can overlap.

When navigating through the page with the tab key, this solution sets a light blue border around the notifications badge.

Let me know if this proposed solution satisfies and solves the issue.

@Mvasa1 Please clarify “this solution”? Do you plan on implementing the styles shown in your screenshot? Take note, that we're implementing a unified style for represent focus on elements. See the examples in OOUI demo and tab through, like frameless ButtonWidget.

This is a violation of WCAG 2.0 Level AA 2.4.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.

@Volker_E I was prototyping what changes can be made to the icons to set a focus to the icon. I determined that the #pt-notifications-alert and #pt-notifications-notice which control this cannot be used with 'focus' and instead required 'focus-within' to affect the icons on a tab highlight. I will take a look at the link you sent me and make changes following those standards. If you can direct us to the particular protocol to make those changes to what I assume is the 'resource-loader' we would appreciate it. In the meantime, I'll update if I come across any other issues.

@Mvasa1 It would be easier for progressing the discussion to look at shared code in a patch set – if you haven't already (sorry for possible noise) read, please follow “How to become a MediaWiki hacker”.
Returning to the specific issue, first off, browser support for [[ https://caniuse.com/#feat=css-focus-within | :focus-within is not production-ready yet ]]. Even more important, we don't need it. li#pt-notifications-alert and li#pt-notifications-notice both feature an a anchor element as child which becomes focus on tabbing through and is sufficient for solving our issue

.mw-echo-notifications-badge:focus:before {
    border-radius: 2px;
    box-shadow: inset 0 0 0 2px #36c; 
}
.mw-echo-notifications-badge:focus:after {
    background-color: #36c
}

which would result in such feedback

@Volker_E The following document (fix.pdf) shows where and how to fix the focus issue for the badges. Me and my team member have run out of time to work on this issue, so we're leaving the information we gathered while working on this issue. I also attached the entire .less file related to the badges with the changes in them (mw.echo.badge.less).

@Mvasa1: Thanks. For future reference, please post text as plain text and post images as image files, instead of embedding them into a PDF file.
If you have investigated the code, you are very welcome to use developer access to submit your proposed code changes as a Git branch directly into Gerrit which allows to review them and provide feedback. If you don't want to set up Git/Gerrit, you can also use the Gerrit Patch Uploader. Thanks again!

Change 428158 had a related patch set uploaded (by Mvasa1; owner: Mvasa1):
[mediawiki/extensions/Echo@master] Notification badges in personal bar need visual focus feedback.

https://gerrit.wikimedia.org/r/428158

Growth-Team discussed in triage this week, we would like to get to this in Q3.

Hey @Volker_E putting this on your radar to review of the patch, we also plan to take a look at the patch, but will differ to you.

@JTannerWMF Thanks for pinging, sounds good to me. Fell off my radar due to other work prioritized.
Provided feedback on the patch. This should be the result (as icons have changed in the meantime):

If @Mvasa1 doesn't pick it up again (and it would be totally understandable after time passed by), I will amend patch.

Okay I will check in on this in about a week or two to see if you have amended the patch @Volker_E and we will review within that time as well and look to you for next steps. CC: @Catrope @MMiller_WMF

@JTannerWMF After some weeks passed by now, I've updated the patch.

Change 428158 merged by jenkins-bot:
[mediawiki/extensions/Echo@master] Provide visual focus feedback for notification badges

https://gerrit.wikimedia.org/r/428158