Uploaded image for project: 'XWiki Platform'
  1. XWiki Platform
  2. XWIKI-22501

Attachment progress info is lacking contrast

    XMLWordPrintable

Details

    • Unknown
    • N/A
    • N/A

    Description

      When uploading an attachment, a progress bar is displayed. The elements in this progress bar do not respect contrast minimum since they are dark grey on a light grey. The solution is either to remove the box light grey background around the attachment status, or change the text color to be darker.

       

      This was first reported on CI by automated tests using Axe core:

      WCAG warnings in the test class [org.xwiki.attachment.test.ui.docker.AllIT]:
      __________

      Validation in the test method [checkComment]
      Check for [org.xwiki.flamingo.skin.test.po.AttachmentsViewPage] at http://xwikiweb:8080/xwiki/bin/view/NestedAttachmentCommentIT/checkComment/#Attachments.
      Found [2] items

      1: Elements must meet minimum color contrast ratio thresholds
      Description: Ensures the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
      Help URL: https://dequeuniversity.com/rules/axe/4.9/color-contrast?application=axeAPI
      Help: Elements must meet minimum color contrast ratio thresholds
      Impact: serious
      Tags: cat.color, wcag2aa, wcag143, TTv5, TT13.c, EN-301-549, EN-9.1.4.3, ACT

      HTML element: 
          <span class="progress-percentage">100%</span>
      Selector: [.upload-status.upload-done:nth-child(1) > .progress-info > .progress-percentage]
      Fix any of the following:
        Element has insufficient color contrast of 3.05 (foreground color: #888888, background color: #eeeeee, font size: 9.6pt (12.74px), font weight: normal). Expected contrast ratio of 4.5:1

      HTML element: 
          <span class="progress-transfered">(13.0 b)</span>
      Selector: [.upload-status.upload-done:nth-child(1) > .progress-info > .progress-transfered]
      Fix any of the following:
        Element has insufficient color contrast of 3.05 (foreground color: #888888, background color: #eeeeee, font size: 9.6pt (12.74px), font weight: normal). Expected contrast ratio of 4.5:1

      HTML element: 
          <span class="progress-speed">13.0 b/s</span>
      Selector: [.upload-status.upload-done:nth-child(1) > .progress-info > .progress-time > .progress-speed]
      Fix any of the following:
        Element has insufficient color contrast of 3.05 (foreground color: #888888, background color: #eeeeee, font size: 9.6pt (12.74px), font weight: normal). Expected contrast ratio of 4.5:1

      HTML element: 
          <span class="progress-remaining"> | 00:00:00</span>
      Selector: [.upload-status.upload-done:nth-child(1) > .progress-info > .progress-time > .progress-remaining]
      Fix any of the following:
        Element has insufficient color contrast of 3.05 (foreground color: #888888, background color: #eeeeee, font size: 9.6pt (12.74px), font weight: normal). Expected contrast ratio of 4.5:1

      HTML element: 
          <span class="progress-percentage">100%</span>
      Selector: [.upload-status.upload-done:nth-child(2) > .progress-info > .progress-percentage]
      Fix any of the following:
        Element has insufficient color contrast of 3.05 (foreground color: #888888, background color: #eeeeee, font size: 9.6pt (12.74px), font weight: normal). Expected contrast ratio of 4.5:1

      HTML element: 
          <span class="progress-transfered">(13.0 b)</span>
      Selector: [.upload-status.upload-done:nth-child(2) > .progress-info > .progress-transfered]
      Fix any of the following:
        Element has insufficient color contrast of 3.05 (foreground color: #888888, background color: #eeeeee, font size: 9.6pt (12.74px), font weight: normal). Expected contrast ratio of 4.5:1

      HTML element: 
          <span class="progress-speed">13.0 b/s</span>
      Selector: [.upload-status.upload-done:nth-child(2) > .progress-info > .progress-time > .progress-speed]
      Fix any of the following:
        Element has insufficient color contrast of 3.05 (foreground color: #888888, background color: #eeeeee, font size: 9.6pt (12.74px), font weight: normal). Expected contrast ratio of 4.5:1

      HTML element: 
          <span class="progress-remaining"> | 00:00:00</span>
      Selector: [.upload-status.upload-done:nth-child(2) > .progress-info > .progress-time > .progress-remaining]
      Fix any of the following:
        Element has insufficient color contrast of 3.05 (foreground color: #888888, background color: #eeeeee, font size: 9.6pt (12.74px), font weight: normal). Expected contrast ratio of 4.5:1

       

      Attachments

        Activity

          People

            Lucas C Charpentier Lucas
            Lucas C Charpentier Lucas
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

            Dates

              Created:
              Updated:
              Resolved: