From a2881093b3707103d6fa75dfab10d59b07c127d7 Mon Sep 17 00:00:00 2001
From: Arnaud KINNOUDO <kinnoudoarnaud@gmail.com>
Date: Fri, 26 May 2023 18:52:03 +0100
Subject: [PATCH 1/3] reduce logic to decrease or increase font-size

---
 src/AccessibilityToolbar.vue | 502 +++++++++++++++++++----------------
 1 file changed, 271 insertions(+), 231 deletions(-)

diff --git a/src/AccessibilityToolbar.vue b/src/AccessibilityToolbar.vue
index a67aafa..15cf5db 100644
--- a/src/AccessibilityToolbar.vue
+++ b/src/AccessibilityToolbar.vue
@@ -1,36 +1,58 @@
 <template>
   <div class="fab">
     <span class="fab-action-button" @click="showToolbar = !showToolbar">
-      <i class="material-icons fab-action-button-icon">
-        accessibility
-      </i>
+      <i class="material-icons fab-action-button-icon"> accessibility </i>
     </span>
     <transition name="fade">
-      <div class='accessibility-toolbar' v-if="showToolbar">
+      <div class="accessibility-toolbar" v-if="showToolbar">
         <ul class="accessibility-items">
           <li class="accessibility-item">
-            <a class="accessibility-menu-item" :data-tooltip="invertColorsText" v-bind:class="{ active: accessibilityStates.inverted }" @click="toggleState('inverted')" :aria-label="invertColorsText">
+            <a
+              class="accessibility-menu-item"
+              :data-tooltip="invertColorsText"
+              v-bind:class="{ active: accessibilityStates.inverted }"
+              @click="toggleState('inverted')"
+              :aria-label="invertColorsText"
+            >
               <i class="material-icons accessibility-menu-item-icon">
                 invert_colors
               </i>
             </a>
           </li>
           <li>
-            <a class="accessibility-menu-item" :data-tooltip="highlightLinksText" v-bind:class="{ active: accessibilityStates.highlighted }" @click="toggleState('highlighted')" :aria-label="highlightLinksText">
+            <a
+              class="accessibility-menu-item"
+              :data-tooltip="highlightLinksText"
+              v-bind:class="{ active: accessibilityStates.highlighted }"
+              @click="toggleState('highlighted')"
+              :aria-label="highlightLinksText"
+            >
               <i class="material-icons accessibility-menu-item-icon">
                 highlight
               </i>
             </a>
           </li>
           <li>
-            <a class="accessibility-menu-item" :data-tooltip="grayscaleText" v-bind:class="{ active: accessibilityStates.greyscaled }" @click="toggleState('greyscaled')" :aria-label="grayscaleText">
+            <a
+              class="accessibility-menu-item"
+              :data-tooltip="grayscaleText"
+              v-bind:class="{ active: accessibilityStates.greyscaled }"
+              @click="toggleState('greyscaled')"
+              :aria-label="grayscaleText"
+            >
               <i class="material-icons accessibility-menu-item-icon">
                 format_color_reset
               </i>
             </a>
           </li>
           <li>
-            <a class="accessibility-menu-item" :data-tooltip="accessibileFontSizeText" v-bind:class="{ active: accessibilityStates.accessibileFontSize }" @click="toggleState('accessibileFontSize')" :aria-label="accessibileFontSizeText">
+            <a
+              class="accessibility-menu-item"
+              :data-tooltip="accessibileFontSizeText"
+              v-bind:class="{ active: accessibilityStates.accessibileFontSize }"
+              @click="toggleState('accessibileFontSize')"
+              :aria-label="accessibileFontSizeText"
+            >
               <i class="material-icons accessibility-menu-item-icon">
                 format_size
               </i>
@@ -43,26 +65,25 @@
 </template>
 
 <script>
-
 export default {
-  name: 'AccessibilityToolbar',
+  name: "AccessibilityToolbar",
   props: {
     invertColorsText: {
       type: String,
-      default: "Invert Colors"
+      default: "Invert Colors",
     },
     highlightLinksText: {
       type: String,
-      default: "Highlight Links"
+      default: "Highlight Links",
     },
     grayscaleText: {
       type: String,
-      default: "Desaturate"
+      default: "Desaturate",
     },
     accessibileFontSizeText: {
       type: String,
-      default: "Increase Text Size"
-    }
+      default: "Increase Text Size",
+    },
   },
   data() {
     return {
@@ -70,280 +91,299 @@ export default {
         inverted: false,
         highlighted: false,
         accessibileFontSize: false,
-        greyscaled: false
+        greyscaled: false,
       },
       showToolbar: false,
-    }
+    };
   },
   methods: {
     toggleState(state) {
-      this.accessibilityStates[state] = !this.accessibilityStates[state]
-      this.applyState(state)
+      this.accessibilityStates[state] = !this.accessibilityStates[state];
+      this.applyState(state);
     },
     applyState(state) {
       if (state === "inverted") {
-        this.resetHighlightLinks()
-        this.resetGrayscale()
-        this.accessibilityStates[state] ?
-          document.body.classList.add("accessibility-contrast") :
-          document.body.classList.remove("accessibility-contrast")
+        this.resetHighlightLinks();
+        this.resetGrayscale();
+        this.accessibilityStates[state]
+          ? document.body.classList.add("accessibility-contrast")
+          : document.body.classList.remove("accessibility-contrast");
       } else if (state === "greyscaled") {
-        this.resetHighlightLinks()
-        this.resetInvertContrast()
-        this.accessibilityStates[state] ?
-          document.body.classList.add("accessibility-greyscale") :
-          document.body.classList.remove("accessibility-greyscale")
+        this.resetHighlightLinks();
+        this.resetInvertContrast();
+        this.accessibilityStates[state]
+          ? document.body.classList.add("accessibility-greyscale")
+          : document.body.classList.remove("accessibility-greyscale");
       } else if (state === "highlighted") {
-        this.resetGrayscale()
-        this.resetInvertContrast()
-        this.hightlightLinks()
+        this.resetGrayscale();
+        this.resetInvertContrast();
+        this.hightlightLinks();
       } else if (state === "accessibileFontSize") {
-        this.accessibilityStates[state] ?
-          document.body.classList.add("accessibility-font") :
-          document.body.classList.remove("accessibility-font")
+        this.accessibilityStates[state]
+          ? increaseDecreaseFontSize(document.body, 1)
+          : increaseDecreaseFontSize(document.body, -1);
       }
     },
     resetInvertContrast() {
-      this.accessibilityStates.inverted = false
-      document.body.classList.remove("accessibility-contrast")
+      this.accessibilityStates.inverted = false;
+      document.body.classList.remove("accessibility-contrast");
     },
     resetGrayscale() {
-      this.accessibilityStates.greyscaled = false
-      document.body.classList.remove("accessibility-greyscale")
+      this.accessibilityStates.greyscaled = false;
+      document.body.classList.remove("accessibility-greyscale");
     },
     resetHighlightLinks() {
-      this.accessibilityStates.highlighted = false
-      this.hightlightLinks()
+      this.accessibilityStates.highlighted = false;
+      this.hightlightLinks();
     },
     hightlightLinks() {
       for (let link of this.links) {
         if (!link.classList.contains("accessibility-menu-item")) {
-          this.accessibilityStates.highlighted ? link.classList.add("accessibility-highlight-link") : link.classList.remove("accessibility-highlight-link")
+          this.accessibilityStates.highlighted
+            ? link.classList.add("accessibility-highlight-link")
+            : link.classList.remove("accessibility-highlight-link");
         }
       }
     },
     invertContrast(percent) {
-      document.body.style.setProperty('filter', `invert(${percent})`)
-    }
+      document.body.style.setProperty("filter", `invert(${percent})`);
+    },
+    increaseDecreaseFontSize(node, step = 0) {
+      if (node.nodeType === Node.TEXT_NODE) {
+        // Increase the font size of the text node by 3 pixels
+        node.parentNode.style.fontSize = `${
+          parseFloat(node.parentNode.style.fontSize || 16) + step
+        }px`;
+      } else {
+        // Traverse child nodes if the current node is not a text node
+        for (let i = 0; i < node.childNodes.length; i++) {
+          increaseFontSize(node.childNodes[i]);
+        }
+      }
+    },
   },
   computed: {
     links() {
-      return [...document.querySelectorAll('a')]
-    }
+      return [...document.querySelectorAll("a")];
+    },
   },
   mounted() {
-    if (localStorage.getItem('accessibility-settings')) {
-      this.accessibilityStates = JSON.parse(localStorage.getItem('accessibility-settings'))
+    if (localStorage.getItem("accessibility-settings")) {
+      this.accessibilityStates = JSON.parse(
+        localStorage.getItem("accessibility-settings")
+      );
       for (var state in this.accessibilityStates) {
-        if (this.accessibilityStates[state]) this.applyState(state)
+        if (this.accessibilityStates[state]) this.applyState(state);
       }
     }
   },
   watch: {
     accessibilityStates: {
       handler() {
-        localStorage.setItem('accessibility-settings', JSON.stringify(this.accessibilityStates));
+        localStorage.setItem(
+          "accessibility-settings",
+          JSON.stringify(this.accessibilityStates)
+        );
       },
       deep: true,
     },
-  }
-}
+  },
+};
 </script>
 
 <style scoped>
-  ul {
-    margin: 0;
-    padding: 0;
-    font-weight: normal;
-  }
-  [data-tooltip] {
-    position: relative;
-    z-index: 2;
-    cursor: pointer;
-  }
+ul {
+  margin: 0;
+  padding: 0;
+  font-weight: normal;
+}
+[data-tooltip] {
+  position: relative;
+  z-index: 2;
+  cursor: pointer;
+}
 
-  /* Hide the tooltip content by default */
-  [data-tooltip]:before,
-  [data-tooltip]:after {
-    visibility: hidden;
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
-    opacity: 0;
-    pointer-events: none;
-  }
+/* Hide the tooltip content by default */
+[data-tooltip]:before,
+[data-tooltip]:after {
+  visibility: hidden;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
+  opacity: 0;
+  pointer-events: none;
+}
 
-  /* Position tooltip above the element */
-  [data-tooltip]:before {
-    position: absolute;
-    bottom: 105%;
-    left: 50%;
-    margin-bottom: 5px;
-    margin-left: -80px;
-    padding: 7px;
-    width: 160px;
-    -webkit-border-radius: 3px;
-    -moz-border-radius: 3px;
-    border-radius: 3px;
-    background-color: #000;
-    background-color: hsla(0, 0%, 20%, 0.9);
-    color: #fff;
-    content: attr(data-tooltip);
-    text-align: center;
-    font-size: 14px;
-    line-height: 1.2;
-  }
+/* Position tooltip above the element */
+[data-tooltip]:before {
+  position: absolute;
+  bottom: 105%;
+  left: 50%;
+  margin-bottom: 5px;
+  margin-left: -80px;
+  padding: 7px;
+  width: 160px;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  background-color: #000;
+  background-color: hsla(0, 0%, 20%, 0.9);
+  color: #fff;
+  content: attr(data-tooltip);
+  text-align: center;
+  font-size: 14px;
+  line-height: 1.2;
+}
 
-  /* Triangle hack to make tooltip look like a speech bubble */
-  [data-tooltip]:after {
-    position: absolute;
-    bottom: 105%;
-    left: 50%;
-    margin-left: -5px;
-    width: 0;
-    border-top: 5px solid #000;
-    border-top: 5px solid hsla(0, 0%, 20%, 0.9);
-    border-right: 5px solid transparent;
-    border-left: 5px solid transparent;
-    content: " ";
-    font-size: 0;
-    line-height: 0;
-  }
+/* Triangle hack to make tooltip look like a speech bubble */
+[data-tooltip]:after {
+  position: absolute;
+  bottom: 105%;
+  left: 50%;
+  margin-left: -5px;
+  width: 0;
+  border-top: 5px solid #000;
+  border-top: 5px solid hsla(0, 0%, 20%, 0.9);
+  border-right: 5px solid transparent;
+  border-left: 5px solid transparent;
+  content: " ";
+  font-size: 0;
+  line-height: 0;
+}
 
-  /* Show tooltip content on hover */
-  [data-tooltip]:hover:before,
-  [data-tooltip]:hover:after {
-    visibility: visible;
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
-    opacity: 1;
-  }
+/* Show tooltip content on hover */
+[data-tooltip]:hover:before,
+[data-tooltip]:hover:after {
+  visibility: visible;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
+  opacity: 1;
+}
 
-  .accessibility-items {
-    list-style-type: none;
-  }
-  .accessibility-toolbar {
-    width: 300px;
-    position: absolute;
-    left: 65px;
-    bottom: 50%;
-    margin-bottom: 2px;
-  }
-  .accessibility-menu-item-icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-  .accessibility-menu-item {
-    border-radius: 100px;
-    border: 2px solid #2196F3;
-    text-align: center;
-    float: left;
-    width: 50px;
-    height: 50px;
-    transition: all 0.3s ease;
-    background: white;
-    color: black;
-    font-size: 30px;
-    cursor: pointer;
-    margin-right: 10px;
-  }
+.accessibility-items {
+  list-style-type: none;
+}
+.accessibility-toolbar {
+  width: 300px;
+  position: absolute;
+  left: 65px;
+  bottom: 50%;
+  margin-bottom: 2px;
+}
+.accessibility-menu-item-icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.accessibility-menu-item {
+  border-radius: 100px;
+  border: 2px solid #2196f3;
+  text-align: center;
+  float: left;
+  width: 50px;
+  height: 50px;
+  transition: all 0.3s ease;
+  background: white;
+  color: black;
+  font-size: 30px;
+  cursor: pointer;
+  margin-right: 10px;
+}
 
-  .accessibility-menu-item:hover {
-    background: #2196F3;
-  }
+.accessibility-menu-item:hover {
+  background: #2196f3;
+}
 
-  .active {
-    background-color: #2196F3;
-  }
+.active {
+  background-color: #2196f3;
+}
 </style>
 
 <style>
-  .accessibility-font {
-    font-size: 1.25em;
-    font-size: 1.25rem;
-  }
-  .accessibility-greyscale {
-    -webkit-filter: grayscale(100%);
-    -moz-filter: grayscale(100%);
-    filter: grayscale(100%);
-    min-height: 100vh;
-  }
-  .accessibility-contrast {
-    -webkit-filter: invert(100%);
-    -moz-filter: invert(100%);
-    filter: invert(100%);
-    min-height: 100vh;
-  }
-  .accessibility-highlight-link {
-    padding: 3px;
-    background-color: black !important;
-    color: yellow !important;
-    text-decoration: underline !important;
-  }
+.accessibility-font {
+  font-size: 1.25em;
+  font-size: 1.25rem;
+}
+.accessibility-greyscale {
+  -webkit-filter: grayscale(100%);
+  -moz-filter: grayscale(100%);
+  filter: grayscale(100%);
+  min-height: 100vh;
+}
+.accessibility-contrast {
+  -webkit-filter: invert(100%);
+  -moz-filter: invert(100%);
+  filter: invert(100%);
+  min-height: 100vh;
+}
+.accessibility-highlight-link {
+  padding: 3px;
+  background-color: black !important;
+  color: yellow !important;
+  text-decoration: underline !important;
+}
 </style>
 
-
 <style scoped>
-
-  .fab {
-    position: fixed;
-    width: 56px;
-    left: 3vw;
-    bottom: 4vh;
-    z-index: 999;
-  }
-  .fab-action-button {
-    cursor: pointer;
-    position: absolute;
-    bottom: 0;
-    display: block;
-    width: 56px;
-    height: 56px;
-    background-color: #2196F3;
-    border-radius: 50%;
-    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
-  }
-  .fab-action-button-icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    font-size: 37px !important;
-    color: white;
-  }
-  .fade-enter-active, .fade-leave-active {
-    transition: opacity .5s;
-  }
-  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
-    opacity: 0;
-  }
-
+.fab {
+  position: fixed;
+  width: 56px;
+  left: 3vw;
+  bottom: 4vh;
+  z-index: 999;
+}
+.fab-action-button {
+  cursor: pointer;
+  position: absolute;
+  bottom: 0;
+  display: block;
+  width: 56px;
+  height: 56px;
+  background-color: #2196f3;
+  border-radius: 50%;
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12),
+    0 3px 1px -2px rgba(0, 0, 0, 0.2);
+}
+.fab-action-button-icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 37px !important;
+  color: white;
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
 </style>
 
 <style scoped>
-  /* fallback */
-  @font-face {
-    font-family: "Material Icons";
-    font-style: normal;
-    font-weight: 400;
-    src: local("Material Icons"), local("MaterialIcons-Regular"),
-      url(https://fonts.gstatic.com/s/materialicons/v17/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2)
-        format("woff2");
-  }
-  .material-icons {
-    font-family: "Material Icons";
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    line-height: 1;
-    letter-spacing: normal;
-    text-transform: none;
-    display: inline-block;
-    white-space: nowrap;
-    word-wrap: normal;
-    direction: ltr;
-    -webkit-font-feature-settings: "liga";
-    -webkit-font-smoothing: antialiased;
-  }
+/* fallback */
+@font-face {
+  font-family: "Material Icons";
+  font-style: normal;
+  font-weight: 400;
+  src: local("Material Icons"), local("MaterialIcons-Regular"),
+    url(https://fonts.gstatic.com/s/materialicons/v17/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2)
+      format("woff2");
+}
+.material-icons {
+  font-family: "Material Icons";
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: "liga";
+  -webkit-font-smoothing: antialiased;
+}
 </style>

From f00cc064cc25b70cfcdd3f1621256d459b2229b1 Mon Sep 17 00:00:00 2001
From: Arnaud KINNOUDO <kinnoudoarnaud@gmail.com>
Date: Sat, 27 May 2023 13:54:51 +0100
Subject: [PATCH 2/3] review increaseDecreaseFontSize function call

---
 src/AccessibilityToolbar.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/AccessibilityToolbar.vue b/src/AccessibilityToolbar.vue
index 15cf5db..9e87451 100644
--- a/src/AccessibilityToolbar.vue
+++ b/src/AccessibilityToolbar.vue
@@ -120,8 +120,8 @@ export default {
         this.hightlightLinks();
       } else if (state === "accessibileFontSize") {
         this.accessibilityStates[state]
-          ? increaseDecreaseFontSize(document.body, 1)
-          : increaseDecreaseFontSize(document.body, -1);
+          ? this.increaseDecreaseFontSize(document.body, 1)
+          : this.increaseDecreaseFontSize(document.body, -1);
       }
     },
     resetInvertContrast() {

From cd6476651f0554d6ff6afdccc10857619a7ca633 Mon Sep 17 00:00:00 2001
From: Arnaud KINNOUDO <kinnoudoarnaud@gmail.com>
Date: Mon, 29 May 2023 11:01:08 +0100
Subject: [PATCH 3/3] add possibility to decrease font-size

---
 src/AccessibilityToolbar.vue | 93 ++++++++++++++++++++++++++++++------
 1 file changed, 79 insertions(+), 14 deletions(-)

diff --git a/src/AccessibilityToolbar.vue b/src/AccessibilityToolbar.vue
index 9e87451..ba1a954 100644
--- a/src/AccessibilityToolbar.vue
+++ b/src/AccessibilityToolbar.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="fab">
     <span class="fab-action-button" @click="showToolbar = !showToolbar">
-      <i class="material-icons fab-action-button-icon"> accessibility </i>
+      <i class="material-icons fab-action-button-icon fixed-font-size">
+        accessibility
+      </i>
     </span>
     <transition name="fade">
       <div class="accessibility-toolbar" v-if="showToolbar">
@@ -14,7 +16,9 @@
               @click="toggleState('inverted')"
               :aria-label="invertColorsText"
             >
-              <i class="material-icons accessibility-menu-item-icon">
+              <i
+                class="material-icons accessibility-menu-item-icon fixed-font-size"
+              >
                 invert_colors
               </i>
             </a>
@@ -27,7 +31,9 @@
               @click="toggleState('highlighted')"
               :aria-label="highlightLinksText"
             >
-              <i class="material-icons accessibility-menu-item-icon">
+              <i
+                class="material-icons accessibility-menu-item-icon fixed-font-size"
+              >
                 highlight
               </i>
             </a>
@@ -40,11 +46,30 @@
               @click="toggleState('greyscaled')"
               :aria-label="grayscaleText"
             >
-              <i class="material-icons accessibility-menu-item-icon">
+              <i
+                class="material-icons accessibility-menu-item-icon fixed-font-size"
+              >
                 format_color_reset
               </i>
             </a>
           </li>
+          <li>
+            <a
+              class="accessibility-menu-item mirror-text"
+              :data-tooltip="accessibileFontSizeDecreaseText"
+              v-bind:class="{
+                active: accessibilityStates.accessibileFontSizeDecrease,
+              }"
+              @click="toggleState('accessibileFontSizeDecrease')"
+              :aria-label="accessibileFontSizeDecreaseText"
+            >
+              <i
+                class="material-icons accessibility-menu-item-icon fixed-font-size"
+              >
+                format_size
+              </i>
+            </a>
+          </li>
           <li>
             <a
               class="accessibility-menu-item"
@@ -53,7 +78,9 @@
               @click="toggleState('accessibileFontSize')"
               :aria-label="accessibileFontSizeText"
             >
-              <i class="material-icons accessibility-menu-item-icon">
+              <i
+                class="material-icons accessibility-menu-item-icon fixed-font-size"
+              >
                 format_size
               </i>
             </a>
@@ -84,6 +111,18 @@ export default {
       type: String,
       default: "Increase Text Size",
     },
+    accessibileFontSizeDecreaseText: {
+      type: String,
+      default: "Increase Text Size",
+    },
+    desableAccessibileFontSizeDecreaseDecrease: {
+      type: Boolean,
+      default: true,
+    },
+    accessibileFontSizeStep: {
+      type: Number,
+      default: 1,
+    },
   },
   data() {
     return {
@@ -91,6 +130,7 @@ export default {
         inverted: false,
         highlighted: false,
         accessibileFontSize: false,
+        accessibileFontDecreaseSize: false,
         greyscaled: false,
       },
       showToolbar: false,
@@ -119,9 +159,9 @@ export default {
         this.resetInvertContrast();
         this.hightlightLinks();
       } else if (state === "accessibileFontSize") {
-        this.accessibilityStates[state]
-          ? this.increaseDecreaseFontSize(document.body, 1)
-          : this.increaseDecreaseFontSize(document.body, -1);
+        this.increaseDecreaseFontSize(document.body);
+      } else if (state === "accessibileFontSizeDecrease") {
+        this.increaseDecreaseFontSize(document.body, true);
       }
     },
     resetInvertContrast() {
@@ -148,16 +188,34 @@ export default {
     invertContrast(percent) {
       document.body.style.setProperty("filter", `invert(${percent})`);
     },
-    increaseDecreaseFontSize(node, step = 0) {
+    increaseDecreaseFontSize(node, decrease = false) {
       if (node.nodeType === Node.TEXT_NODE) {
-        // Increase the font size of the text node by 3 pixels
-        node.parentNode.style.fontSize = `${
-          parseFloat(node.parentNode.style.fontSize || 16) + step
-        }px`;
+        const step = this.accessibileFontSizeStep * (decrease ? -1 : 1);
+        const currentFontSize = node.parentNode.style.fontSize
+          ? node.parentNode.style.fontSize <= 0
+            ? 0
+            : node.parentNode.style.fontSize
+          : 16;
+        // Increase the font size of the text node by 3 pixels with !important
+        node.parentNode.style.setProperty(
+          "font-size",
+          `${parseFloat(currentFontSize) + step}px`,
+          "important"
+        );
+        this.resetAccessibikityFontSize();
       } else {
         // Traverse child nodes if the current node is not a text node
         for (let i = 0; i < node.childNodes.length; i++) {
-          increaseFontSize(node.childNodes[i]);
+          this.increaseDecreaseFontSize(node.childNodes[i], decrease);
+        }
+      }
+    },
+    resetAccessibikityFontSize() {
+      if (this.desableAccessibileFontSizeDecreaseDecrease) {
+        const elements = document.getElementsByClassName("fixed-font-size");
+
+        for (let i = 0; i < elements.length; i++) {
+          elements[i].style.setProperty("font-size", "20px", "important");
         }
       }
     },
@@ -386,4 +444,11 @@ ul {
   -webkit-font-feature-settings: "liga";
   -webkit-font-smoothing: antialiased;
 }
+.mirror-text {
+  transform: scaleX(-1);
+}
+
+.fixed-font-size {
+  font-size: 20px !important;
+}
 </style>