Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-50869

Warning colours in bootstrapbase have too low contrast for AA accessibility

XMLWordPrintable

    • MOODLE_28_STABLE, MOODLE_29_STABLE, MOODLE_30_STABLE
    • MOODLE_28_STABLE, MOODLE_29_STABLE
    • wip_MDL-50869_master
    • Hide
      1. Use a Moodle installation that is accessible from the web.
      2. Select the 'Clean' theme.
      3. Create a quiz with one question with feedback.
      4. Take the quiz and show the feedback.
      5. Run the site though 'http://wave.webaim.org/' and confirm for contrast is acceptable.
      6. In a course, create a page and add the following to the content in HTML mode:

        <p>MDL-50869<br></p><div class="control-group warning">.control-group.warning<p class="control-label">.control-label</p> input<input> <div class="input-prepend">.input-prepend <div class="add-on">.add-on</div></div></div><p class="text-warning">.text-warning<br></p><p></p><div class="environmenttable">.environmenttable<p class="warn">p.warn</p></div><p></p><p class="statuswarning">.statuswarning</p><div id="page-admin-report-backups-index">#page-admin-report-backups-index <p class="backup-warning">.backup-warning</p></div><p class="maintenancewarning warning">.maintenancewarning.warning</p><div class="formulation">.formulation select.partiallycorrect,<select class="partiallycorrect"> <option value="mdl">Moodle</option>
          <option value="bb">BlackBorg</option>
          <option value="wp">Wordpress</option>
          <option value="vi">Vi</option></select></div><div class="formulation">.formulation input.partiallycorrect<input class="partiallycorrect"></div><p class="connecting">.connecting<br></p><p><br></p>
        

      7. Which contains all of the selectors that use @warningText when you search the LESS files of the '/theme/bootstrapbase/less' folder. Confirm that all are visually acceptable, type as required into the input boxes. You will find that the maintenance selector floats on the page.
      Show
      Use a Moodle installation that is accessible from the web. Select the 'Clean' theme. Create a quiz with one question with feedback. Take the quiz and show the feedback. Run the site though 'http://wave.webaim.org/' and confirm for contrast is acceptable. In a course, create a page and add the following to the content in HTML mode: <p>MDL-50869<br></p><div class="control-group warning">.control-group.warning<p class="control-label">.control-label</p> input<input> <div class="input-prepend">.input-prepend <div class="add-on">.add-on</div></div></div><p class="text-warning">.text-warning<br></p><p></p><div class="environmenttable">.environmenttable<p class="warn">p.warn</p></div><p></p><p class="statuswarning">.statuswarning</p><div id="page-admin-report-backups-index">#page-admin-report-backups-index <p class="backup-warning">.backup-warning</p></div><p class="maintenancewarning warning">.maintenancewarning.warning</p><div class="formulation">.formulation select.partiallycorrect,<select class="partiallycorrect"> <option value="mdl">Moodle</option> <option value="bb">BlackBorg</option> <option value="wp">Wordpress</option> <option value="vi">Vi</option></select></div><div class="formulation">.formulation input.partiallycorrect<input class="partiallycorrect"></div><p class="connecting">.connecting<br></p><p><br></p> Which contains all of the selectors that use @warningText when you search the LESS files of the '/theme/bootstrapbase/less' folder. Confirm that all are visually acceptable, type as required into the input boxes. You will find that the maintenance selector floats on the page.

      Given the themes forum post: https://moodle.org/mod/forum/discuss.php?d=316936 which demonstrates that the 'alert' box colour is not accessible. This is defined in: https://github.com/moodle/moodle/blob/MOODLE_29_STABLE/theme/bootstrapbase/less/bootstrap/variables.less#L233-L234 and applied here: https://github.com/moodle/moodle/blob/MOODLE_29_STABLE/theme/bootstrapbase/less/moodle/question.less#L225-L229. Interestingly, Bootstrap V3 has fixed this: https://github.com/twbs/bootstrap/blob/master/less/variables.less#L507-L508.

      Therefore I suggest that 'bootstrap-override.less' has:

      @warningText:             #8a6d3b;
      

            gb2048 Gareth J Barnard
            gb2048 Gareth J Barnard
            John Okely John Okely
            David Monllaó David Monllaó
            Jetha Chan Jetha Chan
            Votes:
            1 Vote for this issue
            Watchers:
            6 Start watching this issue

              Created:
              Updated:
              Resolved:

                Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.