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

use font-display: block for Font Awesome to get better accessability scores

    XMLWordPrintable

    Details

    • Type: Improvement
    • Status: Open
    • Priority: Minor
    • Resolution: Unresolved
    • Affects Version/s: 3.11
    • Fix Version/s: None
    • Component/s: Accessibility, Themes
    • Labels:
      None
    • Affected Branches:
      MOODLE_311_STABLE

      Description

      Font Awesome uses font-display: block; in the font declaration of their more recent versions. This is because the Google Lighthouse project dings you in their automated accessability tool if you don't explicitly specify this.

      It's not actually an accessability improvement I think, since the default behaviour is basically the same, but it's slightly nicer visually for the first visit to very slow loading sites, and it won't get flagged by accessability tester tools that check this is set.

      They never added this to old versions, because they want you to upgrade, but we can add it ourselves to this file:

      https://github.com/moodle/moodle/blob/511a87f5fc357f18a4c53911f6e6c7f7b526246e/theme/boost/scss/fontawesome.scss

      We just need to add

      font-display: block;

      Similar to how FontAwesome do it for later versions:

      https://github.com/FortAwesome/Font-Awesome/blob/master/css/all.css#L4601

      Relevent upstream ticket: https://github.com/FortAwesome/Font-Awesome/issues/16077

        Attachments

          Activity

            People

            Assignee:
            Unassigned Unassigned
            Reporter:
            bawjaws David Scotson
            Participants:
            Component watchers:
            Andrew Lyons, Dongsheng Cai, Huong Nguyen, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze, Huong Nguyen, Bas Brands, Mathew May
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

              Dates

              Created:
              Updated: