Commit of final version

Author: joshuamaker8-create

techniques/client-side-script/SCR27.html

@@ -24,13 +24,7 @@ <h2>Description</h2>
 
             <p>This example does up and down reordering. This approach can also be used for two-dimensional reordering by adding left and right options.</p>
             <p>The components in this example are list items in an unordered list. Unordered lists are a very good semantic model for sets of similar items, like these components. The menu approach can also be used for other types of groupings.</p>
-            <p>The modules are list items, and each module, in addition to content in <code class="language-html">div</code> elements, contains a menu represented as a nested list.</p>
-         
-         
-            <p>Since we've covered the showing and hiding of menus in the simple tree samples, we'll focus here just on the code that swaps the modules. Once we harmonize the events and cancel the default link action, we go to work. First, we set a bunch of local variables for the elements with which we'll be working: the menu, the module to be reordered, the menuLink. Then, after checking the reorder direction, we try to grab the node to swap. If we find one, we then call <code class="language-javascript">swapNode()</code> to swap our two modules, and <code class="language-javascript">PositionElement()</code> to move the absolutely-positioned menu along with the module, and then set focus back on the menu item which launched the whole thing.</p>
-         
-
-         
+            <p>In this example, the menu is always visible. This is a good approach for components that are not too numerous, as it allows users to see the options without having to open a menu.</p>
             <p>The <abbr title="Cascading Style Sheets">CSS</abbr> for swap using buttons is extensive to account for all WCAG accessibility conformance requirements. It includes media queries that adjust the text boxes based on the size of the screen. The example thus conforms to WCAG 2.2 </p>
 
 <pre xml:space="preserve"><code class="language-css">
@@ -165,17 +159,165 @@ <h2>Description</h2>
   /* Improve text selection visibility */
   ::selection { background: #b3d4fc; color: #000; }}
 </code></pre>
+      </section>
+      <pre xml:space="preserve"><code class="language-javascript">
+        'use strict'; // Enable strict mode to catch common errors and enforce safer coding
 
+(function main() {
+  // Get references to the main list and the live region for announcements
+  const list = document.getElementById('myList');       // The <ul> containing list items
+  const live = document.getElementById('sr-live');     // The ARIA live region for screen readers
 
-      </section>
+  // Safety check: if list is missing, log error and stop execution
+  if (!list) {
+    console.error('[swap-list] #myList not found. Aborting setup.');
+    return;
+  }
+
+  // Key constants to improve readability
+  const KEY = Object.freeze({
+    ENTER: 'Enter',
+    ARROW_UP: 'ArrowUp',
+    ARROW_DOWN: 'ArrowDown'
+  });
+
+  /**
+   * announce(msg)
+   * Updates the live region for screen readers with a message
+   * @param {string} msg - The message to announce
+   */
+  function announce(msg) {
+    if (!live) return;        // Exit if live region does not exist
+    live.textContent = String(msg); // Update the live region text
+  }
+
+  /**
+   * closestLI(el)
+   * Finds the closest parent <li> element of a given element
+   * @param {Element} el - The starting element
+   * @returns {HTMLElement|null} - The closest <li> or null
+   */
+  function closestLI(el) {
+    if (!(el instanceof Element)) return null;
+    return el.closest('li');  // Uses DOM traversal to find the parent <li>
+  }
+
+  /**
+   * directionFromButton(btn)
+   * Determines the direction ("up" or "down") based on button class
+   * @param {Element} btn - The button element
+   * @returns {string|null} - "up", "down", or null
+   */
+  function directionFromButton(btn) {
+    if (!(btn instanceof Element)) return null;
+    if (btn.classList.contains('up')) return 'up';
+    if (btn.classList.contains('down')) return 'down';
+    return null;
+  }
+
+  /**
+   * swap(li, direction, focusBtn)
+   * Moves a list item up or down in the DOM and manages focus
+   * @param {HTMLElement} li - The <li> element to move
+   * @param {string} direction - "up" or "down"
+   * @param {HTMLElement} focusBtn - Optional: the button to keep focus on
+   */
+  function swap(li, direction, focusBtn) {
+    if (!(li instanceof Element) || !li.parentNode) return; // Safety check
+    const parent = li.parentNode;
+
+    if (direction === 'up') {
+      const prev = li.previousElementSibling; // Get the previous item
+      if (prev) {
+        parent.insertBefore(li, prev);       // Swap positions with previous
+        announce('Moved item up.');          // Screen reader announcement
+      } else {
+        parent.appendChild(li);              // Wrap first item to end
+        announce('Moved first item to end.');
+      }
+    } else if (direction === 'down') {
+      const next = li.nextElementSibling;     // Get the next item
+      if (next) {
+        parent.insertBefore(next, li);        // Swap with next
+        announce('Moved item down.');
+      } else {
+        parent.insertBefore(li, parent.firstElementChild); // Wrap last to start
+        announce('Moved last item to start.');
+      }
+    }
+
+    // === Focus management ===
+    if (focusBtn instanceof HTMLElement) {
+      focusBtn.focus(); // Keep focus on the button that triggered the swap
+    } else {
+      // Fallback: focus first focusable element inside the <li> or the <li> itself
+      const focusable = li.querySelector('button, [href], input, select, textarea');
+      if (focusable instanceof HTMLElement) {
+        focusable.focus();
+      } else {
+        li.focus && li.focus();
+      }
+    }
+  }
+
+  /**
+   * Click event handler for the list
+   * Detects if a button inside a <li> was clicked and swaps the item
+   */
+  list.addEventListener('click', (e) => {
+    const button = (e.target instanceof Element) ? e.target.closest('button') : null;
+    if (!button) return; // Only proceed if a button was clicked
+
+    const dir = directionFromButton(button); // Determine swap direction
+    if (!dir) return;
+
+    const li = closestLI(button);           // Find the parent <li>
+    if (!li) return;
+
+    swap(li, dir, button);                  // Perform the swap and keep focus
+  });
+
+  /**
+   * Keyboard event handler for accessibility
+   * Supports Enter to activate button and arrow keys to move items
+   */
+  list.addEventListener('keydown', (e) => {
+    const btn = (e.target instanceof Element) ? e.target.closest('button') : null;
+
+    // Enter on a button triggers swap
+    if (btn && e.key === KEY.ENTER) {
+      const dir = directionFromButton(btn);
+      if (!dir) return;
+      const li = closestLI(btn);
+      if (!li) return;
+      swap(li, dir, btn); // Pass the button to preserve focus
+      e.preventDefault();
+      return;
+    }
+
+    // Arrow keys on the <li> move items
+    const li = closestLI(e.target);
+    if (!li) return;
+
+    if (e.key === KEY.ARROW_UP) {
+      swap(li, 'up');
+      e.preventDefault();
+    } else if (e.key === KEY.ARROW_DOWN) {
+      swap(li, 'down');
+      e.preventDefault();
+    }
+  });
+})();
+</code></pre>
    </section>
+
    <section id="tests">
     <h2>Tests</h2>
     <section class="procedure">
       <h3>Procedure</h3>
       <ol>
         <li>Find all components which can be reordered via drag and drop.</li>
-        <li>Check that there is also a mechanism to reorder them using menus containing buttons, or other appropriate controls</li>
+        <li>Check that there is also a mechanism to reorder them using menus containing buttons, or other appropriate controls.</li>
         <li>Check that the menus are contained within the re-orderable items in the DOM.</li>
         <li>Check that scripts for reordering are triggered only from the onclick event of the menu controls.</li>
         <li>Check that items are reordered in the DOM, not only visually.</li>
@@ -188,6 +330,6 @@ <h3>Expected Results</h3>
       </ul>
     </section>
   </section>
-  <p>Test paragraph to test git push functionality</p>
+
 </body>
 </html>