Merge pull request #514 from jamstack/zl/476-a11y

Switch to use open source <filter-container> component

Author: Phil Hawksworth

.eleventy.js

@@ -8,7 +8,8 @@ module.exports = function(eleventyConfig) {
   // pass images directly through to the output
   eleventyConfig.addPassthroughCopy("src/site/img");
   eleventyConfig.addPassthroughCopy({
-    "src/js": "js"
+    "src/js": "js",
+    "node_modules/@zachleat/filter-container/*.js": "js",
   });
 
   // Date helper

package.json

@@ -24,6 +24,7 @@
   "dependencies": {
     "@11ty/eleventy": "^0.11.1",
     "@11ty/eleventy-cache-assets": "^2.0.4",
+    "@zachleat/filter-container": "^1.0.3",
     "autoprefixer": "^10.2.3",
     "cssnano": "^4.1.10",
     "dotenv": "^8.2.0",
@@ -37,9 +38,9 @@
     "netlify-plugin-minify-html": "^0.3.0",
     "node-fetch": "^2.6.1",
     "npm-run-all": "^4.1.5",
+    "placename": "^1.1.2",
     "postcss": "^8.2.4",
     "postcss-cli": "^8.3.1",
-    "placename": "^1.1.2",
     "postcss-import": "^13.0.0",
     "spdx-correct": "^3.1.1",
     "tailwindcss": "^2.0.2"

src/css/tailwind.css

@@ -314,6 +314,14 @@ details[open] .summary-swap-open {
 }
 
 /* Filters */
+.filter-form {
+  opacity: .4;
+  pointer-events: none;
+}
+.filter-container--js .filter-form {
+  opacity: 1;
+  pointer-events: auto;
+}
 .filter-opensource--hide,
 .filter-typeofcms--hide,
 .filter-language--hide,

src/js/filter-container.js

@@ -70,11 +70,11 @@ layout: layouts/base.njk
 
 <section class="cards">
   <h2 class="mb-12">Find a Local User Group</h2>
-  <filter-container>
-    <form class="pb-4">
+  <filter-container data-oninit>
+    <form class="pb-4 filter-form">
       <div class="pb-2">
         <strong class="pr-4">Filter</strong>
-        <span data-filter-results></span>
+        <span data-filter-results="User Group/User Groups" aria-live="polite"></span>
       </div>
       <label class="inline-flex pr-4 pb-2">
         <span class="sr-only">Country</span>

src/site/community.njk

@@ -14,13 +14,13 @@ layout: layouts/base.njk
 
 <section class="cards mt-12">
   <sort-container>
-    <filter-container>
-      <form class="pb-4">
+    <filter-container data-oninit>
+      <form class="pb-4 filter-form">
         <div class="flex flex-wrap">
           <div>
             <div class="pb-2">
               <strong class="pr-4">Filter</strong>
-              <span data-filter-results></span>
+              <span data-filter-results="Generator/Generators" aria-live="polite"></span>
             </div>
             <label class="inline-flex pr-4 pb-2">
               <span class="sr-only">Language</span>

src/site/generators.njk

@@ -14,17 +14,17 @@ layout: layouts/base.njk
 
 <section class="cards mt-12">
   <sort-container>
-    <filter-container>
-      <form class="pb-4">
+    <filter-container data-oninit>
+      <form class="pb-4 filter-form">
         <div class="flex flex-wrap">
           <div>
             <div class="pb-2">
               <strong class="pr-4">Filter</strong>
-              <span data-filter-results></span>
+              <span data-filter-results="Headless CMS/Headless CMSs" aria-live="polite"></span>
             </div>
             <label class="inline-flex pr-4 pb-2">
               <span class="sr-only">CMS Type</span>
-              <select data-filter-bind="typeofcms" class="text-white py-1 px-2 rounded-default border border-white bg-transparent">
+              <select data-filter-bind="typeofcms" class="text-black py-1 px-2 rounded-default border border-white bg-white">
                 <option selected value="">Any CMS Type</option>
                 {%- for template in collections.cms | select("data.typeofcms") | unique | sort(false, false) %}
                 <option value="{{ template | lower }}">{{ template }}</option>
@@ -33,7 +33,7 @@ layout: layouts/base.njk
             </label>
             <label class="inline-flex pr-4 pb-2">
               <span class="sr-only">License</span>
-              <select data-filter-bind="opensource" class="text-white py-1 px-2 rounded-default border border-white bg-transparent">
+              <select data-filter-bind="opensource" class="text-black py-1 px-2 rounded-default border border-white bg-white">
                 <option selected value="">Any License</option>
                 {%- for opensource in collections.cms | select("data.opensource") | unique | sort(true, false) %}
                 <option value="{{ opensource | lower }}">{% if opensource == "No" %}Closed{% else %}Open{% endif %} source</option>
@@ -47,7 +47,7 @@ layout: layouts/base.njk
             </div>
             <label class="inline-flex pr-4 pb-2">
               <span class="sr-only">Sort by</span>
-              <select data-sort class="text-white py-1 px-2 rounded-default border border-white bg-transparent">
+              <select data-sort class="text-black py-1 px-2 rounded-default border border-white bg-white">
                 <option selected value="githubstars-numeric-descending">GitHub Stars</option>
                 <option value="name">Name</option>
               </select>