From 8e5825a2543cf503b62c0558d480290dab66a02f Mon Sep 17 00:00:00 2001
From: Stalgia Grigg <stalgia@bocoup.com>
Date: Tue, 30 Jul 2024 00:06:40 -0700
Subject: [PATCH] Patterns page: Add patterns filter and grid/list view toggles
 (pull #3043)

This PR includes two new features for the patterns page:
1. A text input that filters the displayed patterns as the user types.
2. Options for choosing between a grid view (the default) or a more compact list view.
---
 content/patterns/patterns.html      | 240 +++++++++++++++++-----------
 content/shared/js/filterBySearch.js | 175 ++++++++++++++++++++
 2 files changed, 324 insertions(+), 91 deletions(-)
 create mode 100644 content/shared/js/filterBySearch.js
diff --git a/content/patterns/patterns.html b/content/patterns/patterns.html
index af085d4b4..88689af93 100644
--- a/content/patterns/patterns.html
+++ b/content/patterns/patterns.html
@@ -11,370 +11,428 @@
     <link rel="stylesheet" href="../shared/css/core.css">
     <script src="../shared/js/highlight.pack.js"></script>
     <script src="../shared/js/app.js"></script>
+    <script src="../shared/js/filterBySearch.js"></script>
     <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../shared/js/skipto.js"></script>
   </head>
   <body>
     <h1>Patterns</h1>
-    <ul class="tiles">
-      <li class="tile">
+    <section class="pattern-filter-section">
+      <h2>Filter Patterns</h2>
+      <div class="pattern-filter-flex-container">
+      <form
+        action="javascript:void(0);"
+        role="search"
+      >
+        <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 d="M29.325,29.325l-4.35-4.35" transform="translate(-6.825 -6.825)"/>
+          </g>
+        </svg>
+        <input
+          type="text"
+          id="pattern-filter-input"
+          placeholder="Filter patterns"
+          oninput="aria.Filter.filterListItems(this.value, '#patterns', 'pattern-name', 'no-patterns-found')"
+          aria-label="Filter patterns"
+        >
+        <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)"/>
+          </svg>
+        </button>
+      </form>
+      <fieldset class="view-toggle">
+        <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 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 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)"/>
+            </g>
+          </svg>
+        </button>
+        <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 width="9" height="9" rx="1" transform="translate(0 13.5)"/>
+              <rect width="9" height="9" rx="1" transform="translate(13 0.5)"/>
+              <rect width="9" height="9" rx="1" transform="translate(13 13.5)"/>
+            </g>
+          </svg>
+        </button>
+      </fieldset>
+      </div>
+    </section>
+    <ul id="patterns" class="tiles">
+      <li class="pattern">
         <a href="accordion/accordion-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../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/alert-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../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/alertdialog-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../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/breadcrumb-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../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/button-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../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/carousel-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../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/checkbox-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../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/combobox-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../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/dialog-modal-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../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/disclosure-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../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/feed-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../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/grid-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../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/landmarks-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../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/link-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../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/listbox-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../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/menu-and-menubar-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../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/menu-button-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../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/meter-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../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/radio-group-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../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/slider-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../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/slider-multithumb-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../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/spinbutton-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../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/switch-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../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/table-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../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/tabs-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../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/toolbar-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../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/tooltip-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../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/treeview-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../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/treegrid-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../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/windowsplitter-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../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>
+
+      <li id="no-patterns-found" aria-hidden="true" style="display: none">
+        <h2>No results found.</h2>
+      </li>
     </ul>
   </body>
 </html>
diff --git a/content/shared/js/filterBySearch.js b/content/shared/js/filterBySearch.js
new file mode 100644
index 000000000..38b3e14a2
--- /dev/null
+++ b/content/shared/js/filterBySearch.js
@@ -0,0 +1,175 @@
+'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.
+ * @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
+ * the search term will be hidden.
+ */
+aria.Filter.filterListItems = function (
+  searchTerm,
+  containerSelector,
+  className,
+  noResultsElementId
+) {
+  const container = document.querySelector(containerSelector);
+  const listItems = container.getElementsByTagName('li');
+  const filter = searchTerm.toUpperCase();
+  let hasResults = false;
+  Array.from(listItems).forEach((element) => {
+    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));
+};
+
+/**
+ * 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.
+ * @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;
+    const isMatch = aria.Filter.isTextMatch(textValue, filter);
+    element.style.display = isMatch ? '' : 'none';
+    return isMatch;
+  }
+  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.
+ *
+ * @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;
+};
+
+/**
+ * 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;
+};
