section for search and filter

w3c · Jun 17, 2024 · cd32c37 · cd32c37
1 parent 9f68b5e
commit cd32c37
Showing 1 changed file with 36 additions and 34 deletions.
diff --git a/content/patterns/patterns.html b/content/patterns/patterns.html
@@ -16,42 +16,44 @@
   </head>
   <body>
     <h1>Patterns</h1>
-    <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"
+    <section class="pattern-search">
+      <form
+        action="javascript:void(0);"
+        onsubmit="aria.Filter.filterListItems(document.getElementById('pattern-search-input').value, '#patterns', 'pattern-name')"
+        role="search"
       >
-      <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="../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');
+        <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 list view"
-      >
-        <img alt="" src="../images/icon-listview.svg" width="25px" >
-      </button>
-    </fieldset>
+        aria-label="Show tiles view"
+        >
+          <img alt="" src="../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="../images/icon-listview.svg" width="25px" >
+        </button>
+      </fieldset>
+    </section>
     <ul id="patterns" class="tiles">
       <li class="pattern">
         <a href="accordion/accordion-pattern.html">