Merge pull request #5359 from thibaudcolas/bug/icons-sr-friendly-implementation-1224

Change icon font implementation to be screen-reader friendly (#1224)
2026-03-31 13:20:40 +00:00 · 2019-06-07 12:57:34 +02:00 · 2019-06-07 12:57:34 +02:00 · 7205bd6a32
commit 7205bd6a32
parent 669c1af4a0 cfea020605
22 changed files with 326 additions and 366 deletions
--- a/client/scss/components/_breadcrumb.scss
+++ b/client/scss/components/_breadcrumb.scss
@ -31,7 +31,7 @@
                // z-index: 5;
                position: absolute;
                font-family: wagtail;
-                content: 'n';
+                content: map-get($icons, 'arrow-right');
                padding-left: 20px;
                font-size: 2em;
                color: $color-teal-darker;
--- a/client/scss/components/_chooser.scss
+++ b/client/scss/components/_chooser.scss
@ -85,7 +85,7 @@ overriden here? hmm.
    .unchosen,
    .chosen {
        &:before {
-            content: 'b';
+            content: map-get($icons, 'doc-empty-inverse');
        }
    }
 }
@ -94,7 +94,7 @@ overriden here? hmm.
    .unchosen,
    .chosen {
        &:before {
-            content: 'D';
+            content: map-get($icons, 'snippet');
        }
    }
 }
@ -103,7 +103,7 @@ overriden here? hmm.
    .unchosen,
    .chosen {
        &:before {
-            content: 'r';
+            content: map-get($icons, 'doc-full-inverse');
        }
    }
 }
@ -112,7 +112,7 @@ overriden here? hmm.
    .unchosen,
    .chosen {
        &:before {
-            content: 'o';
+            content: map-get($icons, 'image');
        }
    }

--- a/client/scss/components/_forms.scss
+++ b/client/scss/components/_forms.scss
@ -92,7 +92,7 @@ select::-ms-expand {
        bottom: 0;
        width: 1.5em;
        font-family: wagtail;
-        content: 'q';
+        content: map-get($icons, 'arrow-down');
        border: 1px solid $color-input-border;
        border-width: 0 0 0 1px;
        text-align: center;
--- a/client/scss/components/_help-block.scss
+++ b/client/scss/components/_help-block.scss
@ -30,7 +30,7 @@
        position: absolute;
        left: 1em;
        top: 0.7em;
-        content: '?';
+        content: map-get($icons, 'help');
        font-size: 1.4em;
    }
 }
@ -48,7 +48,7 @@

    &:before {
        color: $color-orange;
-        content: '!';
+        content: map-get($icons, 'warning');
    }
 }

@ -57,6 +57,6 @@

    &:before {
        color: $color-red;
-        content: '!';
+        content: map-get($icons, 'warning');
    }
 }
--- a/client/scss/components/_icons.scss
+++ b/client/scss/components/_icons.scss
@ -67,37 +67,11 @@
    font-size: 1.1rem;
 }

-.icon-view:before {
-    content: '4';
-}
-
-.icon-no-view:before {
-    content: '^';
-}
-
-.icon-collapse-down:before {
-    content: '5';
-}
-
-.icon-collapse-up:before {
-    content: '6';
-}
-
-.icon-date:before {
-    content: '7';
-}
-
-.icon-time:before {
-    content: '8';
-}
-
-
 .icon-spinner:after,
 .icon-spinner:before {
    width: 1em;
    animation: spin 0.5s infinite linear;
    display: inline-block;
-    // content: '1';
 }

 .icon-horizontalrule:before {
@ -148,7 +122,7 @@
    $size: 15px;

    &:before {
-        content: '?';
+        content: map-get($icons, 'help');
        display: inline-block;
        width: $size;
        height: $size;
--- a/client/scss/components/_loading-mask.scss
+++ b/client/scss/components/_loading-mask.scss
@ -28,7 +28,7 @@
            margin: -15px 0 0 -15px;
            font-family: wagtail;
            animation: spin 0.5s infinite linear;
-            content: '1';
+            content: map-get($icons, 'spinner');
            z-index: 2;
            color: $color-teal;
        }
--- a/client/scss/components/_main-nav.scss
+++ b/client/scss/components/_main-nav.scss
@ -232,7 +232,7 @@
            font-family: wagtail;
            font-weight: 200;
            text-transform: none;
-            content: 'f';
+            content: map-get($icons, 'search');
            display: block;
            height: 100%;
            line-height: 3.3em;
--- a/client/scss/components/_messages.scss
+++ b/client/scss/components/_messages.scss
@ -36,7 +36,7 @@

        &:before {
            font-family: wagtail;
-            content: '!';
+            content: map-get($icons, 'warning');
        }
    }

@ -45,7 +45,7 @@

        &:before {
            font-family: wagtail;
-            content: '!';
+            content: map-get($icons, 'warning');
        }
    }

@ -54,7 +54,7 @@

        &:before {
            font-family: wagtail;
-            content: '9';
+            content: map-get($icons, 'success');
        }
    }

--- a/client/scss/components/_streamfield.scss
+++ b/client/scss/components/_streamfield.scss
@ -261,7 +261,7 @@ li.sequence-member {
            transform: rotate(-45deg);
            position: absolute;
            font-family: wagtail;
-            content: 'B';
+            content: map-get($icons, 'plus-inverse');
            line-height: 1em;
            text-align: center;
        }
--- a/client/scss/components/_tabs.scss
+++ b/client/scss/components/_tabs.scss
@ -68,7 +68,7 @@
            font-family: wagtail;
            vertical-align: middle;
            text-transform: none;
-            content: 'w';
+            content: map-get($icons, 'cog');
            margin-right: 0.5em;
            font-size: 1.2em;
            font-weight: normal;
--- a/client/scss/components/_tag.scss
+++ b/client/scss/components/_tag.scss
@ -12,7 +12,7 @@
        font-family: wagtail;
        display: inline-block;
        color: $color-white;
-        content: 'u';
+        content: map-get($icons, 'tag');
        padding-right: 0.5em;
    }

--- a/client/scss/elements/_forms.scss
+++ b/client/scss/elements/_forms.scss
@ -131,7 +131,7 @@ input[type=radio]:before {
    left: -2px;
    cursor: pointer;
    display: block;
-    content: 'K';
+    content: map-get($icons, 'radio-full');
    width: 1em;
    height: 1em;
    line-height: 1.1em;
@ -142,7 +142,7 @@ input[type=radio]:before {
 }

 input[type=radio]:checked:before {
-    content: 'K';
+    content: map-get($icons, 'radio-full');
    color: $color-teal;
 }

@ -161,7 +161,7 @@ input[type=checkbox]:before {
    top: -5px;
    cursor: pointer;
    display: block;
-    content: 'x';
+    content: map-get($icons, 'tick');
    line-height: 20px;
    width: 20px;
    height: 20px;
--- a/client/scss/overrides/_vendor.datetimepicker.scss
+++ b/client/scss/overrides/_vendor.datetimepicker.scss
@ -84,7 +84,7 @@
        float: left;

        &:before {
-            content: 'z';
+            content: map-get($icons, 'arrow-left');
        }
    }

@ -93,7 +93,7 @@
        margin-left: 5px;

        &:before {
-            content: 'W';
+            content: map-get($icons, 'home');
        }
    }

@ -101,7 +101,7 @@
        float: right;

        &:before {
-            content: 'n';
+            content: map-get($icons, 'arrow-right');
        }
    }

@ -127,11 +127,11 @@
        }

        .xdsoft_prev:before {
-            content: 'e';
+            content: map-get($icons, 'arrow-up');
        }

        .xdsoft_next:before {
-            content: 'q';
+            content: map-get($icons, 'arrow-down');
        }

        .xdsoft_time_box {
--- a/client/scss/overrides/_vendor.tagit.scss
+++ b/client/scss/overrides/_vendor.tagit.scss
@ -34,7 +34,7 @@
        font-family: wagtail;
        display: block;
        color: $color-grey-3;
-        content: 'g';
+        content: map-get($icons, 'cross');
    }

    .ui-icon-close:hover:before {
--- a/client/scss/settings/_variables.icons.scss
+++ b/client/scss/settings/_variables.icons.scss
@ -1,88 +1,87 @@
 $icons: (
-    'cogs': 'a',
-    'doc-empty-inverse': 'b',
-    'doc-empty': 'c',
-    'edit': 'd',
-    'arrow-up': 'e',
-    'arrow-down': 'q',
-    'search': 'f',
-    'cross': 'g',
-    'folder-open-1': 'i',
-    'folder-inverse': 'j',
-    'mail': 'k',
-    'arrows-up-down': 'l',
-    'locked': 'm',
-    'arrow-right': 'n',
-    'doc-full': 'h',
-    'file-text-alt': 'h',
-    'image': 'o',
-    'picture': 'o',
-    'unlocked': 'p',
-    'doc-full-inverse': 'r',
-    'folder': 's',
-    'plus': 't',
-    'tag': 'u',
-    'folder-open-inverse': 'v',
-    'cog': 'w',
-    'tick': 'x',
-    'user': 'y',
-    'arrow-left': 'z',
-    'tick-inverse': 'A',
-    'plus-inverse': 'B',
-    'snippet': 'D',
-    'wagtail': 'V',
-    'wagtail-inverse': '0',
-    'bold': 'C',
-    'italic': 'E',
-    'undo': 'H',
-    'repeat': 'I',
-    'list-ol': 'G',
-    'list-ul': 'F',
-    'link': 'J',
-    'radio-full': 'K',
-    'radio-empty': 'L',
-    'arrow-up-big': 'M',
-    'arrow-down-big': 'N',
-    'group': 'O',
-    'media': 'P',
-    'password': 'Q',
-    'download': 'S',
-    'order': 'T',
-    'grip': 'U',
-    'home': 'W',
-    'order-down': 'X',
-    'order-up': 'Y',
-    'bin': 'Z',
-    'spinner': '1',
-    'pick': '2',
-    'redirect': '3',
-    'view': '4',
-    'no-view': '^',
-    'collapse-down': '5',
-    'collapse-up': '6',
-    'date': '7',
-    'time': '8',
-    'success': '9',
-    'help': '?',
-    'warning': '!',
-    'form': '$',
-    'site': '@',
-    'placeholder': '{',
-    'pilcrow': '\e600',
-    'title': '\f034',
-    'code': '\e601',
-    'openquote': '“',
+    'arrow-down-big': '\e030',
+    'arrow-down': '\e01a',
+    'arrow-left': '\e022',
+    'arrow-right': '\e017',
+    'arrow-up-big': '\e02f',
+    'arrow-up': '\e010',
+    'arrows-up-down': '\e016',
+    'bin': '\e038',
+    'bold': '\e026',
+    'chain-broken': '\e047',
+    'code': '\e001',
+    'cog': '\e020',
+    'cogs': '\e00c',
+    'collapse-down': '\e03f',
+    'collapse-up': '\e03e',
+    'cross': '\e012',
+    'date': '\e045',
+    'doc-empty-inverse': '\e00d',
+    'doc-empty': '\e00e',
+    'doc-full-inverse': '\e01b',
+    'doc-full': '\e018',
+    'download': '\e044',
+    'edit': '\e00f',
+    'folder-inverse': '\e014',
+    'folder-open-1': '\e013',
+    'folder-open-inverse': '\e01f',
+    'folder': '\e01c',
+    'form': '\e00b',
+    'grip': '\e03b',
+    'group': '\e031',
+    'help': '\e041',
+    'home': '\e035',
+    // horizontalrule is not rendered as an icon font – it uses a unicode dash character rendered with a fallback font.
    'horizontalrule': '\2014',
-    'chain-broken': '\e900',
-    'table': '\f0ce',
-    'logout': '\e901',
-    'superscript': '\f12b',
-    'subscript': '\f12c',
-    'strikethrough': '\f0cc'
+    'image': '\e019',
+    'italic': '\e027',
+    'link': '\e02c',
+    'list-ol': '\e029',
+    'list-ul': '\e028',
+    'locked': '\e009',
+    'logout': '\e049',
+    'mail': '\e015',
+    'media': '\e032',
+    'no-view': '\e006',
+    'openquote': '\e000',
+    'order-down': '\e036',
+    'order-up': '\e037',
+    'order': '\e034',
+    'password': '\e033',
+    'pick': '\e03d',
+    'pilcrow': '\e002',
+    'placeholder': '\e003',
+    'plus-inverse': '\e024',
+    'plus': '\e01d',
+    'radio-empty': '\e02e',
+    'radio-full': '\e02d',
+    'redirect': '\e03c',
+    'repeat': '\e02b',
+    'search': '\e011',
+    'site': '\e007',
+    'snippet': '\e025',
+    'spinner': '\e03a',
+    'strikethrough': '\e04a',
+    'subscript': '\e04c',
+    'success': '\e043',
+    'superscript': '\e04b',
+    'table': '\e048',
+    'tag': '\e01e',
+    'tick-inverse': '\e023',
+    'tick': '\e021',
+    'time': '\e008',
+    'title': '\e046',
+    'undo': '\e02a',
+    'unlocked': '\e00a',
+    'user': '\e004',
+    'view': '\e005',
+    'wagtail-inverse': '\e040',
+    'wagtail': '\e039',
+    'warning': '\e042',
 );

 $icons-after: (
-    'arrow-down-after': 'q',
-    'arrow-up-after': 'e',
-    'arrow-right-after': 'n'
+    'arrow-down-after': map-get($icons, 'arrow-down'),
+    'arrow-right-after': map-get($icons, 'arrow-right'),
+    'arrow-up-after': map-get($icons, 'arrow-up'),
 );
--- a/docs/contributing/css_guidelines.rst
+++ b/docs/contributing/css_guidelines.rst
@ -96,7 +96,7 @@ Formatting
   param, e.g., ``rgba(#000, .5)``).
 -  Use ``//`` for comment blocks (instead of ``/* */``).
 -  Use single quotes for string values
-   ``background: url('my/image.png')`` or ``content: 'moose'``
+   ``background: url('my/image.png')``
 -  Avoid specifying units for zero values, e.g., ``margin: 0;`` instead
   of ``margin: 0px;``.
 -  Strive to limit use of shorthand declarations to instances where you
--- a/wagtail/admin/static_src/wagtailadmin/fonts/wagtail-icomoon.json
+++ b/wagtail/admin/static_src/wagtailadmin/fonts/wagtail-icomoon.json
--- a/wagtail/admin/static_src/wagtailadmin/fonts/wagtail.woff
+++ b/wagtail/admin/static_src/wagtailadmin/fonts/wagtail.woff
--- a/wagtail/admin/static_src/wagtailadmin/scss/layouts/page-editor.scss
+++ b/wagtail/admin/static_src/wagtailadmin/scss/layouts/page-editor.scss
@ -121,7 +121,7 @@ $object-title-height: 40px;
            text-shadow: none;
            font-family: wagtail;
            text-transform: none;
-            content: 'q';
+            content: map-get($icons, 'arrow-down');
            text-align: center;
            display: block;
            position: absolute;
@ -219,7 +219,7 @@ $object-title-height: 40px;
    // special panel for the publishing fields, requires a bit more pizzazz
    &.publishing {
        > h2:before {
-            content: '7';
+            content: map-get($icons, 'date');
            font-size: 1.8rem;
            line-height: 1.4em;
            width: 1.4em;
@ -304,7 +304,7 @@ $object-title-height: 40px;
        > h2 {
            &:before,
            > label:before {
-                content: '6';
+                content: map-get($icons, 'collapse-up');
                cursor: pointer;
            }
        }
@ -313,7 +313,7 @@ $object-title-height: 40px;
            > h2 {
                &:before,
                > label:before {
-                    content: '5';
+                    content: map-get($icons, 'collapse-down');
                }
            }
        }
--- a/wagtail/contrib/styleguide/templates/wagtailstyleguide/base.html
+++ b/wagtail/contrib/styleguide/templates/wagtailstyleguide/base.html
@ -767,84 +767,84 @@
            <h2>Icons</h2>

            <ul class="unlist">
-                <li class="icon icon-wagtail">wagtail</li>
-                <li class="icon icon-wagtail-inverse">wagtail-inverse</li>
+                <li class="icon icon-arrow-down-big">arrow-down-big</li>
+                <li class="icon icon-arrow-down">arrow-down</li>
+                <li class="icon icon-arrow-left">arrow-left</li>
+                <li class="icon icon-arrow-right">arrow-right</li>
+                <li class="icon icon-arrow-up-big">arrow-up-big</li>
+                <li class="icon icon-arrow-up">arrow-up</li>
+                <li class="icon icon-arrows-up-down">arrows-up-down</li>
+                <li class="icon icon-bin">bin</li>
+                <li class="icon icon-bold">bold</li>
+                <li class="icon icon-chain-broken">chain-broken</li>
+                <li class="icon icon-code">code</li>
+                <li class="icon icon-cog">cog</li>
                <li class="icon icon-cogs">cogs</li>
+                <li class="icon icon-collapse-down">collapse-down</li>
+                <li class="icon icon-collapse-up">collapse-up</li>
+                <li class="icon icon-cross">cross</li>
+                <li class="icon icon-date">date</li>
                <li class="icon icon-doc-empty-inverse">doc-empty-inverse</li>
                <li class="icon icon-doc-empty">doc-empty</li>
-                <li class="icon icon-edit">edit</li>
-                <li class="icon icon-arrow-up">arrow-up</li>
-                <li class="icon icon-arrow-down">arrow-down</li>
-                <li class="icon icon-search">search</li>
-                <li class="icon icon-cross">cross</li>
-                <li class="icon icon-folder-open-1">folder-open-1</li>
-                <li class="icon icon-folder-inverse">folder-inverse</li>
-                <li class="icon icon-mail">mail</li>
-                <li class="icon icon-arrows-up-down">arrows-up-down</li>
-                <li class="icon icon-locked">locked</li>
-                <li class="icon icon-unlocked">unlocked</li>
-                <li class="icon icon-arrow-right">arrow-right</li>
-                <li class="icon icon-doc-full">doc-full / file-text-alt</li>
-                <li class="icon icon-image">image / picture</li>
                <li class="icon icon-doc-full-inverse">doc-full-inverse</li>
-                <li class="icon icon-folder">folder</li>
-                <li class="icon icon-plus">plus</li>
-                <li class="icon icon-tag">tag</li>
+                <li class="icon icon-doc-full">doc-full</li>
+                <li class="icon icon-download">download</li>
+                <li class="icon icon-edit">edit</li>
+                <li class="icon icon-folder-inverse">folder-inverse</li>
+                <li class="icon icon-folder-open-1">folder-open-1</li>
                <li class="icon icon-folder-open-inverse">folder-open-inverse</li>
-                <li class="icon icon-cog">cog</li>
-                <li class="icon icon-tick">tick</li>
-                <li class="icon icon-user">user</li>
-                <li class="icon icon-arrow-left">arrow-left</li>
-                <li class="icon icon-tick-inverse">tick-inverse</li>
-                <li class="icon icon-plus-inverse">plus-inverse</li>
-                <li class="icon icon-snippet">snippet</li>
-                <li class="icon icon-bold">bold</li>
+                <li class="icon icon-folder">folder</li>
+                <li class="icon icon-form">form</li>
+                <li class="icon icon-grip">grip</li>
+                <li class="icon icon-group">group</li>
+                <li class="icon icon-help">help</li>
+                <li class="icon icon-home">home</li>
+                <li class="icon icon-horizontalrule">horizontalrule</li>
+                <li class="icon icon-image">image</li>
                <li class="icon icon-italic">italic</li>
-                <li class="icon icon-undo">undo</li>
-                <li class="icon icon-repeat">repeat</li>
+                <li class="icon icon-link">link</li>
                <li class="icon icon-list-ol">list-ol</li>
                <li class="icon icon-list-ul">list-ul</li>
-                <li class="icon icon-link">link</li>
-                <li class="icon icon-radio-full">radio-full</li>
-                <li class="icon icon-radio-empty">radio-empty</li>
-                <li class="icon icon-arrow-up-big">arrow-up-big</li>
-                <li class="icon icon-arrow-down-big">arrow-down-big</li>
-                <li class="icon icon-group">group</li>
+                <li class="icon icon-locked">locked</li>
+                <li class="icon icon-logout">logout</li>
+                <li class="icon icon-mail">mail</li>
                <li class="icon icon-media">media</li>
-                <li class="icon icon-horizontalrule">horizontalrule</li>
-                <li class="icon icon-password">password</li>
-                <li class="icon icon-download">download</li>
-                <li class="icon icon-order">order</li>
-                <li class="icon icon-grip">grip</li>
-                <li class="icon icon-home">home</li>
+                <li class="icon icon-no-view">no-view</li>
+                <li class="icon icon-openquote">openquote</li>
                <li class="icon icon-order-down">order-down</li>
                <li class="icon icon-order-up">order-up</li>
-                <li class="icon icon-bin">bin</li>
-                <li class="spinner"><div class="icon icon-spinner">spinner</div> spinner</li>
+                <li class="icon icon-order">order</li>
+                <li class="icon icon-password">password</li>
                <li class="icon icon-pick">pick</li>
-                <li class="icon icon-redirect">redirect</li>
-                <li class="icon icon-view">view</li>
-                <li class="icon icon-no-view">no-view</li>
-                <li class="icon icon-collapse-up">collapse-up</li>
-                <li class="icon icon-collapse-down">collapse-down</li>
-                <li class="icon icon-help">help</li>
-                <li class="icon icon-warning">warning</li>
-                <li class="icon icon-success">success</li>
-                <li class="icon icon-date">date</li>
-                <li class="icon icon-time">time</li>
-                <li class="icon icon-form">form</li>
-                <li class="icon icon-site">site</li>
-                <li class="icon icon-placeholder">placeholder</li>
                <li class="icon icon-pilcrow">pilcrow</li>
-                <li class="icon icon-title">title</li>
-                <li class="icon icon-code">code</li>
-                <li class="icon icon-openquote">openquote</li>
-                <li class="icon icon-chain-broken">chain-broken</li>
-                <li class="icon icon-table">table</li>
-                <li class="icon icon-logout">logout</li>
-                <li class="icon icon-superscript">superscript</li>
-                <li class="icon icon-subscript">subscript</li>
+                <li class="icon icon-placeholder">placeholder</li>
+                <li class="icon icon-plus-inverse">plus-inverse</li>
+                <li class="icon icon-plus">plus</li>
+                <li class="icon icon-radio-empty">radio-empty</li>
+                <li class="icon icon-radio-full">radio-full</li>
+                <li class="icon icon-redirect">redirect</li>
+                <li class="icon icon-repeat">repeat</li>
+                <li class="icon icon-search">search</li>
+                <li class="icon icon-site">site</li>
+                <li class="icon icon-snippet">snippet</li>
+                <li class="spinner"><div class="icon icon-spinner">spinner</div> spinner</li>
                <li class="icon icon-strikethrough">strikethrough</li>
+                <li class="icon icon-subscript">subscript</li>
+                <li class="icon icon-success">success</li>
+                <li class="icon icon-superscript">superscript</li>
+                <li class="icon icon-table">table</li>
+                <li class="icon icon-tag">tag</li>
+                <li class="icon icon-tick-inverse">tick-inverse</li>
+                <li class="icon icon-tick">tick</li>
+                <li class="icon icon-time">time</li>
+                <li class="icon icon-title">title</li>
+                <li class="icon icon-undo">undo</li>
+                <li class="icon icon-unlocked">unlocked</li>
+                <li class="icon icon-user">user</li>
+                <li class="icon icon-view">view</li>
+                <li class="icon icon-wagtail-inverse">wagtail-inverse</li>
+                <li class="icon icon-wagtail">wagtail</li>
+                <li class="icon icon-warning">warning</li>
            </ul>

        </section>
--- a/wagtail/documents/static_src/wagtaildocs/js/hallo-plugins/hallo-wagtaildoclink.js
+++ b/wagtail/documents/static_src/wagtaildocs/js/hallo-plugins/hallo-wagtaildoclink.js
@ -15,7 +15,7 @@
                    uuid: this.options.uuid,
                    editable: this.options.editable,
                    label: 'Documents',
-                    icon: 'icon-file-text-alt',
+                    icon: 'icon-doc-full',
                    command: null
                });
                toolbar.append(button);
--- a/wagtail/images/static_src/wagtailimages/js/hallo-plugins/hallo-wagtailimage.js
+++ b/wagtail/images/static_src/wagtailimages/js/hallo-plugins/hallo-wagtailimage.js
@ -15,7 +15,7 @@
                    uuid: this.options.uuid,
                    editable: this.options.editable,
                    label: 'Images',
-                    icon: 'icon-picture',
+                    icon: 'icon-image',
                    command: null
                });
                toolbar.append(button);