From 55509f6f7adaee4805104bf4ffc4215927b4dbe1 Mon Sep 17 00:00:00 2001
From: Stalgia Grigg <stalgia@bocoup.com>
Date: Mon, 17 Jun 2024 15:00:29 -0700
Subject: [PATCH 01/11] Update with APG feature branch content

---
 ARIA/apg/patterns/patterns.md                 | 217 ++++++++++--------
 _external/aria-practices                      |   2 +-
 _external/data                                |   2 +-
 .../shared/js/filterBySearch.js               |  70 ++++++
 .../images/icon-gridview.svg                  |   1 +
 .../images/icon-listview.svg                  |   1 +
 6 files changed, 200 insertions(+), 93 deletions(-)
 create mode 100644 content-assets/wai-aria-practices/shared/js/filterBySearch.js
 create mode 100644 content-images/wai-aria-practices/images/icon-gridview.svg
 create mode 100644 content-images/wai-aria-practices/images/icon-listview.svg

diff --git a/ARIA/apg/patterns/patterns.md b/ARIA/apg/patterns/patterns.md
index 1071f0b85..21b73e10f 100644
--- a/ARIA/apg/patterns/patterns.md
+++ b/ARIA/apg/patterns/patterns.md
@@ -26,6 +26,7 @@ lang: en
 
 <script src="../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
+<script src="../../../content-assets/wai-aria-practices/shared/js/filterBySearch.js"></script>
 
 
 <link 
@@ -63,363 +64,397 @@ lang: en
   
     
     
-    <ul class="tiles">
-      <li class="tile">
+    <form action="javascript:void(0);"
+      onsubmit="aria.Filter.filterListItems(document.getElementById('pattern-search-input').value, '#patterns', 'pattern-name')"
+      role="search"
+    >
+      <input type="text"
+        id="pattern-search-input"
+        placeholder="Search patterns"
+        oninput="aria.Filter.filterListItems(this.value, '#patterns', 'pattern-name')"
+        aria-label="Search patterns"
+      >
+      <button type="submit" aria-label="Submit search">Search</button>
+    </form>
+    <fieldset class="view-toggle">
+      <button aria-pressed="true" onclick="
+        document.querySelectorAll('.view-toggle button').forEach(btn => btn.setAttribute('aria-pressed', 'false'));
+        this.setAttribute('aria-pressed', 'true');
+        document.getElementById('patterns').classList.add('tiles');
+        document.getElementById('patterns').classList.remove('list');
+      "
+      aria-label="Show tiles view"
+      >
+        <img alt src="../../../content-images/wai-aria-practices/images/icon-gridview.svg" width="25px">
+      </button>
+      <button aria-pressed="false" onclick="
+        document.querySelectorAll('.view-toggle button').forEach(btn => btn.setAttribute('aria-pressed', 'false'));
+        this.setAttribute('aria-pressed', 'true');
+        document.getElementById('patterns').classList.add('list');
+        document.getElementById('patterns').classList.remove('tiles');
+        "
+        aria-label="Show list view"
+      >
+        <img alt src="../../../content-images/wai-aria-practices/images/icon-listview.svg" width="25px">
+      </button>
+    </fieldset>
+    <ul id="patterns" class="tiles">
+      <li class="pattern">
         <a href="accordion/">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt src="../../../content-images/wai-aria-practices/images/pattern-accordion.svg">
             <span>Accordion (Sections With Show/Hide Functionality)</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           An accordion is a vertically stacked set of interactive headings that each contain a title, content snippet, or thumbnail representing a section of content.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="alert/">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt src="../../../content-images/wai-aria-practices/images/pattern-alert.svg">
             <span>Alert</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           An alert is an element that displays a brief, important message in a way that attracts the user's attention without interrupting the user's task.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="alertdialog/">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt src="../../../content-images/wai-aria-practices/images/pattern-alertdialog.svg">
             <span>Alert and Message Dialogs</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           An alert dialog is a modal dialog that interrupts the user's workflow to communicate an important message and acquire a response.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="breadcrumb/">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt src="../../../content-images/wai-aria-practices/images/pattern-breadcrumb.svg">
             <span>Breadcrumb</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           A breadcrumb trail consists of a list of links to the parent pages of the current page in hierarchical order.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="button/">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt src="../../../content-images/wai-aria-practices/images/pattern-button.svg">
             <span>Button</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           A button is a widget that enables users to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="carousel/">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt src="../../../content-images/wai-aria-practices/images/pattern-carousel.svg">
             <span>Carousel (Slide Show or Image Rotator)</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           A carousel presents a set of items, referred to as slides, by sequentially displaying a subset of one or more slides.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="checkbox/">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt src="../../../content-images/wai-aria-practices/images/pattern-checkbox.svg">
             <span>Checkbox</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           WAI-ARIA supports two types of checkbox widgets: dual-state checkboxes toggle between two choices -- checked and not checked -- and tri-state checkboxes, which allow an additional third state known as partially checked.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="combobox/">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt src="../../../content-images/wai-aria-practices/images/pattern-combobox.svg">
             <span>Combobox</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           A combobox is an input widget that has an associated popup.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="dialog-modal/">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt src="../../../content-images/wai-aria-practices/images/pattern-dialog-modal.svg">
             <span>Dialog (Modal)</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           A dialog is a window overlaid on either the primary window or another dialog window.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="disclosure/">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt src="../../../content-images/wai-aria-practices/images/pattern-disclosure.svg">
             <span>Disclosure (Show/Hide)</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           A disclosure is a widget that enables content to be either collapsed (hidden) or expanded (visible).
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="feed/">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt src="../../../content-images/wai-aria-practices/images/pattern-feed.svg">
             <span>Feed</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           A feed is a section of a page that automatically loads new sections of content as the user scrolls.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="grid/">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt src="../../../content-images/wai-aria-practices/images/pattern-grid.svg">
             <span>Grid (Interactive Tabular Data and Layout Containers)</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           A grid widget is a container that enables users to navigate the information or interactive elements it contains using directional navigation keys, such as arrow keys, Home, and End.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="landmarks/">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt src="../../../content-images/wai-aria-practices/images/pattern-landmarks.svg">
             <span>Landmarks</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           Landmarks are a set of eight roles that identify the major sections of a page.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="link/">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt src="../../../content-images/wai-aria-practices/images/pattern-link.svg">
             <span>Link</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           A link widget provides an interactive reference to a resource.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="listbox/">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt src="../../../content-images/wai-aria-practices/images/pattern-listbox.svg">
             <span>Listbox</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           A listbox widget presents a list of options and allows a user to select one or more of them.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="menubar/">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt src="../../../content-images/wai-aria-practices/images/pattern-menubar.svg">
             <span>Menu and Menubar</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           A menu is a widget that offers a list of choices to the user, such as a set of actions or functions.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="menu-button/">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt src="../../../content-images/wai-aria-practices/images/pattern-menu-button.svg">
             <span>Menu Button</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           A menu button is a button that opens a menu as described in the Menu and Menubar Pattern.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="meter/">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt src="../../../content-images/wai-aria-practices/images/pattern-meter.svg">
             <span>Meter</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           A meter is a graphical display of a numeric value that varies within a defined range.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="radio/">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt src="../../../content-images/wai-aria-practices/images/pattern-radio.svg">
             <span>Radio Group</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           A radio group is a set of checkable buttons, known as radio buttons, where no more than one of the buttons can be checked at a time.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="slider/">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt src="../../../content-images/wai-aria-practices/images/pattern-slider.svg">
             <span>Slider</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           A slider is an input where the user selects a value from within a given range.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="slider-multithumb/">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt src="../../../content-images/wai-aria-practices/images/pattern-slider-multithumb.svg">
             <span>Slider (Multi-Thumb)</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           A multi-thumb slider implements the Slider Pattern but includes two or more thumbs, often on a single rail.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="spinbutton/">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt src="../../../content-images/wai-aria-practices/images/pattern-spinbutton.svg">
             <span>Spinbutton</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           A spinbutton is an input widget that restricts its value to a set or range of discrete values.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="switch/">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt src="../../../content-images/wai-aria-practices/images/pattern-switch.svg">
             <span>Switch</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           A switch is an input widget that allows users to choose one of two values: on or off.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="table/">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt src="../../../content-images/wai-aria-practices/images/pattern-table.svg">
             <span>Table</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           Like an HTML table element, a WAI-ARIA table is a static tabular structure containing one or more rows that each contain one or more cells; it is not an interactive widget.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="tabs/">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt src="../../../content-images/wai-aria-practices/images/pattern-tabs.svg">
             <span>Tabs</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           Tabs are a set of layered sections of content, known as tab panels, that display one panel of content at a time.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="toolbar/">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt src="../../../content-images/wai-aria-practices/images/pattern-toolbar.svg">
             <span>Toolbar</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           A toolbar is a container for grouping a set of controls, such as buttons, menubuttons, or checkboxes.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="tooltip/">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt src="../../../content-images/wai-aria-practices/images/pattern-tooltip.svg">
             <span>Tooltip</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           A tooltip is a popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="treeview/">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt src="../../../content-images/wai-aria-practices/images/pattern-treeview.svg">
             <span>Tree View</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           A tree view widget presents a hierarchical list.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="treegrid/">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt src="../../../content-images/wai-aria-practices/images/pattern-treegrid.svg">
             <span>Treegrid</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           A treegrid widget presents a hierarchical data grid consisting of tabular information that is editable or interactive.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="windowsplitter/">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt src="../../../content-images/wai-aria-practices/images/pattern-windowsplitter.svg">
             <span>Window Splitter</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           A window splitter is a moveable separator between two sections, or panes, of a window that enables users to change the relative size of the panes.
         </div>
       </li>
diff --git a/_external/aria-practices b/_external/aria-practices
index 39fb654e5..9f68b5ed0 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit 39fb654e5146151ee70675af6ae755a72d8f7ff4
+Subproject commit 9f68b5ed08676d0220224515958d1313ea54fb8f
diff --git a/_external/data b/_external/data
index 2fa5e7cb6..5074d1b0a 160000
--- a/_external/data
+++ b/_external/data
@@ -1 +1 @@
-Subproject commit 2fa5e7cb6f4eb5f35583a94b9a5890a0f2a0a9ec
+Subproject commit 5074d1b0a590e9d81100c34e90a9d13c5106cc22
diff --git a/content-assets/wai-aria-practices/shared/js/filterBySearch.js b/content-assets/wai-aria-practices/shared/js/filterBySearch.js
new file mode 100644
index 000000000..78156c573
--- /dev/null
+++ b/content-assets/wai-aria-practices/shared/js/filterBySearch.js
@@ -0,0 +1,70 @@
+'use strict';
+
+/**
+ * @namespace aria
+ */
+
+var aria = aria || {};
+
+/* ---------------------------------------------------------------- */
+/*                  ARIA Filter Namespace                           */
+/* ---------------------------------------------------------------- */
+
+aria.Filter = aria.Filter || {};
+
+/**
+ * Filters list items within a container based on a search term.
+ *
+ * @function
+ * @memberof aria.Filter
+ * @param {string} searchTerm - The term to filter the list items by.
+ * @param {string} containerSelector - The CSS selector for the container holding the list items.
+ * @param {string} className - The class name of the elements within each list item to be checked against the search term.
+ * @description
+ * This function filters the list items within a specified container by comparing the text content
+ * of elements with a given class name to the provided search term. List items that do not match
+ * the search term will be hidden.
+ */
+aria.Filter.filterListItems = function (
+  searchTerm,
+  containerSelector,
+  className
+) {
+  const container = document.querySelector(containerSelector);
+  const listItems = container.getElementsByTagName('li');
+  const filter = searchTerm.toUpperCase();
+  Array.from(listItems).forEach((element) => {
+    aria.Filter.applyFilterToElement(element, filter, className);
+  });
+};
+
+/**
+ * This function checks if the text content of the child element with the specified class name contains the filter term.
+ * If the text content matches the filter, th
+ *
+ * @function applyFilterToElement
+ * @param {HTMLElement} element - The element to which the visibility filter will be applied.
+ * @param {string} filter - The text filter term, already converted to uppercase.
+ * @param {string} className - The class name of the child element whose text content is checked against the filter.
+ */
+aria.Filter.applyFilterToElement = function (element, filter, className) {
+  const targetElement = element.getElementsByClassName(className)[0];
+  if (targetElement) {
+    const textValue = targetElement.textContent || targetElement.innerText;
+    element.style.display = aria.Filter.isTextMatch(textValue, filter)
+      ? ''
+      : 'none';
+  }
+};
+
+/**
+ * Determines if the provided text value contains the filter term, ignoring case.
+ *
+ * @function isTextMatch
+ * @param {string} textValue - The text to search within.
+ * @param {string} filter - The term to search for, which should already be in uppercase.
+ * @returns {boolean} True if the filter term is found in the text value, false otherwise.
+ */
+aria.Filter.isTextMatch = function (textValue, filter) {
+  return textValue.toUpperCase().indexOf(filter) > -1;
+};
diff --git a/content-images/wai-aria-practices/images/icon-gridview.svg b/content-images/wai-aria-practices/images/icon-gridview.svg
new file mode 100644
index 000000000..df0d15d7e
--- /dev/null
+++ b/content-images/wai-aria-practices/images/icon-gridview.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M296 32h192c13.3 0 24 10.7 24 24v160c0 13.3-10.7 24-24 24H296c-13.3 0-24-10.7-24-24V56c0-13.3 10.7-24 24-24zm-80 0H24C10.7 32 0 42.7 0 56v160c0 13.3 10.7 24 24 24h192c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24zM0 296v160c0 13.3 10.7 24 24 24h192c13.3 0 24-10.7 24-24V296c0-13.3-10.7-24-24-24H24c-13.3 0-24 10.7-24 24zm296 184h192c13.3 0 24-10.7 24-24V296c0-13.3-10.7-24-24-24H296c-13.3 0-24 10.7-24 24v160c0 13.3 10.7 24 24 24z"/></svg>
\ No newline at end of file
diff --git a/content-images/wai-aria-practices/images/icon-listview.svg b/content-images/wai-aria-practices/images/icon-listview.svg
new file mode 100644
index 000000000..7aca4e735
--- /dev/null
+++ b/content-images/wai-aria-practices/images/icon-listview.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M40 48C26.7 48 16 58.7 16 72v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V72c0-13.3-10.7-24-24-24H40zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zM16 232v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V232c0-13.3-10.7-24-24-24H40c-13.3 0-24 10.7-24 24zM40 368c-13.3 0-24 10.7-24 24v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V392c0-13.3-10.7-24-24-24H40z"/></svg>
\ No newline at end of file

From 11272ba436d8397a076cacdc3f5cce8f1bee74ed Mon Sep 17 00:00:00 2001
From: Stalgia Grigg <stalgia@bocoup.com>
Date: Mon, 17 Jun 2024 15:26:47 -0700
Subject: [PATCH 02/11] Initial style updates

---
 content-assets/wai-aria-practices/styles.css | 56 +++++++++++++++-----
 1 file changed, 44 insertions(+), 12 deletions(-)

diff --git a/content-assets/wai-aria-practices/styles.css b/content-assets/wai-aria-practices/styles.css
index 66e05d655..e9e7cc0ac 100644
--- a/content-assets/wai-aria-practices/styles.css
+++ b/content-assets/wai-aria-practices/styles.css
@@ -105,63 +105,95 @@ ul.tiles {
   }
 }
 
-li.tile {
+ul.list {
+  display: grid;
+  grid-template-columns: 1fr;
+  row-gap: 0;
+  padding: 2em;
+  background: #ffffff;
+  border: 1px solid var(--line-grey);
+  border-radius: 4px;
+  row-gap: 1em;
+}
+
+ul.list img {
+  width: 42px;
+  height: auto;
+}
+
+li.pattern {
   align-self: stretch;
   list-style: none;
   margin: 0;
   padding: 2em 2em 0;
-  background: #ffffff;
   height: 100%;
   border: 1px solid var(--line-grey);
   border-radius: 4px;
 }
 
-li.tile a {
+ul.list li.pattern {
+  border: none;
+  border-bottom: 1px solid var(--line-grey);
+  padding: 0.25em 0 0.5em 0;
+}
+
+ul.list li.pattern:last-child {
+  border-bottom: none;
+}
+
+li.pattern a {
   display: block;
   text-decoration: none;
   color: var(--wai-green);
 }
 
-li.tile a:hover {
+li.pattern a:hover {
   text-decoration: underline;
 }
 
-li.tile a:focus {
+li.pattern a:focus {
   outline-offset: 8px;
   outline-color: #113362;
 }
 
-li.tile a:visited {
+li.pattern a:visited {
   color: var(--wai-green);
 }
 
-li.tile h2.tile-name {
+li.pattern h2.pattern-name {
   margin: 0;
   border: none;
   display: flex;
   align-items: flex-start;
 }
 
-li.tile img {
+li.pattern img {
   margin-right: 1em;
 }
 
 @media screen and (max-width: 23em) {
-  li.tile h2.tile-name {
+  li.pattern h2.pattern-name {
     flex-direction: column;
   }
-  li.tile h2.tile-name span {
+  li.pattern h2.pattern-name span {
     margin-top: 0.5em;
   }
 }
 
-li.tile .tile-introduction {
+li.pattern .pattern-introduction {
   float: left;
   border-top: 1px solid var(--line-grey);
   padding-top: 1em;
   margin-top: 1.25em;
 }
 
+ul.list .pattern-introduction {
+  border-top: none;
+  padding-top: 0;
+  margin-top: 0;
+  margin-left: 4em;
+}
+
 ul.content-list {
   list-style-type: none;
   padding: 0 1.5em;
@@ -263,7 +295,7 @@ ul.sidebar-list li a code {
   display: inline-block;
 }
 
-li .tile-introduction {
+li .pattern-introduction {
   color: rgb(29, 29, 29);
 }
 

From 41b6a4697eec75e4cd59fa34b15aaa3ee57fc8db Mon Sep 17 00:00:00 2001
From: Stalgia Grigg <stalgia@bocoup.com>
Date: Mon, 17 Jun 2024 15:55:40 -0700
Subject: [PATCH 03/11] layout for search form

---
 content-assets/wai-aria-practices/styles.css | 35 ++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/content-assets/wai-aria-practices/styles.css b/content-assets/wai-aria-practices/styles.css
index e9e7cc0ac..c11fed9ee 100644
--- a/content-assets/wai-aria-practices/styles.css
+++ b/content-assets/wai-aria-practices/styles.css
@@ -87,6 +87,41 @@ a.skip-main:focus, a.skip-main:active {
 }
 
 /* Patterns and Practices */
+.pattern-search {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: var(--cloudy-subtle);
+  padding: 1em;
+  margin: 1em 0;
+  border-radius: 4px;
+}
+
+.pattern-search form {
+  display: flex;
+  flex: 1;
+  margin-right: 1em;
+}
+
+.pattern-search form input {
+  flex: 1;
+  margin-right: 1em;
+}
+
+.view-toggle {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 0;
+}
+
+.view-toggle button:first-child {
+  border-radius: 4px 0 0 4px;
+}
+.view-toggle button:last-child {
+  border-radius: 0 4px 4px 0;
+}
+
 ul.tiles {
   display: grid;
   row-gap: 50px;

From 84eae26884263053527eda561ad3328191bd8612 Mon Sep 17 00:00:00 2001
From: Stalgia Grigg <stalgia@bocoup.com>
Date: Tue, 18 Jun 2024 15:46:40 -0700
Subject: [PATCH 04/11] Final pass on styles, built MD file

---
 ARIA/apg/patterns/patterns.md                | 103 +++++++++++++------
 _external/aria-practices                     |   2 +-
 content-assets/wai-aria-practices/styles.css |  59 ++++++++++-
 3 files changed, 125 insertions(+), 39 deletions(-)

diff --git a/ARIA/apg/patterns/patterns.md b/ARIA/apg/patterns/patterns.md
index 21b73e10f..8663d3274 100644
--- a/ARIA/apg/patterns/patterns.md
+++ b/ARIA/apg/patterns/patterns.md
@@ -28,6 +28,36 @@ lang: en
 <script src="../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
 <script src="../../../content-assets/wai-aria-practices/shared/js/filterBySearch.js"></script>
 
+<script>
+  window.onload = function () {
+    document
+      .getElementById("listViewButton")
+      .addEventListener("click", function () {
+        updateView("list");
+      });
+    document
+      .getElementById("tilesViewButton")
+      .addEventListener("click", function () {
+        updateView("tiles");
+      });
+  };
+
+  function updateView(view) {
+    const buttons = document.querySelectorAll(".view-toggle button");
+    buttons.forEach((btn) => {
+      btn.setAttribute("aria-pressed", "false");
+      btn.classList.remove("active");
+    });
+    const activeButton =
+      view === "list"
+        ? document.getElementById("listViewButton")
+        : document.getElementById("tilesViewButton");
+    activeButton.setAttribute("aria-pressed", "true");
+    activeButton.classList.add("active");
+    document.getElementById("patterns").className = view;
+  }
+</script>
+
 
 <link 
   rel="stylesheet"
@@ -64,40 +94,47 @@ lang: en
   
     
     
-    <form action="javascript:void(0);"
-      onsubmit="aria.Filter.filterListItems(document.getElementById('pattern-search-input').value, '#patterns', 'pattern-name')"
-      role="search"
-    >
-      <input type="text"
-        id="pattern-search-input"
-        placeholder="Search patterns"
-        oninput="aria.Filter.filterListItems(this.value, '#patterns', 'pattern-name')"
-        aria-label="Search patterns"
-      >
-      <button type="submit" aria-label="Submit search">Search</button>
-    </form>
-    <fieldset class="view-toggle">
-      <button aria-pressed="true" onclick="
-        document.querySelectorAll('.view-toggle button').forEach(btn => btn.setAttribute('aria-pressed', 'false'));
-        this.setAttribute('aria-pressed', 'true');
-        document.getElementById('patterns').classList.add('tiles');
-        document.getElementById('patterns').classList.remove('list');
-      "
-      aria-label="Show tiles view"
-      >
-        <img alt src="../../../content-images/wai-aria-practices/images/icon-gridview.svg" width="25px">
-      </button>
-      <button aria-pressed="false" onclick="
-        document.querySelectorAll('.view-toggle button').forEach(btn => btn.setAttribute('aria-pressed', 'false'));
-        this.setAttribute('aria-pressed', 'true');
-        document.getElementById('patterns').classList.add('list');
-        document.getElementById('patterns').classList.remove('tiles');
-        "
-        aria-label="Show list view"
+    <section class="pattern-search">
+      <form action="javascript:void(0);"
+        onsubmit="aria.Filter.filterListItems(document.getElementById('pattern-search-input').value, '#patterns', 'pattern-name')"
+        role="search"
       >
-        <img alt src="../../../content-images/wai-aria-practices/images/icon-listview.svg" width="25px">
-      </button>
-    </fieldset>
+        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" viewBox="0 0 20 20">
+          <g transform="translate(-3.5 -3.5)" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+            <path d="M20.5,12.5a8,8,0,1,1-8-8,8,8,0,0,1,8,8Z" ></path>
+            <path d="M29.325,29.325l-4.35-4.35" transform="translate(-6.825 -6.825)"></path>
+          </g>
+        </svg>
+        <input type="text"
+          id="pattern-search-input"
+          placeholder="Search patterns"
+          oninput="aria.Filter.filterListItems(this.value, '#patterns', 'pattern-name')"
+          aria-label="Search patterns"
+        >
+        <button type="submit" aria-label="Submit search">Search</button>
+      </form>
+      <fieldset class="view-toggle">
+        <button id="listViewButton" aria-pressed="false" aria-label="Show list view">
+          <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="25" viewBox="0 0 25 21">
+            <g transform="translate(0 -0.4)" fill="currentColor">
+              <path d="M4,20.775H1a1.135,1.135,0,0,0-1,1v3a1.135,1.135,0,0,0,1,1H4a1.135,1.135,0,0,0,1-1v-3A1.135,1.135,0,0,0,4,20.775Zm20,1H9a1.135,1.135,0,0,0-1,1v1a1.135,1.135,0,0,0,1,1H24a1.135,1.135,0,0,0,1-1v-1A1.135,1.135,0,0,0,24,21.775Z" transform="translate(0 -20.375)" ></path>
+              <path d="M4,20.775H1a1.135,1.135,0,0,0-1,1v3a1.135,1.135,0,0,0,1,1H4a1.135,1.135,0,0,0,1-1v-3A1.135,1.135,0,0,0,4,20.775Zm20,1H9a1.135,1.135,0,0,0-1,1v1a1.135,1.135,0,0,0,1,1H24a1.135,1.135,0,0,0,1-1v-1A1.135,1.135,0,0,0,24,21.775Z" transform="translate(0 -12.375)"></path>
+              <path d="M4,20.775H1a1.135,1.135,0,0,0-1,1v3a1.135,1.135,0,0,0,1,1H4a1.135,1.135,0,0,0,1-1v-3A1.135,1.135,0,0,0,4,20.775Zm20,1H9a1.135,1.135,0,0,0-1,1v1a1.135,1.135,0,0,0,1,1H24a1.135,1.135,0,0,0,1-1v-1A1.135,1.135,0,0,0,24,21.775Z" transform="translate(0 -4.375)"></path>
+            </g>
+          </svg>
+        </button>
+        <button id="tilesViewButton" aria-pressed="true" aria-label="Show tiles view" class="active">
+          <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="22" viewBox="0 0 22 22" >
+            <g transform="translate(0 -0.5)" fill="currentColor">
+              <rect width="9" height="9" rx="1" transform="translate(0 0.5)"></rect>
+              <rect width="9" height="9" rx="1" transform="translate(0 13.5)"></rect>
+              <rect width="9" height="9" rx="1" transform="translate(13 0.5)"></rect>
+              <rect width="9" height="9" rx="1" transform="translate(13 13.5)"></rect>
+            </g>
+          </svg>
+        </button>
+      </fieldset>
+    </section>
     <ul id="patterns" class="tiles">
       <li class="pattern">
         <a href="accordion/">
diff --git a/_external/aria-practices b/_external/aria-practices
index 9f68b5ed0..5bd5638e0 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit 9f68b5ed08676d0220224515958d1313ea54fb8f
+Subproject commit 5bd5638e0b17f5e5ce60473064f37d82574ecc70
diff --git a/content-assets/wai-aria-practices/styles.css b/content-assets/wai-aria-practices/styles.css
index c11fed9ee..4930d24ce 100644
--- a/content-assets/wai-aria-practices/styles.css
+++ b/content-assets/wai-aria-practices/styles.css
@@ -92,7 +92,7 @@ a.skip-main:focus, a.skip-main:active {
   flex-direction: row;
   align-items: center;
   background-color: var(--cloudy-subtle);
-  padding: 1em;
+  padding: 2em 1em;
   margin: 1em 0;
   border-radius: 4px;
 }
@@ -103,9 +103,36 @@ a.skip-main:focus, a.skip-main:active {
   margin-right: 1em;
 }
 
+.pattern-search form svg {
+  background-color: var(--pure-white);
+  border: solid 1px var(--light-blue);
+  border-right: none;
+  color: var(--grey);
+  padding: 0 0.25em 0 0.5em;
+  border-radius: 4px 0 0 4px;
+}
+
 .pattern-search form input {
   flex: 1;
   margin-right: 1em;
+  border-radius: 0 4px 4px 0;
+  border-left: none !important;
+}
+
+.pattern-search form input,
+.pattern-search form svg {
+  border-color: #8fadce !important;
+}
+
+.pattern-search form input::placeholder {
+  font-style: normal;
+  font-size: 1em;
+}
+
+.pattern-search form button {
+  font-size: 1em;
+  font-weight: 400;
+  padding: 0.5em 1.5em 0.5em 1.5em;
 }
 
 .view-toggle {
@@ -115,11 +142,32 @@ a.skip-main:focus, a.skip-main:active {
   margin-bottom: 0;
 }
 
+.view-toggle button {
+  padding: 0.3em;
+  background-color: #e7eff7;
+  border: solid 1px #8fadce;
+  color: #8fadce;
+  width: 40px;
+  height: 40px;
+}
+
+.view-toggle button.active {
+  color: var(--wai-green);
+  background-color: var(--lt-off-white);
+}
+
+.view-toggle button svg {
+  width: 22px;
+  height: auto;
+}
+
 .view-toggle button:first-child {
   border-radius: 4px 0 0 4px;
 }
+
 .view-toggle button:last-child {
   border-radius: 0 4px 4px 0;
+  border-left: none;
 }
 
 ul.tiles {
@@ -152,7 +200,7 @@ ul.list {
 }
 
 ul.list img {
-  width: 42px;
+  width: 46px;
   height: auto;
 }
 
@@ -169,7 +217,7 @@ li.pattern {
 ul.list li.pattern {
   border: none;
   border-bottom: 1px solid var(--line-grey);
-  padding: 0.25em 0 0.5em 0;
+  padding: 0.6em 0 0.5em 0;
 }
 
 ul.list li.pattern:last-child {
@@ -225,8 +273,9 @@ li.pattern .pattern-introduction {
 ul.list .pattern-introduction {
   border-top: none;
   padding-top: 0;
-  margin-top: 0;
-  margin-left: 4em;
+  margin-top: -12px;
+  margin-left: 4.25em;
+  max-width: 820px;
 }
 
 ul.content-list {

From bd657723f11fa884f59bdf1ac8db3e3c25be1c16 Mon Sep 17 00:00:00 2001
From: Stalgia Grigg <stalgia@bocoup.com>
Date: Tue, 18 Jun 2024 15:50:54 -0700
Subject: [PATCH 05/11] Remove unused icon assetts

---
 content-images/wai-aria-practices/images/icon-gridview.svg | 1 -
 content-images/wai-aria-practices/images/icon-listview.svg | 1 -
 2 files changed, 2 deletions(-)
 delete mode 100644 content-images/wai-aria-practices/images/icon-gridview.svg
 delete mode 100644 content-images/wai-aria-practices/images/icon-listview.svg

diff --git a/content-images/wai-aria-practices/images/icon-gridview.svg b/content-images/wai-aria-practices/images/icon-gridview.svg
deleted file mode 100644
index df0d15d7e..000000000
--- a/content-images/wai-aria-practices/images/icon-gridview.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M296 32h192c13.3 0 24 10.7 24 24v160c0 13.3-10.7 24-24 24H296c-13.3 0-24-10.7-24-24V56c0-13.3 10.7-24 24-24zm-80 0H24C10.7 32 0 42.7 0 56v160c0 13.3 10.7 24 24 24h192c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24zM0 296v160c0 13.3 10.7 24 24 24h192c13.3 0 24-10.7 24-24V296c0-13.3-10.7-24-24-24H24c-13.3 0-24 10.7-24 24zm296 184h192c13.3 0 24-10.7 24-24V296c0-13.3-10.7-24-24-24H296c-13.3 0-24 10.7-24 24v160c0 13.3 10.7 24 24 24z"/></svg>
\ No newline at end of file
diff --git a/content-images/wai-aria-practices/images/icon-listview.svg b/content-images/wai-aria-practices/images/icon-listview.svg
deleted file mode 100644
index 7aca4e735..000000000
--- a/content-images/wai-aria-practices/images/icon-listview.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M40 48C26.7 48 16 58.7 16 72v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V72c0-13.3-10.7-24-24-24H40zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zM16 232v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V232c0-13.3-10.7-24-24-24H40c-13.3 0-24 10.7-24 24zM40 368c-13.3 0-24 10.7-24 24v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V392c0-13.3-10.7-24-24-24H40z"/></svg>
\ No newline at end of file

From 70c2b43d1979cb5c288c29853a188aee13c056c6 Mon Sep 17 00:00:00 2001
From: Stalgia Grigg <stalgia@bocoup.com>
Date: Mon, 24 Jun 2024 10:43:44 -0700
Subject: [PATCH 06/11] Update build repo after moving view toggle js code

---
 ARIA/apg/patterns/patterns.md                 | 34 +-----------
 _external/aria-practices                      |  2 +-
 .../shared/js/filterBySearch.js               | 54 +++++++++++++++++++
 3 files changed, 57 insertions(+), 33 deletions(-)

diff --git a/ARIA/apg/patterns/patterns.md b/ARIA/apg/patterns/patterns.md
index 8663d3274..107bc535c 100644
--- a/ARIA/apg/patterns/patterns.md
+++ b/ARIA/apg/patterns/patterns.md
@@ -28,36 +28,6 @@ lang: en
 <script src="../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
 <script src="../../../content-assets/wai-aria-practices/shared/js/filterBySearch.js"></script>
 
-<script>
-  window.onload = function () {
-    document
-      .getElementById("listViewButton")
-      .addEventListener("click", function () {
-        updateView("list");
-      });
-    document
-      .getElementById("tilesViewButton")
-      .addEventListener("click", function () {
-        updateView("tiles");
-      });
-  };
-
-  function updateView(view) {
-    const buttons = document.querySelectorAll(".view-toggle button");
-    buttons.forEach((btn) => {
-      btn.setAttribute("aria-pressed", "false");
-      btn.classList.remove("active");
-    });
-    const activeButton =
-      view === "list"
-        ? document.getElementById("listViewButton")
-        : document.getElementById("tilesViewButton");
-    activeButton.setAttribute("aria-pressed", "true");
-    activeButton.classList.add("active");
-    document.getElementById("patterns").className = view;
-  }
-</script>
-
 
 <link 
   rel="stylesheet"
@@ -114,7 +84,7 @@ lang: en
         <button type="submit" aria-label="Submit search">Search</button>
       </form>
       <fieldset class="view-toggle">
-        <button id="listViewButton" aria-pressed="false" aria-label="Show list view">
+        <button id="listViewButton" onclick="aria.Filter.onViewButtonClicked(this)"  aria-pressed="false" aria-label="Show list view">
           <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="25" viewBox="0 0 25 21">
             <g transform="translate(0 -0.4)" fill="currentColor">
               <path d="M4,20.775H1a1.135,1.135,0,0,0-1,1v3a1.135,1.135,0,0,0,1,1H4a1.135,1.135,0,0,0,1-1v-3A1.135,1.135,0,0,0,4,20.775Zm20,1H9a1.135,1.135,0,0,0-1,1v1a1.135,1.135,0,0,0,1,1H24a1.135,1.135,0,0,0,1-1v-1A1.135,1.135,0,0,0,24,21.775Z" transform="translate(0 -20.375)" ></path>
@@ -123,7 +93,7 @@ lang: en
             </g>
           </svg>
         </button>
-        <button id="tilesViewButton" aria-pressed="true" aria-label="Show tiles view" class="active">
+        <button id="tilesViewButton" onclick="aria.Filter.onViewButtonClicked(this)" aria-pressed="true" aria-label="Show tiles view" class="active">
           <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="22" viewBox="0 0 22 22" >
             <g transform="translate(0 -0.5)" fill="currentColor">
               <rect width="9" height="9" rx="1" transform="translate(0 0.5)"></rect>
diff --git a/_external/aria-practices b/_external/aria-practices
index 5bd5638e0..56cfb284e 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit 5bd5638e0b17f5e5ce60473064f37d82574ecc70
+Subproject commit 56cfb284e6a26dccc843b2becb28ac4add2ef7c8
diff --git a/content-assets/wai-aria-practices/shared/js/filterBySearch.js b/content-assets/wai-aria-practices/shared/js/filterBySearch.js
index 78156c573..0aa378b24 100644
--- a/content-assets/wai-aria-practices/shared/js/filterBySearch.js
+++ b/content-assets/wai-aria-practices/shared/js/filterBySearch.js
@@ -68,3 +68,57 @@ aria.Filter.applyFilterToElement = function (element, filter, className) {
 aria.Filter.isTextMatch = function (textValue, filter) {
   return textValue.toUpperCase().indexOf(filter) > -1;
 };
+
+/**
+ * Handles the click event for a pattern results view button.
+ *
+ * @param {HTMLElement} selectedViewButton - The view button that was clicked.
+ */
+aria.Filter.onViewButtonClicked = function (selectedViewButton) {
+  aria.Filter.deactivateAllViewButtons();
+  aria.Filter.updateActiveViewButton(selectedViewButton);
+
+  const newViewClassName = aria.Filter.getNewViewClassName(selectedViewButton);
+  aria.Filter.setResultsViewClass(newViewClassName);
+};
+
+/**
+ * Deactivates all view buttons by setting aria-pressed attribute and removing 'active' class
+ */
+aria.Filter.deactivateAllViewButtons = function () {
+  const buttons = document.querySelectorAll('.view-toggle button');
+  buttons.forEach((btn) => {
+    btn.setAttribute('aria-pressed', 'false');
+    btn.classList.remove('active');
+  });
+};
+
+/**
+ * Determines the new view class name based on the selected view button.
+ *
+ * @param {HTMLElement} selectedViewButton - The view button that was clicked.
+ * @returns {string} The new view class name.
+ */
+aria.Filter.getNewViewClassName = function (selectedViewButton) {
+  return selectedViewButton.id === 'listViewButton' ? 'list' : 'tiles';
+};
+
+/**
+ * Updates the active view button by setting aria-pressed attribute and adding 'active' class
+ *
+ * @param {HTMLElement} selectedViewButton - The view button that was clicked.
+ */
+aria.Filter.updateActiveViewButton = function (selectedViewButton) {
+  selectedViewButton.setAttribute('aria-pressed', 'true');
+  selectedViewButton.classList.add('active');
+};
+
+/**
+ * Sets the class name of the patterns result container to either 'list' or 'tiles' based on the selected view button
+ *
+ * @param {string} viewClass - The class name of the patterns result container.
+ */
+aria.Filter.setResultsViewClass = function (viewClass) {
+  const patternsContainer = document.getElementById('patterns');
+  patternsContainer.className = viewClass;
+};

From 76c72acfa6af63400a2f7cbf5ca3815f28ccbcc4 Mon Sep 17 00:00:00 2001
From: Stalgia Grigg <stalgia@bocoup.com>
Date: Mon, 24 Jun 2024 11:01:29 -0700
Subject: [PATCH 07/11] Styles for accessible h2 for Filter form

---
 ARIA/apg/patterns/patterns.md                |  3 +++
 _external/aria-practices                     |  2 +-
 content-assets/wai-aria-practices/styles.css | 13 ++++++++++---
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/ARIA/apg/patterns/patterns.md b/ARIA/apg/patterns/patterns.md
index 107bc535c..0fa1059d4 100644
--- a/ARIA/apg/patterns/patterns.md
+++ b/ARIA/apg/patterns/patterns.md
@@ -65,6 +65,8 @@ lang: en
     
     
     <section class="pattern-search">
+      <h2>Filter</h2>
+      <div class="pattern-search-flex-container">
       <form action="javascript:void(0);"
         onsubmit="aria.Filter.filterListItems(document.getElementById('pattern-search-input').value, '#patterns', 'pattern-name')"
         role="search"
@@ -104,6 +106,7 @@ lang: en
           </svg>
         </button>
       </fieldset>
+      </div>
     </section>
     <ul id="patterns" class="tiles">
       <li class="pattern">
diff --git a/_external/aria-practices b/_external/aria-practices
index 56cfb284e..5626c7b63 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit 56cfb284e6a26dccc843b2becb28ac4add2ef7c8
+Subproject commit 5626c7b6309ca8a331ed78769dab46c5aae6c7b2
diff --git a/content-assets/wai-aria-practices/styles.css b/content-assets/wai-aria-practices/styles.css
index 4930d24ce..4fa72a3f2 100644
--- a/content-assets/wai-aria-practices/styles.css
+++ b/content-assets/wai-aria-practices/styles.css
@@ -88,15 +88,22 @@ a.skip-main:focus, a.skip-main:active {
 
 /* Patterns and Practices */
 .pattern-search {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
   background-color: var(--cloudy-subtle);
   padding: 2em 1em;
   margin: 1em 0;
   border-radius: 4px;
 }
 
+.pattern-search h2 {
+  margin-top: 0;
+}
+
+.pattern-search-flex-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
 .pattern-search form {
   display: flex;
   flex: 1;

From 9598221e133e797a826fb1e90bce347e9a3d1513 Mon Sep 17 00:00:00 2001
From: Stalgia Grigg <stalgia@bocoup.com>
Date: Mon, 24 Jun 2024 11:32:11 -0700
Subject: [PATCH 08/11] No results found element and styles

---
 ARIA/apg/patterns/patterns.md                 |  8 +++--
 _external/aria-practices                      |  2 +-
 .../shared/js/filterBySearch.js               | 36 ++++++++++++++++---
 content-assets/wai-aria-practices/styles.css  |  8 +++++
 4 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/ARIA/apg/patterns/patterns.md b/ARIA/apg/patterns/patterns.md
index 0fa1059d4..a5b819c5e 100644
--- a/ARIA/apg/patterns/patterns.md
+++ b/ARIA/apg/patterns/patterns.md
@@ -68,7 +68,7 @@ lang: en
       <h2>Filter</h2>
       <div class="pattern-search-flex-container">
       <form action="javascript:void(0);"
-        onsubmit="aria.Filter.filterListItems(document.getElementById('pattern-search-input').value, '#patterns', 'pattern-name')"
+        onsubmit="aria.Filter.filterListItems(document.getElementById('pattern-search-input').value, '#patterns', 'pattern-name', 'no-patterns-found')"
         role="search"
       >
         <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" viewBox="0 0 20 20">
@@ -80,7 +80,7 @@ lang: en
         <input type="text"
           id="pattern-search-input"
           placeholder="Search patterns"
-          oninput="aria.Filter.filterListItems(this.value, '#patterns', 'pattern-name')"
+          oninput="aria.Filter.filterListItems(this.value, '#patterns', 'pattern-name', 'no-patterns-found')"
           aria-label="Search patterns"
         >
         <button type="submit" aria-label="Submit search">Search</button>
@@ -468,6 +468,10 @@ lang: en
           A window splitter is a moveable separator between two sections, or panes, of a window that enables users to change the relative size of the panes.
         </div>
       </li>
+
+      <li id="no-patterns-found" aria-hidden="true" style="display: none">
+        <h2>No results found.</h2>
+      </li>
     </ul>
   
   
diff --git a/_external/aria-practices b/_external/aria-practices
index 5626c7b63..eaf3f2d00 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit 5626c7b6309ca8a331ed78769dab46c5aae6c7b2
+Subproject commit eaf3f2d006a372229bf3d4909ef1acd7b4d7aba0
diff --git a/content-assets/wai-aria-practices/shared/js/filterBySearch.js b/content-assets/wai-aria-practices/shared/js/filterBySearch.js
index 0aa378b24..1cd6da120 100644
--- a/content-assets/wai-aria-practices/shared/js/filterBySearch.js
+++ b/content-assets/wai-aria-practices/shared/js/filterBySearch.js
@@ -20,6 +20,7 @@ aria.Filter = aria.Filter || {};
  * @param {string} searchTerm - The term to filter the list items by.
  * @param {string} containerSelector - The CSS selector for the container holding the list items.
  * @param {string} className - The class name of the elements within each list item to be checked against the search term.
+ * @param {string} noResultsElementId - The id of the element to show when no results are found.
  * @description
  * This function filters the list items within a specified container by comparing the text content
  * of elements with a given class name to the provided search term. List items that do not match
@@ -28,14 +29,37 @@ aria.Filter = aria.Filter || {};
 aria.Filter.filterListItems = function (
   searchTerm,
   containerSelector,
-  className
+  className,
+  noResultsElementId
 ) {
   const container = document.querySelector(containerSelector);
   const listItems = container.getElementsByTagName('li');
   const filter = searchTerm.toUpperCase();
+  let hasResults = false;
   Array.from(listItems).forEach((element) => {
-    aria.Filter.applyFilterToElement(element, filter, className);
+    const isMatch = aria.Filter.applyFilterToElement(
+      element,
+      filter,
+      className
+    );
+    if (isMatch) {
+      hasResults = true;
+    }
   });
+  aria.Filter.updateVisibility(noResultsElementId, !hasResults);
+};
+
+/**
+ * Updates the visibility of an element based on the search results.
+ *
+ * @function updateVisibility
+ * @param {string} id - The id of the element to update.
+ * @param {boolean} isVisible - True if the element should be visible, false otherwise.
+ */
+aria.Filter.updateVisibility = function (id, isVisible) {
+  const el = document.getElementById(id);
+  el.style.display = isVisible ? '' : 'none';
+  el.setAttribute('aria-hidden', String(!isVisible));
 };
 
 /**
@@ -46,15 +70,17 @@ aria.Filter.filterListItems = function (
  * @param {HTMLElement} element - The element to which the visibility filter will be applied.
  * @param {string} filter - The text filter term, already converted to uppercase.
  * @param {string} className - The class name of the child element whose text content is checked against the filter.
+ * @returns {boolean} True if the filter term is found in the text value, false otherwise.
  */
 aria.Filter.applyFilterToElement = function (element, filter, className) {
   const targetElement = element.getElementsByClassName(className)[0];
   if (targetElement) {
     const textValue = targetElement.textContent || targetElement.innerText;
-    element.style.display = aria.Filter.isTextMatch(textValue, filter)
-      ? ''
-      : 'none';
+    const isMatch = aria.Filter.isTextMatch(textValue, filter);
+    element.style.display = isMatch ? '' : 'none';
+    return isMatch;
   }
+  return false;
 };
 
 /**
diff --git a/content-assets/wai-aria-practices/styles.css b/content-assets/wai-aria-practices/styles.css
index 4fa72a3f2..a6e8e58f3 100644
--- a/content-assets/wai-aria-practices/styles.css
+++ b/content-assets/wai-aria-practices/styles.css
@@ -211,6 +211,14 @@ ul.list img {
   height: auto;
 }
 
+#patterns #no-patterns-found {
+  list-style: none;
+}
+
+#patterns #no-patterns-found h2 {
+  border: none;
+}
+
 li.pattern {
   align-self: stretch;
   list-style: none;

From 3e794ee568c98c824575a530840c0b6fe6f098e1 Mon Sep 17 00:00:00 2001
From: Stalgia Grigg <stalgia@bocoup.com>
Date: Mon, 24 Jun 2024 13:21:43 -0700
Subject: [PATCH 09/11] Fix styling for practices tiles

---
 content-assets/wai-aria-practices/styles.css | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/content-assets/wai-aria-practices/styles.css b/content-assets/wai-aria-practices/styles.css
index a6e8e58f3..9342da8df 100644
--- a/content-assets/wai-aria-practices/styles.css
+++ b/content-assets/wai-aria-practices/styles.css
@@ -219,6 +219,7 @@ ul.list img {
   border: none;
 }
 
+li.tile,
 li.pattern {
   align-self: stretch;
   list-style: none;
@@ -239,25 +240,30 @@ ul.list li.pattern:last-child {
   border-bottom: none;
 }
 
+li.tile a,
 li.pattern a {
   display: block;
   text-decoration: none;
   color: var(--wai-green);
 }
 
+li.tile a:hover,
 li.pattern a:hover {
   text-decoration: underline;
 }
 
+li.tile a:focus,
 li.pattern a:focus {
   outline-offset: 8px;
   outline-color: #113362;
 }
 
+li.tile a:visited,
 li.pattern a:visited {
   color: var(--wai-green);
 }
 
+li.tile h2.tile-name,
 li.pattern h2.pattern-name {
   margin: 0;
   border: none;
@@ -270,14 +276,17 @@ li.pattern img {
 }
 
 @media screen and (max-width: 23em) {
+  li.tile h2.tile-name,
   li.pattern h2.pattern-name {
     flex-direction: column;
   }
+  li.tile h2.tile-name span,
   li.pattern h2.pattern-name span {
     margin-top: 0.5em;
   }
 }
 
+li.tile .tile-introduction,
 li.pattern .pattern-introduction {
   float: left;
   border-top: 1px solid var(--line-grey);
@@ -394,6 +403,7 @@ ul.sidebar-list li a code {
   display: inline-block;
 }
 
+li .tile-introduction,
 li .pattern-introduction {
   color: rgb(29, 29, 29);
 }

From e736435c9c346c7d5f3680419967cabd2fd8f0d6 Mon Sep 17 00:00:00 2001
From: Stalgia Grigg <stalgia@bocoup.com>
Date: Tue, 2 Jul 2024 16:00:23 -0700
Subject: [PATCH 10/11] Updates for clear button and removal of submit in
 filter patterns

---
 ARIA/apg/patterns/patterns.md                 | 22 +++++---
 _external/aria-practices                      |  2 +-
 _external/data                                |  2 +-
 .../shared/js/filterBySearch.js               | 25 +++++++++
 content-assets/wai-aria-practices/styles.css  | 53 +++++++++++++------
 5 files changed, 77 insertions(+), 27 deletions(-)

diff --git a/ARIA/apg/patterns/patterns.md b/ARIA/apg/patterns/patterns.md
index a5b819c5e..904ff9bea 100644
--- a/ARIA/apg/patterns/patterns.md
+++ b/ARIA/apg/patterns/patterns.md
@@ -64,11 +64,10 @@ lang: en
   
     
     
-    <section class="pattern-search">
-      <h2>Filter</h2>
-      <div class="pattern-search-flex-container">
+    <section class="pattern-filter-section">
+      <h2>Filter Patterns</h2>
+      <div class="pattern-filter-flex-container">
       <form action="javascript:void(0);"
-        onsubmit="aria.Filter.filterListItems(document.getElementById('pattern-search-input').value, '#patterns', 'pattern-name', 'no-patterns-found')"
         role="search"
       >
         <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" viewBox="0 0 20 20">
@@ -78,12 +77,19 @@ lang: en
           </g>
         </svg>
         <input type="text"
-          id="pattern-search-input"
-          placeholder="Search patterns"
+          id="pattern-filter-input"
+          placeholder="Filter patterns"
           oninput="aria.Filter.filterListItems(this.value, '#patterns', 'pattern-name', 'no-patterns-found')"
-          aria-label="Search patterns"
+          aria-label="Filter patterns"
         >
-        <button type="submit" aria-label="Submit search">Search</button>
+        <button id="clear-pattern-filter"
+          aria-label="Clear pattern filter"
+          onclick="aria.Filter.clearInput(document.getElementById('pattern-filter-input'), '#patterns', 'pattern-name', 'no-patterns-found')"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10">
+            <path d="M17.5,8.507,16.493,7.5,12.5,11.493,8.507,7.5,7.5,8.507,11.493,12.5,7.5,16.493,8.507,17.5,12.5,13.507,16.493,17.5,17.5,16.493,13.507,12.5Z" transform="translate(-7.5 -7.5)"></path>
+          </svg>
+        </button>
       </form>
       <fieldset class="view-toggle">
         <button id="listViewButton" onclick="aria.Filter.onViewButtonClicked(this)"  aria-pressed="false" aria-label="Show list view">
diff --git a/_external/aria-practices b/_external/aria-practices
index eaf3f2d00..11d4a9e0d 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit eaf3f2d006a372229bf3d4909ef1acd7b4d7aba0
+Subproject commit 11d4a9e0d27ca295670f6055a45b69a5be87aed8
diff --git a/_external/data b/_external/data
index 5074d1b0a..bb1336392 160000
--- a/_external/data
+++ b/_external/data
@@ -1 +1 @@
-Subproject commit 5074d1b0a590e9d81100c34e90a9d13c5106cc22
+Subproject commit bb1336392685c5dec9dbf30c5fb5c9e0c0c9260d
diff --git a/content-assets/wai-aria-practices/shared/js/filterBySearch.js b/content-assets/wai-aria-practices/shared/js/filterBySearch.js
index 1cd6da120..38b3e14a2 100644
--- a/content-assets/wai-aria-practices/shared/js/filterBySearch.js
+++ b/content-assets/wai-aria-practices/shared/js/filterBySearch.js
@@ -83,6 +83,31 @@ aria.Filter.applyFilterToElement = function (element, filter, className) {
   return false;
 };
 
+/**
+ * Clears the input element and filters the list items based on the empty string.
+ * Sets focus back to the input element.
+ *
+ * @param {HTMLElement} inputElement - The input element to clear.
+ * @param {string} containerSelector - The CSS selector for the container holding the list items.
+ * @param {string} className - The class name of the elements within each list item to be checked against the search term.
+ * @param {string} noResultsElementId - The id of the element to show when no results are found.
+ */
+aria.Filter.clearInput = function (
+  inputElement,
+  containerSelector,
+  className,
+  noResultsElementId
+) {
+  inputElement.value = '';
+  aria.Filter.filterListItems(
+    '',
+    containerSelector,
+    className,
+    noResultsElementId
+  );
+  inputElement.focus();
+};
+
 /**
  * Determines if the provided text value contains the filter term, ignoring case.
  *
diff --git a/content-assets/wai-aria-practices/styles.css b/content-assets/wai-aria-practices/styles.css
index 9342da8df..3971ff7be 100644
--- a/content-assets/wai-aria-practices/styles.css
+++ b/content-assets/wai-aria-practices/styles.css
@@ -87,30 +87,30 @@ a.skip-main:focus, a.skip-main:active {
 }
 
 /* Patterns and Practices */
-.pattern-search {
+.pattern-filter-section {
   background-color: var(--cloudy-subtle);
   padding: 2em 1em;
   margin: 1em 0;
   border-radius: 4px;
 }
 
-.pattern-search h2 {
+.pattern-filter-section h2 {
   margin-top: 0;
 }
 
-.pattern-search-flex-container {
+.pattern-filter-flex-container {
   display: flex;
   flex-direction: row;
   align-items: center;
 }
 
-.pattern-search form {
+.pattern-filter-section form {
   display: flex;
   flex: 1;
   margin-right: 1em;
 }
 
-.pattern-search form svg {
+.pattern-filter-section form svg {
   background-color: var(--pure-white);
   border: solid 1px var(--light-blue);
   border-right: none;
@@ -119,27 +119,36 @@ a.skip-main:focus, a.skip-main:active {
   border-radius: 4px 0 0 4px;
 }
 
-.pattern-search form input {
+.pattern-filter-section form input {
   flex: 1;
-  margin-right: 1em;
-  border-radius: 0 4px 4px 0;
+  margin-right: 0;
   border-left: none !important;
+  border-right: none !important;
 }
 
-.pattern-search form input,
-.pattern-search form svg {
+.pattern-filter-section form input,
+.pattern-filter-section form svg,
+#clear-pattern-filter {
   border-color: #8fadce !important;
 }
 
-.pattern-search form input::placeholder {
+.pattern-filter-section form input::placeholder {
   font-style: normal;
   font-size: 1em;
 }
 
-.pattern-search form button {
-  font-size: 1em;
-  font-weight: 400;
-  padding: 0.5em 1.5em 0.5em 1.5em;
+#clear-pattern-filter {
+  background-color: var(--pure-white);
+  border: solid 1px;
+  border-left: none;
+  color: var(--grey);
+  padding: 0 0.25em 0 0.5em;
+  border-radius: 0 4px 4px 0;
+  cursor: pointer;
+}
+
+#clear-pattern-filter svg {
+  border: none;
 }
 
 .view-toggle {
@@ -154,8 +163,8 @@ a.skip-main:focus, a.skip-main:active {
   background-color: #e7eff7;
   border: solid 1px #8fadce;
   color: #8fadce;
-  width: 40px;
-  height: 40px;
+  width: 28px;
+  height: 35px;
 }
 
 .view-toggle button.active {
@@ -187,12 +196,22 @@ ul.tiles {
     grid-template-columns: 49% 49%;
     column-gap: 2%;
   }
+
+  .view-toggle button {
+    width: 40px;
+    height: 40px;
+  }
 }
 @media screen and (min-width: 70em) {
   ul.tiles {
     grid-template-columns: 32% 32% 32%;
     column-gap: 2%;
   }
+
+  .view-toggle button svg {
+    width: 22px;
+    height: auto;
+  }
 }
 
 ul.list {

From 53e2eae108ad30c3cc3b1b0b6b622d8db170a095 Mon Sep 17 00:00:00 2001
From: Howard Edwards <howarde.edwards@gmail.com>
Date: Wed, 31 Jul 2024 09:52:43 -0400
Subject: [PATCH 11/11] Update aria-practices gitmodule latest commit

---
 _external/aria-practices | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_external/aria-practices b/_external/aria-practices
index 11d4a9e0d..8e5825a25 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit 11d4a9e0d27ca295670f6055a45b69a5be87aed8
+Subproject commit 8e5825a2543cf503b62c0558d480290dab66a02f