Update notifications and info boxes styles for accessibility

[bx80]

Description:

Fixes #20691

The PR updates the styling of notifications and info boxes throughout the application to improve accessibility.

For some reason we have components for both notifications and alerts, each of which can be of the types: success, info, warning or error. The only real difference I can see is that notifications can optionally have a close button. There seems to be roughly equal usage of both components throughout the application. If there is no other difference then we might want consider deprecating alerts at some point in favor of notifications.

I’ve applied the new styles to both notifications and alerts and also added some notification examples to the UI demo screen so that they can be covered by UI tests.

Review

• Functional review done
• Potential edge cases thought about (behavior of the code with strange input, with strange internal state or possible interactions with other Matomo subsystems)
• Usability review done (is anything maybe unclear or think about anything that would cause people to reach out to support)
• Security review done
• Wording review done
• Code review done
• Tests were added if useful/possible
• Reviewed for breaking changes
• Developer changelog updated if needed
• Documentation added if needed
• Existing documentation updated if needed

[michalkleiner]

Created new ticket to look into the consolidation of the components — #21079.

[sgiehl]

@bx80 for such intense changes it's good to temporarily update the submodules to the correlating branches in the PR. That way you can directly see if all tests of the submodule plugins are passing

[sgiehl]

Had a look through all the changed screenshots. Left a couple of comments, where additional changes might be required.
Some of them might be unrelated to the purpose of this PR and could also be changed independently. In some cases the resulting screenshots aren't correct anymore and need further updates.

In general we should maybe discuss if we want to deprecate either the Notification or the Alert component. It seems they already look the same, so their is no benefit in having both.

[sgiehl]

Guess we missed that when changing the links, but guess those for authors and website should be blue, too.

[bx80]

I've updated the marketplace .metadata CSS class to make them blue.

[sgiehl]

Should we maybe change this help box to look the same as an info notification?

[bx80]

The bottom right italic text might not work well in an info notification. Maybe there are other improvements that could be done to the report info help box at the same time so it might be worth getting some UX input on another ticket.

[sgiehl]

Had another look through the screenshots. Added a couple of comments, where screenshot changed the content unexpected, or some stuff wasn't correct.

[sgiehl]

The placement of the dropdown icons when displayed right looks not nice. See the dashboard selector in main menu

[bx80]

It seems okay to me, is this what you mean ?

There is another ticket to be done right after this one where dropdown alignment and icons will be tidied up, so maybe any tweaks to this should be done there?

[sgiehl]

also incorrectly updated

[sgiehl]

here as well