Joomla! Issue Tracker - CMS

Download
Launch
Feeling Lucky

[#29174] - [4.0] [atum] Static danger alert contrast doesn't pass WCAG AA

No Code Attached Yet a11y Information Required
avatar C-Lodder
C-Lodder
20 May 2020

Steps to reproduce the issue

In the backend, add the following markup:

<div class="alert alert-danger">This is a danger alert</div>

This will render a danger alert. However the colour contrast does not meet the WCAG AA standards

screeny

avatar C-Lodder C-Lodder - open - 20 May 2020
avatar joomla-cms-bot joomla-cms-bot - change - 20 May 2020
Labels Added: ?
avatar joomla-cms-bot joomla-cms-bot - labeled - 20 May 2020
avatar C-Lodder C-Lodder - change - 20 May 2020
Title
…
[4.0] Static danger alert contrast doesn't pass WCAG AA
[4.0] [atum] Static danger alert contrast doesn't pass WCAG AA
avatar C-Lodder C-Lodder - edited - 20 May 2020
avatar chmst chmst - change - 28 Jun 2020
Category ⇒ Accessibility
avatar hans2103
hans2103 - comment - 28 Jul 2020
  • Joomla Administrator > Content > Site Modules
  • Click New
  • Select Articles - Archived
  • Press Save

the alert box appears... but not in the markup as mentioned in this issue.

Schermafdruk 2020-07-28 14 35 38

The markup I see is:

<joomla-alert type="danger" dismiss="true" class="joomla-alert--show" role="alert"><button class="joomla-alert--close" aria-label="Close"><span aria-hidden="true">×</span></button><span class="alert-heading">Error</span><div>The form cannot be submitted as it's missing required data. <br> Please correct the marked fields and try again.</div></joomla-alert>

The code for this alert is added via layouts/joomla/system/message.php as a WebComponent
Styling is loaded from ./media/vendor/joomla-custom-elements/css/joomla-alert.min.css
The styling for this alert is added via node_modules/joomla-ui-custom-elements/src/scss/alert/alert/scss

Changing the colors in Atum template does not change the colors of the alert boxes.
To change the color of the alert boxes we have to create a PR on https://github.com/joomla-projects/custom-elements

Can someone confirm this?

avatar C-Lodder
C-Lodder - comment - 28 Jul 2020

@hans2103 The markup you've got is the custom element, where as I'm referring to the static Bootstrap alerts that are used in several places in Joomla, and potentially by 3rd party developers.

Inject the markup I've provided into your page and try again

avatar chmst
chmst - comment - 26 Aug 2020

@C-Lodder After the changes in the alerts which have beein made in #30400 and #30401, is this still an issue?

This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/29174.

avatar chmst chmst - change - 26 Aug 2020
Status New ⇒ Information Required
avatar C-Lodder
C-Lodder - comment - 27 Aug 2020

@chmst Yes, it's still an issue. The changes on those PR's were for the alert custom element, not the static Bootstrap alert.

avatar brianteeman
brianteeman - comment - 1 Oct 2020

I can confirm the issue as reported by @C-Lodder

I just have no idea how to resolve it.

avatar Quy Quy - change - 3 Oct 2020
Labels Added: ?
avatar Quy Quy - labeled - 3 Oct 2020
avatar brianteeman
brianteeman - comment - 8 Aug 2021

Not sure when this was changed but this is no longer an issue and can be closed

image

avatar Quy Quy - change - 29 Aug 2021
Labels Added: No Code Attached Yet a11y Information Required
Removed: ? ?
avatar Quy Quy - labeled - 29 Aug 2021
avatar drmenzelit drmenzelit - change - 22 Oct 2021
Status Information Required ⇒ Closed
Closed_Date 0000-00-00 00:00:00 ⇒ 2021-10-22 11:14:49
Closed_By ⇒ drmenzelit
avatar drmenzelit drmenzelit - close - 22 Oct 2021
avatar drmenzelit
drmenzelit - comment - 22 Oct 2021

Closing this as the contrast is ok

Add a Comment

Login with GitHub to post a comment