Notifications, showing, short selector a11y

[yeion7]

What kind of change does this PR introduce?

Refactor

What is the current behavior?

The notifications has a few a11 issues

What is the new behavior?

What steps did you take to test this?

Checklist

• Documentation
• [] Testing
• Ready to be merged
• Added myself to contributors table

[vercel]

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

Latest deployment for this branch: https://codesandbox-client-git-fork-yeion7-notifications-a11y.codesandbox1.now.sh

[yeion7]

@SaraVieira 👋 this PR is ready for review 😁

btw, thanks for review my last PRs

[SaraVieira]

One day people CodeSandbox without a mouse and it will be thanks to you

[CompuIves]

I reverted this PR because I noticed some issues in the dashboard. It seems like the z-index wasn't set correctly:

I also noticed that the performance of the modal itself went down a bit when moving the mouse over the items, this could either be because of the focus outline that pops in and out or something else.

I also noticed this:

Is there a way to make this more beautiful? Might need @DannyRuchtie input here, but I find the border to be quite ugly, and while I do see the usefulness from an a11y perspective here, I also think we can do better than just adding a blue border.

[yeion7]

oh no 😱

@CompuIves these problems happened in your local environment? seems like you have 1.0.0-beta.4, but this PR upgrade to 1.0.0-beta.8, this version fixed the z-index issue and also the focus is set in the first focusable element and not the container, could you upgrade your dependencies and let me know if issues persist?

The focus style, I think is important to keep it, more details here,

Maybe we could implement this trick for outline when use mouse, while we have a better outline

:focus:not(:focus-visible) {
  outline: none;
}