Updates for clear button and removal of submit in filter patterns

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">

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.
  *

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 {