Font size adjust widget for accessibility

javascriptcss

So I was trying to create this widget that would allow the user to change 3 types of font sizes.

Where the first one is default and others would scale font size globally;

One important thing is that everywhere there is font-size set, it must use calc to account for a scaling property. But using this scaling prop you can really adjust font-size neatly everywhere.

:root {
  --font-scale: 1;
}

body {
  font-size: calc(1.6rem * var(--font-scale));
}

Typescript

Here is the typescript code that creates the widget. I actually added this as javascript on this post to see it working!

/**
 * Font Widget Generator script;
 */
function fontSizeWidget(): void {
  const body = document.querySelector("body")!;

  // Set default localStorage value if not set
  if (localStorage.getItem("font_size") === null) {
    localStorage.setItem("font_size", "font_small");
  }

  const FONT_SIZE = localStorage.getItem("font_size")!;

  // Create the widget container
  const fontSizeWidgetElement = document.createElement("div");
  fontSizeWidgetElement.id = "font_size_widget";

  // Define font options with corresponding scaling values
  const fontOptions = [
    { id: "font_small", label: "A", title: "Normaal", scale: "1" },
    { id: "font_medium", label: "A", title: "Groot", scale: "1.16" },
    { id: "font_large", label: "A", title: "Extra Groot", scale: "1.2" }
  ];

  // Create buttons and append to the widget container
  fontOptions.forEach(option => {
    const button = document.createElement("button");
    button.id = option.id;
    button.textContent = option.label;
    button.title = option.title;
    fontSizeWidgetElement.appendChild(button);

    // Add click event listener
    button.addEventListener("click", () => {
      removeActiveClass();
      localStorage.setItem("font_size", button.id);
      button.classList.add("active");
      document.documentElement.style.setProperty("--font-scale", option.scale);
    });
  });

  // Append the widget container to the body
  body.appendChild(fontSizeWidgetElement);

  // Set the active button based on the stored font size
  const activeButton = fontSizeWidgetElement.querySelector<HTMLButtonElement>(
    `#${FONT_SIZE}`
  )!;
  activeButton.click();

  // Function to remove the 'active' class from all buttons
  function removeActiveClass(): void {
    fontSizeWidgetElement.querySelectorAll("button").forEach((button) => {
      button.classList.remove("active");
    });
  }
}

// eslint-disable-next-line import/prefer-default-export
export { fontSizeWidget };