feat: Accessibility

README.md

@@ -68,6 +68,7 @@
 - https://web.dev/tags/performance/
 - https://formito.com/tools/favicon
 - (Favicon Generator)[https://favicon.io/]
+- https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs
 - https://simpleicons.org/
 - [Avatar maker](https://avatarmaker.com)
 - https://www.cssscript.com/customizable-interactive-tooltips-pure-javascript-tippy-js/
@@ -79,6 +80,10 @@
 - https://css.gg/app
 - https://cssgradient.io/
 - https://coolors.co/gradient-maker/f8dadc-b6edc8-eeacdc
+- https://gradientbuttons.colorion.co/#google_vignette
+- https://www.colorion.co/
+- https://flatui.colorion.co/
+- https://material.colorion.co/
 - https://doodad.dev/gradient-generator/
 - https://webgradients.com/?ref=usniemvuilaptrinh
 - https://www.checkmycolours.com/
@@ -123,6 +128,7 @@
 - [Preview and Generate Open Graph Meta Tags](https://www.opengraph.xyz/)
 - [OPEN GRAPH CHECKER](https://smallseotools.com/open-graph/)
 - [The Open Graph protocol](https://ogp.me/)
+- META SEO inspector
 - https://xsgames.co/animatiss/
 - [Security Headers](https://securityheaders.com/?q=https%3A%2F%2Flarrychen.tech%2F&followRedirects=on)
 - https://webcode.tools

package.json

@@ -65,7 +65,7 @@
     "css-minimizer-webpack-plugin": "3.4.1",
     "dotenv": "16.0.0",
     "error-overlay-webpack-plugin": "1.1.0",
-    "esbuild": "^0.16.8",
+    "esbuild": "0.16.8",
     "esbuild-loader": "2.20.0",
     "eslint": "8.14.0",
     "eslint-config-standard": "16.0.3",
@@ -99,7 +99,7 @@
     "webpack": "5.72.1",
     "webpack-bundle-analyzer": "4.5.0",
     "webpack-cli": "4.9.2",
-    "webpack-dev-server": "^4.11.1",
+    "webpack-dev-server": "4.11.1",
     "webpack-merge": "5.8.0",
     "webpack-notifier": "1.15.0",
     "webpack-obfuscator": "3.5.1",
@@ -108,11 +108,12 @@
     "workbox-webpack-plugin": "6.5.3"
   },
   "dependencies": {
-    "@emotion/css": "^11.10.0",
+    "@emotion/css": "11.10.0",
     "@fpjs-incubator/botd-agent": "0.1.24",
     "@ppzp/noty": "0.0.4",
     "@sentry/browser": "6.19.7",
     "@sentry/tracing": "6.19.7",
+    "accessibility": "4.5.6",
     "alertifyjs": "1.13.1",
     "axios": "0.26.0",
     "bowser": "2.11.0",
@@ -122,20 +123,20 @@
     "intl-messageformat": "9.13.0",
     "intro.js": "3.0.1",
     "lazysizes": "5.3.2",
-    "medium-zoom": "^1.0.8",
+    "medium-zoom": "1.0.8",
     "normalize.css": "8.0.1",
     "pwacompat": "2.0.17",
     "qrcode": "1.5.0",
-    "quicklink": "^2.3.0",
+    "quicklink": "2.3.0",
     "regenerator-runtime": "0.13.9",
-    "smooth-signature": "^1.0.12",
+    "smooth-signature": "1.0.12",
     "svgxuse": "1.2.6",
     "sw-offline-google-analytics": "0.0.25",
     "tippy.js": "6.3.7",
     "toastifier": "1.2.2",
-    "toastify-js": "^1.11.2",
+    "toastify-js": "1.11.2",
     "toastr": "2.1.4",
-    "viewerjs": "^1.11.1"
+    "viewerjs": "1.11.1"
   },
   "repository": {
     "type": "git",

src/app/components/dialog.css

@@ -25,6 +25,11 @@ only screen and (device-width: 767px) {
 
 .qrcode-dialog .dialog-title {
   flex-grow: 1;
+  margin-block-start: 0px;
+  margin-block-end: 0px;
+  margin-inline-start: 1.33em;
+  margin-inline-end: 1.33em;
+  font-weight: bold;
 }
 
 .qrcode-dialog .close-icon {

src/app/main.js

@@ -2,6 +2,7 @@ import 'lazysizes';
 // import a plugin
 import 'lazysizes/plugins/parent-fit/ls.parent-fit';
 import { listen, prefetch } from 'quicklink';
+import { Accessibility } from 'accessibility';
 // import * as Sentry from '@sentry/browser';
 // import notify from './utils/notify';
 // import notify3 from './utils/notify3';
@@ -153,7 +154,14 @@ window.addEventListener('load', function () { // page is fully loaded
     const flashlightEle = document.querySelector('#flashlightContainer');
     flashlightEle.removeAttribute('hidden');
   }
-});
+  var options = {
+    icon: {
+      position: { bottom: { size: 50, units: 'px' }, right: { size: 0, units: 'px' }, type: 'fixed' },
+    },
+  };
+
+  new Accessibility(options);
+}, false);
 // document.addEventListener('DOMContentLoaded', function () { // DOM fully loaded and parsed
 window.addEventListener('load', function () {
   // Click to open json file