Enhance accessibility widget with multi-level text spacing and line height options, and improve pause animations functionality #3

widget.js

@@ -2,6 +2,7 @@
 ===========================================
   ACCESSIBILITY WIDGET
   A comprehensive web accessibility tool
+  Updated: Enhanced Text Spacing, Line Height, and Pause Animations
 ===========================================
 */
 
@@ -14,18 +15,17 @@ const DEFAULT_WIDGET_CONFIG = {
   // Core Features
   enableHighContrast: true,
   enableBiggerText: true,
-  enableTextSpacing: true,
+  enableTextSpacing: true, // Now has 3 levels
-  enablePauseAnimations: true,
+  enablePauseAnimations: true, // Enhanced to include reduced motion features
   enableHideImages: true,
   enableDyslexiaFont: true,
   enableBiggerCursor: true,
-  enableLineHeight: true,
+  enableLineHeight: true, // Now has 3 levels (2em, 3em, 4em)
   enableTextAlign: true,
 
   // Advanced Features
   enableScreenReader: true,
   enableVoiceControl: true,
-  enableReducedMotion: true,
   enableFontSelection: true,
   enableColorFilter: true,
 
@@ -40,7 +40,7 @@ const DEFAULT_WIDGET_CONFIG = {
 
   // Colors
   colors: {
-    primary: '#1663d7',           // Header bg, main button bg, active border, close hover bg
+    primary: '#1663d7',            // Header bg, main button bg, active border, close hover bg
     secondary: '#ffffff',         // Main button icon color
     optionBg: '#ffffff',         // Option button background
     optionText: '#333333',       // Option button text color
@@ -96,7 +96,6 @@ const DEFAULT_WIDGET_CONFIG = {
     dyslexiaFriendly: 'Dyslexia Friendly',
     biggerCursor: 'Bigger Cursor',
     lineHeight: 'Line Height',
-    reducedMotion: 'Reduced Motion',
     fontSelection: 'Font Selection',
     colorFilter: 'Color Filter',
     textAlign: 'Text Align',
@@ -132,7 +131,7 @@ const DEFAULT_WIDGET_CONFIG = {
 
   // Grid Layout Configuration
   gridLayout: {
-    columns: '1fr 1fr', // Default 2-column layout (can be changed to '1fr 1fr 1fr' for 3 columns, etc.)
+    columns: '1fr 1fr', // Default 2-column layout
     gap: '10px' // Gap between grid items
   }
 };
@@ -157,7 +156,6 @@ function mergeConfigs(defaultConfig, userConfig) {
 }
 
 // Merge user configuration with defaults
-// Users can define window.ACCESSIBILITY_WIDGET_CONFIG before loading this script
 const WIDGET_CONFIG = mergeConfigs(DEFAULT_WIDGET_CONFIG, window.ACCESSIBILITY_WIDGET_CONFIG || {});
 
 // ===========================================
@@ -232,8 +230,8 @@ const widgetStyles = `
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
+    justify-content: space-around;
-    padding: 15px 10px;
+    padding: 5px;
     width: 100%;
     background-color: ${WIDGET_CONFIG.colors.optionBg};
     color: ${WIDGET_CONFIG.colors.optionText};
@@ -242,8 +240,8 @@ const widgetStyles = `
     border-radius: ${WIDGET_CONFIG.menu.borderRadius};
     transition: background-color ${WIDGET_CONFIG.animation.transition}, border-color ${WIDGET_CONFIG.animation.transition};
     line-height: ${WIDGET_CONFIG.typography.lineHeight} !important;
-    gap: 10px;
+    gap: 5px;
-    min-height: 120px;
+    min-height: 110px;
   }
   
   .snn-accessibility-option:hover {
@@ -289,7 +287,7 @@ const widgetStyles = `
   
   .snn-option-step {
     width: 30px;
-    height: 10px;
+    height: 6px;
     border-radius: 3px;
     background-color: #d0d0d0;
     transition: background-color ${WIDGET_CONFIG.animation.transition};
@@ -411,6 +409,8 @@ const widgetStyles = `
     margin-left: 5px;
     font-weight: ${WIDGET_CONFIG.typography.titleFontWeight};
     flex: 1;
+    letter-spacing: 1px !important;
+    word-spacing: 2px !important;
   }
 `;
 
@@ -457,17 +457,33 @@ const pageStyles = `
     font-size: 28px !important;
   }
   
-  /* Text Spacing */
+  /* Text Spacing - 3 Options */
-  .snn-text-spacing * {
+  .snn-text-spacing-light * {
-    letter-spacing: 0.2em !important;
+    letter-spacing: 0.1em !important;
-    word-spacing: 0.3em !important;
+    word-spacing: 0.5em !important;
+  }
+  .snn-text-spacing-medium * {
+    letter-spacing: 0.15em !important;
+    word-spacing: 1em !important;
+  }
+  .snn-text-spacing-heavy * {
+    letter-spacing: 0.25em !important;
+    word-spacing: 2em !important;
   }
   
-  /* Pause Animations */
+  /* Pause Animations (Enhanced to include Reduced Motion features) */
   .snn-pause-animations * {
     animation: none !important;
     transition: none !important;
   }
+  .snn-pause-animations *::before {
+    animation: none !important;
+    transition: none !important;
+  }
+  .snn-pause-animations *::after {
+    animation: none !important;
+    transition: none !important;
+  }
   
   /* Dyslexia Font */
   .snn-dyslexia-font {
@@ -477,9 +493,15 @@ const pageStyles = `
     font-family: 'Comic Sans MS', 'Chalkboard SE', 'Bradley Hand', 'Brush Script MT', fantasy !important;
   }
   
-  /* Line Height */
+  /* Line Height - 3 Options */
-  .snn-line-height * {
+  .snn-line-height-2em * {
-    line-height: 2.5 !important;
+    line-height: 2 !important;
+  }
+  .snn-line-height-3em * {
+    line-height: 3 !important;
+  }
+  .snn-line-height-4em * {
+    line-height: 4 !important;
   }
   
   /* Text Alignment */
@@ -546,18 +568,6 @@ const pageStyles = `
   .snn-filter-grayscale body > *:not(#snn-accessibility-widget-container) {
     filter: grayscale(100%) !important;
   }
-  .snn-reduced-motion * {
-    animation: none !important;
-    transition: none !important;
-  }
-  .snn-reduced-motion *::before {
-    animation: none !important;
-    transition: none !important;
-  }
-  .snn-reduced-motion *::after {
-    animation: none !important;
-    transition: none !important;
-  }
   
   /* Protect widget container from page styles */
   #snn-accessibility-widget-container,
@@ -576,7 +586,7 @@ const icons = {
   buttonsvg: `<svg xmlns="http://www.w3.org/2000/svg" style="fill:white;" viewBox="0 0 24 24" width="30px" height="30px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M20.5 6c-2.61.7-5.67 1-8.5 1s-5.89-.3-8.5-1L3 8c1.86.5 4 .83 6 1v13h2v-6h2v6h2V9c2-.17 4.14-.5 6-1l-.5-2zM12 6c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z"></path></svg>`,
   highContrast: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" version="1.2" viewBox="0 0 35 35"><path fill="currentColor" fill-rule="evenodd" d="M1.89998 15.6285c0-7.58203 6.14649-13.72852 13.72852-13.72852 7.5821 0 13.7286 6.14649 13.7286 13.72852 0 .6081-.0395 1.2069-.1161 1.794.5933.2913 1.1478.6497 1.6534 1.0654.1725-.9268.2627-1.8825.2627-2.8594 0-8.57615-6.9524-15.5285244-15.5286-15.5285244C7.05235.0999756.0999756 7.05235.0999756 15.6285c0 8.5762 6.9523744 15.5286 15.5285244 15.5286 1.2241 0 2.415-.1416 3.5574-.4093-.4388-.4866-.8222-1.0242-1.1402-1.6028-.7847.1394-1.5924.2121-2.4172.2121-7.58203 0-13.72852-6.1465-13.72852-13.7286Z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M2.35 15.6286C2.35 8.29502 8.29502 2.35 15.6286 2.35c7.3335 0 13.2785 5.94502 13.2785 13.2786 0 .5408-.0323 1.0741-.0951 1.5979.444.1881.8687.4128 1.2703.6703.1151-.7392.1748-1.4967.1748-2.2682C30.2571 7.54943 23.7077 1 15.6286 1 7.54943 1 1 7.54943 1 15.6286c0 8.0791 6.54943 14.6285 14.6286 14.6285 1.0033 0 1.9831-.101 2.9297-.2934-.276-.3898-.52-.8038-.7282-1.2382-.716.1195-1.4515.1816-2.2015.1816-7.33358 0-13.2786-5.945-13.2786-13.2785Z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M15.6286 1C7.54943 1 1 7.54943 1 15.6286c0 8.0791 6.54943 14.6285 14.6286 14.6285" clip-rule="evenodd"/><path stroke="currentColor" stroke-width="1.8" d="M15.6286 1C7.54943 1 1 7.54943 1 15.6286c0 8.0791 6.54943 14.6285 14.6286 14.6285"/><path fill="currentColor" fill-rule="evenodd" d="M22.8729 25.114c0-1.3811 1.0901-2.5007 2.4359-2.5007 1.3459 0 2.436 1.1196 2.436 2.5007 0 1.38-1.0901 2.4997-2.436 2.4997-1.3458 0-2.4359-1.1197-2.4359-2.4997Zm7.2258-2.0373c-.0899-.2248-.071-.4785.0512-.6875l.912-1.5598c.0898-.1532.0668-.3504-.0574-.4779l-1.0556-1.0832c-.1232-.1264-.3153-.1511-.4657-.0589l-1.5225.9374c-.201.1237-.4495.1427-.667.051-.2181-.092-.3797-.2819-.4358-.5118l-.4329-1.7763c-.0428-.1735-.1953-.2957-.3696-.2957h-1.4931c-.1744 0-.3268.1222-.3696.2957l-.433 1.7763c-.056.2299-.2177.4198-.4357.5118-.2176.0917-.466.0727-.6671-.051l-1.5225-.9374c-.1503-.0922-.3424-.0675-.4656.0589l-1.0556 1.0832c-.1243.1275-.1473.3247-.0575.4779l.9121 1.5598c.1222.209.1411.4627.0511.6875-.0895.2239-.2806.3916-.5142.4514l-1.7165.4395c-.1692.0439-.2882.2003-.2882.3803v1.5311c0 .18.119.3364.2882.3804l1.7165.4394c.2336.0599.4247.2276.5142.4515.09.2247.0711.4785-.0511.6874l-.9121 1.5599c-.0898.1532-.0668.3503.0575.4778l1.0556 1.0833c.1232.1264.3153.151.4656.0589l1.5225-.9374c.2011-.1238.4495-.1428.6671-.051.218.092.3797.2818.4357.5118l.433 1.7762c.0428.1736.1952.2968.3696.2968h1.4931c.1743 0 .3268-.1232.3696-.2968l.4329-1.7762c.0561-.23.2177-.4198.4358-.5118.2175-.0918.466-.0728.667.051l1.5225.9374c.1504.0921.3425.0675.4657-.0589l1.0556-1.0833c.1242-.1275.1472-.3246.0574-.4778l-.912-1.5599c-.1222-.2089-.1411-.4627-.0512-.6874.0896-.2239.2806-.3916.5142-.4515l1.7166-.4394c.1691-.044.2881-.2004.2881-.3804v-1.5311c0-.18-.119-.3364-.2881-.3803l-1.7166-.4395c-.2336-.0598-.4246-.2275-.5142-.4514Z" clip-rule="evenodd"/></svg>`,
   biggerText: `<svg xmlns="http://www.w3.org/2000/svg" version="1.2" viewBox="0 0 36 23"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-width="2"><path stroke-linejoin="round" d="M26.58 21.3225806V1m-7.92 4.06451613V1H34.5v4.06451613"/><path d="M22.62 21.3225806h7.92"/><path stroke-linejoin="round" d="M6.78 18.6129032V5.06451613M1.5 7.77419355V5.06451613h10.56v2.70967742"/><path d="M4.14 18.6129032h5.28"/></g></svg>`,
-  textSpacing: `<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M10 16h44v4H10zm0 12h44v4H10zm0 12h44v4H10zm0 12h44v4H10z"/></svg>`,
+  textSpacing: `<svg xmlns="http://www.w3.org/2000/svg" width="800px" height="800px" viewBox="0 0 15 15" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.55293 0.999969C4.75295 0.999969 4.93372 1.11917 5.0125 1.30301L8.01106 8.29982C8.11984 8.55363 8.00226 8.84757 7.74844 8.95635C7.49463 9.06512 7.20069 8.94754 7.09191 8.69373L6.11613 6.41685H2.98973L2.01395 8.69373C1.90517 8.94754 1.61123 9.06512 1.35742 8.95635C1.1036 8.84757 0.986023 8.55363 1.0948 8.29982L4.09336 1.30301C4.17214 1.11917 4.35291 0.999969 4.55293 0.999969ZM4.55293 2.76929L5.75186 5.56685H3.354L4.55293 2.76929ZM11.0562 9.00214C11.2617 9.00214 11.4463 8.87633 11.5215 8.68502L14.2733 1.68299C14.3743 1.42598 14.2478 1.13575 13.9908 1.03475C13.7338 0.933747 13.4436 1.06021 13.3426 1.31722L11.0562 7.13514L8.76973 1.31722C8.66873 1.06021 8.3785 0.933747 8.1215 1.03475C7.86449 1.13575 7.73802 1.42598 7.83902 1.68299L10.5908 8.68502C10.666 8.87633 10.8506 9.00214 11.0562 9.00214ZM14.9537 12.4999C14.9537 12.606 14.9115 12.7077 14.8365 12.7828L12.8365 14.7828C12.6803 14.939 12.4271 14.939 12.2708 14.7828C12.1146 14.6265 12.1146 14.3733 12.2708 14.2171L13.588 12.8999H1.51937L2.83653 14.2171C2.99274 14.3733 2.99274 14.6265 2.83653 14.7828C2.68032 14.939 2.42705 14.939 2.27084 14.7828L0.270843 12.7828C0.195828 12.7077 0.153687 12.606 0.153687 12.4999C0.153687 12.3938 0.195828 12.2921 0.270843 12.2171L2.27084 10.2171C2.42705 10.0609 2.68032 10.0609 2.83653 10.2171C2.99274 10.3733 2.99274 10.6265 2.83653 10.7828L1.51937 12.0999L13.588 12.0999L12.2708 10.7828C12.1146 10.6265 12.1146 10.3733 12.2708 10.2171C12.4271 10.0609 12.6803 10.0609 12.8365 10.2171L14.8365 12.2171C14.9115 12.2921 14.9537 12.3938 14.9537 12.4999Z" fill="#000000"/></svg>`,
   pauseAnimations: `<svg xmlns="http://www.w3.org/2000/svg" version="1.2" viewBox="0 0 37 36"><g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M15.8087111 23.6666667h-1.2702778c-.4429444 0-.8018333-.3598334-.8018333-.8027778v-9.7277778c0-.4429444.3588889-.8027778.8018333-.8027778h1.2702778c.4429445 0 .8027778.3598334.8027778.8027778v9.7277778c0 .4429444-.3598333.8027778-.8027778.8027778m6.6525722 0h-1.2702777c-.442 0-.8018334-.3598334-.8018334-.8027778v-9.7277778c0-.4429444.3598334-.8027778.8018334-.8027778h1.2702777c.4438889 0 .8027778.3598334.8027778.8027778v9.7277778c0 .4429444-.3588889.8027778-.8027778.8027778"/><path stroke="currentColor" stroke-linecap="round" stroke-width="1.88888889" d="M18.5 4.77777778V1m0 34v-3.7777778M31.7222222 18H35.5m-34 0h3.77777778m3.87278889-9.34943333L6.47873333 5.97967778M30.5204167 30.0204167l-2.6708889-2.6708889m-.0000945-18.69896113 2.6708889-2.67088889M6.47911111 30.0204167l2.67183333-2.6708889M23.5542889 5.78219444l1.4440555-3.49066666M12.0013722 33.7087556l1.4440556-3.4906667m17.2723778-7.1638 3.4906666 1.4440555M2.79124444 11.5013722l3.49066667 1.4440556m7.15274999-7.15860558L11.9877722 2.2971m13.0246445 31.4061778-1.4468889-3.4897222m7.14765-17.2788945L34.2029 11.4877722M2.79672222 24.5124167l3.48972222-1.4468889"/></g></svg>`,
   hideImages: `<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32 12C16 12 4 32 4 32s12 20 28 20 28-20 28-20S48 12 32 12zm0 32a12 12 0 1112-12 12 12 0 01-12 12z"/><circle cx="32" cy="32" r="8"/></svg>`,
   dyslexiaFont: `<svg xmlns="http://www.w3.org/2000/svg" version="1.2" viewBox="0 0 31 22"><path fill="currentColor" fill-rule="evenodd" d="M.5 22V1.0083333h7.2421899c6.8051611 0 11.6124768 4.3388889 11.6124768 10.4805556C19.3546667 17.6305556 14.547351 22 7.7421899 22H.5Zm2.4348742-4.31h4.8073157c5.3692097 0 9.1463863-2.8616703 9.1463863-7.27 0-4.3807776-3.7771766-7.2422222-9.1463863-7.2422222H2.9348742V17.69ZM26.2735913 4.0333333l.0114609 2.1694445h4.0126191V8.25h-4.001719L26.77 22h-3.535416L23.78 8.25h-2.4238344V6.2027778h2.55923l.0751088-2.1694445C24.0706908 1.6805556 25.6007488 0 27.697782 0 28.6896221 0 29.677687.3666667 30.5 1.0083333l-.9627285 1.6805556c-.3479788-.3666667-.9515992-.6416667-1.627768-.6416667-.8819593 0-1.6420082.825-1.6359122 1.9861111Z"/></svg>`,
@@ -670,11 +680,8 @@ function applySettings() {
     { key: 'biggerText', className: 'snn-bigger-text' },
     { key: 'highContrast', className: 'snn-high-contrast' },
     { key: 'dyslexiaFont', className: 'snn-dyslexia-font' },
-    { key: 'lineHeight', className: 'snn-line-height' },
     { key: 'textAlign', className: 'snn-text-align' },
     { key: 'pauseAnimations', className: 'snn-pause-animations' },
-    { key: 'textSpacing', className: 'snn-text-spacing' },
-    { key: 'reducedMotion', className: 'snn-reduced-motion' },
   ];
 
   // Batch DOM operations for better performance
@@ -756,6 +763,22 @@ function applySettings() {
     domCache.body.classList.add(`snn-high-contrast-${selectedContrast}`);
   }
 
+  // Handle Text Spacing (3 Levels)
+  const spacingClasses = ['snn-text-spacing-light', 'snn-text-spacing-medium', 'snn-text-spacing-heavy'];
+  domCache.body.classList.remove(...spacingClasses);
+  const selectedSpacing = localStorage.getItem('textSpacing');
+  if (selectedSpacing) {
+    domCache.body.classList.add(`snn-text-spacing-${selectedSpacing}`);
+  }
+
+  // Handle Line Height (3 Levels)
+  const lineHeightClasses = ['snn-line-height-2em', 'snn-line-height-3em', 'snn-line-height-4em'];
+  domCache.body.classList.remove(...lineHeightClasses);
+  const selectedLineHeight = localStorage.getItem('lineHeight');
+  if (selectedLineHeight) {
+    domCache.body.classList.add(`snn-line-height-${selectedLineHeight}`);
+  }
+
   // Handle images with cached query
   const hideImages = localStorage.getItem('hideImages') === 'true';
   const displayStyle = hideImages ? 'none' : '';
@@ -815,7 +838,6 @@ function resetAccessibilitySettings() {
     'textSpacing',
     'highContrast',
     'voiceControl',
-    'reducedMotion',
     'fontSelection',
     'colorFilter',
   ];
@@ -827,10 +849,7 @@ function resetAccessibilitySettings() {
     'snn-bigger-text',
     'snn-dyslexia-font',
     'snn-pause-animations',
-    'snn-text-spacing',
-    'snn-line-height',
     'snn-text-align',
-    'snn-reduced-motion',
     'snn-font-arial',
     'snn-font-times',
     'snn-font-verdana'
@@ -859,6 +878,13 @@ function resetAccessibilitySettings() {
   ];
   textSizeClasses.forEach(cls => document.body.classList.remove(cls));
 
+  // Clear Multi-level classes
+  const spacingClasses = ['snn-text-spacing-light', 'snn-text-spacing-medium', 'snn-text-spacing-heavy'];
+  spacingClasses.forEach(cls => document.body.classList.remove(cls));
+
+  const lineHeightClasses = ['snn-line-height-2em', 'snn-line-height-3em', 'snn-line-height-4em'];
+  lineHeightClasses.forEach(cls => document.body.classList.remove(cls));
+
   domCache.getImages().forEach((img) => (img.style.display = ''));
 
   if (screenReader.active) {
@@ -1031,6 +1057,14 @@ function updateActionButtonStatus(button, buttonText, optionsConfig) {
     const currentContrast = localStorage.getItem('highContrast');
     const contrasts = ['medium', 'high', 'ultra'];
     currentIndex = currentContrast ? contrasts.indexOf(currentContrast) : -1;
+  } else if (buttonText.includes('Text Spacing')) {
+    const currentSpacing = localStorage.getItem('textSpacing');
+    const spacings = ['light', 'medium', 'heavy'];
+    currentIndex = currentSpacing ? spacings.indexOf(currentSpacing) : -1;
+  } else if (buttonText.includes('Line Height')) {
+    const currentLineHeight = localStorage.getItem('lineHeight');
+    const heights = ['2em', '3em', '4em'];
+    currentIndex = currentLineHeight ? heights.indexOf(currentLineHeight) : -1;
   }
   
   // Update step indicators
@@ -1041,6 +1075,15 @@ function updateActionButtonStatus(button, buttonText, optionsConfig) {
       step.classList.remove('active');
     }
   });
+
+  // Toggle active class on button itself if any option is selected
+  if (currentIndex !== -1) {
+    button.classList.add('active');
+    button.setAttribute('aria-pressed', 'true');
+  } else {
+    button.classList.remove('active');
+    button.setAttribute('aria-pressed', 'false');
+  }
 }
 
 // ===========================================
@@ -1170,6 +1213,52 @@ function handleHighContrast() {
   }
 }
 
+// Text Spacing Handler with 3 states (1em, 2em, 4em equivalents)
+function handleTextSpacing() {
+  const spacings = ['light', 'medium', 'heavy']; // Maps to 1, 2, 4 approx
+  const currentSpacing = localStorage.getItem('textSpacing') || 'none';
+  const currentIndex = spacings.indexOf(currentSpacing);
+  const nextIndex = (currentIndex + 1) % (spacings.length + 1); // +1 for none
+
+  // Remove all spacing classes
+  const spacingClasses = ['snn-text-spacing-light', 'snn-text-spacing-medium', 'snn-text-spacing-heavy'];
+  domCache.body.classList.remove(...spacingClasses);
+
+  if (nextIndex === spacings.length) {
+    // Default
+    localStorage.removeItem('textSpacing');
+    return WIDGET_CONFIG.lang.default;
+  } else {
+    const selectedSpacing = spacings[nextIndex];
+    localStorage.setItem('textSpacing', selectedSpacing);
+    domCache.body.classList.add(`snn-text-spacing-${selectedSpacing}`);
+    return selectedSpacing.charAt(0).toUpperCase() + selectedSpacing.slice(1);
+  }
+}
+
+// Line Height Handler with 3 states (2em, 3em, 4em)
+function handleLineHeight() {
+  const heights = ['2em', '3em', '4em'];
+  const currentHeight = localStorage.getItem('lineHeight') || 'none';
+  const currentIndex = heights.indexOf(currentHeight);
+  const nextIndex = (currentIndex + 1) % (heights.length + 1); // +1 for none
+
+  // Remove all line height classes
+  const heightClasses = ['snn-line-height-2em', 'snn-line-height-3em', 'snn-line-height-4em'];
+  domCache.body.classList.remove(...heightClasses);
+
+  if (nextIndex === heights.length) {
+    // Default
+    localStorage.removeItem('lineHeight');
+    return WIDGET_CONFIG.lang.default;
+  } else {
+    const selectedHeight = heights[nextIndex];
+    localStorage.setItem('lineHeight', selectedHeight);
+    domCache.body.classList.add(`snn-line-height-${selectedHeight}`);
+    return selectedHeight;
+  }
+}
+
 // ===========================================
 // ACCESSIBILITY FEATURES
 // ===========================================
@@ -1446,7 +1535,7 @@ function createAccessibilityMenu() {
   // Lower order numbers appear first, higher numbers appear last
   // ===================================================================
   const allButtonConfigs = [
-    // Order 1-4: Primary accessibility features (as requested)
+    // Order 1-4: Primary accessibility features
     {
       order: 1,
       type: 'action',
@@ -1487,21 +1576,21 @@ function createAccessibilityMenu() {
     // Order 5-11: Other visual/text features
     {
       order: 5,
-      type: 'toggle',
+      type: 'action', // Changed from toggle to action
       text: WIDGET_CONFIG.lang.textSpacing,
-      key: 'textSpacing',
+      actionFunction: handleTextSpacing,
-      className: 'snn-text-spacing',
       icon: icons.textSpacing,
       enabled: WIDGET_CONFIG.enableTextSpacing,
+      optionsConfig: { count: 3 }
     },
     {
       order: 6,
-      type: 'toggle',
+      type: 'action', // Changed from toggle to action
       text: WIDGET_CONFIG.lang.lineHeight,
-      key: 'lineHeight',
+      actionFunction: handleLineHeight,
-      className: 'snn-line-height',
       icon: icons.lineHeight,
       enabled: WIDGET_CONFIG.enableLineHeight,
+      optionsConfig: { count: 3 }
     },
     {
       order: 7,
@@ -1540,7 +1629,7 @@ function createAccessibilityMenu() {
       enabled: WIDGET_CONFIG.enableHideImages,
     },
     
-    // Order 11-12: Animation controls
+    // Order 11: Animation controls (Reduced Motion merged here)
     {
       order: 11,
       type: 'toggle',
@@ -1550,15 +1639,6 @@ function createAccessibilityMenu() {
       icon: icons.pauseAnimations,
       enabled: WIDGET_CONFIG.enablePauseAnimations,
     },
-    {
-      order: 12,
-      type: 'toggle',
-      text: WIDGET_CONFIG.lang.reducedMotion,
-      key: 'reducedMotion',
-      className: 'snn-reduced-motion',
-      icon: icons.reducedMotion,
-      enabled: WIDGET_CONFIG.enableReducedMotion,
-    },
     
     // Order 98-99: Screen Reader and Voice Control (always last)
     {