Merge pull request #1464 from maykinmedia/issue/2372-A11y-toggle-dysl…

…exia-attribute

♿  [#2372] Fix dyslexia data-attributes for toggling accessible label

src/open_inwoner/js/components/accessibility/change_font.js

@@ -1,5 +1,6 @@
 export class ChangeFont {
   static selector = '.accessibility--change-font'
+
   constructor(node) {
     this.node = node
     this.text = node.querySelector('.link__text')
@@ -9,6 +10,8 @@ export class ChangeFont {
   change(event) {
     event.preventDefault()
     let root = document.documentElement
+
+    // Variable names for font families
     const bodyFontFamily = '--oip-typography-sans-serif-font-family'
     const headingFontFamily = '--utrecht-heading-font-family'
     // Start of legacy styles
@@ -20,25 +23,34 @@ export class ChangeFont {
     const defaultHeadingFont = 'Heading'
 
     if (root.style.getPropertyValue(bodyFontFamily) === openDyslexicFont) {
+      // Switch back to default font
       root.style.setProperty(bodyFontFamily, defaultBodyFont)
       root.style.setProperty(headingFontFamily, defaultHeadingFont)
       root.style.setProperty(oipBodyFontFamily, defaultBodyFont)
       root.style.setProperty(oipHeadingFontFamily, defaultHeadingFont)
+
+      // Update text content, aria-label, and title
       this.text.innerText = this.node.dataset.text
+      this.node.setAttribute('aria-label', this.node.dataset.text)
+      this.node.setAttribute('title', this.node.dataset.text)
     } else {
+      // Switch to Dyslexic font
       root.style.setProperty(bodyFontFamily, openDyslexicFont)
       root.style.setProperty(headingFontFamily, openDyslexicFont)
       root.style.setProperty(oipBodyFontFamily, openDyslexicFont)
       root.style.setProperty(oipHeadingFontFamily, openDyslexicFont)
+
+      // Update text content, aria-label, and title
       this.text.innerText = this.node.dataset.altText
+      this.node.setAttribute('aria-label', this.node.dataset.altText)
+      this.node.setAttribute('title', this.node.dataset.altText)
     }
   }
 }
 
 /**
  * Controls the toggling of Dyslexia font when button is clicked
  */
-
 document
   .querySelectorAll(ChangeFont.selector)
-  .forEach((readmoreToggle) => new ChangeFont(readmoreToggle))
+  .forEach((changeFontButton) => new ChangeFont(changeFontButton))