Merge pull request #15062 from ElectronicBlueberry/hyperlegible-font

Set accessible default font

client/package.json

@@ -22,6 +22,7 @@
     "vue-loader": "15.10.0"
   },
   "dependencies": {
+    "@fontsource/atkinson-hyperlegible": "^4.5.10",
     "@fortawesome/fontawesome-free": "^5.15.4",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-brands-svg-icons": "^5.15.4",

client/src/onload/index.js

@@ -9,6 +9,9 @@ import "scss/base.scss";
 // effects fixing webpack globals.
 import "./publicPath";
 
+// Default Font
+import "@fontsource/atkinson-hyperlegible";
+
 // Module exports appear as objects on window.config in the browser
 export { standardInit } from "./standardInit";
 export { initializations$, addInitialization, prependInitialization, clearInitQueue } from "./initQueue";

client/src/style/scss/theme/blue.scss

@@ -80,8 +80,8 @@ $state-success-bg: theme-color-level("success", $alert-bg-level);
 $state-success-border: theme-color-level("success", $alert-border-level);
 
 // Fonts and sizes
-$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+$font-family-sans-serif: "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 $font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;
 $font-family-base: $font-family-sans-serif;
 $font-size-base: 0.85rem; // default 1rem

client/tests/jest/__mocks__/font.js

@@ -0,0 +1 @@
+export default {};

client/tests/jest/jest.config.js

@@ -78,6 +78,7 @@ module.exports = {
     // Some of these should turn into true mocks, instead of this module name mapping hack.
     moduleNameMapper: {
         "\\.(css|scss)$": "<rootDir>/tests/jest/__mocks__/style.js",
+        "^@fontsource/.*": "<rootDir>/tests/jest/__mocks__/font.js",
         "^config$": "<rootDir>/tests/jest/__mocks__/config.js",
         "utils/localization$": "<rootDir>/tests/jest/__mocks__/localization.js",
         "viz/trackster$": "<rootDir>/tests/jest/__mocks__/trackster.js",

client/yarn.lock

@@ -1233,6 +1233,11 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
+"@fontsource/atkinson-hyperlegible@^4.5.10":
+  version "4.5.10"
+  resolved "https://registry.yarnpkg.com/@fontsource/atkinson-hyperlegible/-/atkinson-hyperlegible-4.5.10.tgz#7571e9d07acfc3c122d077c5c44be1c557c55a6d"
+  integrity sha512-UyKTkEGQnF5lbAYRIPCeAikkVgBPQ8n3ve/cdJX1tp0Kma3pe7cZOVESEK2oyTZqn7Jt3ZS51hbY7hR8u4dLXA==
+
 "@fortawesome/fontawesome-common-types@^0.2.36":
   version "0.2.36"
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz#b44e52db3b6b20523e0c57ef8c42d315532cb903"