draft: spike(a11y): disable all clicking

cfgov/housing_counselor/jinja2/housing_counselor/index.html

@@ -184,12 +184,9 @@ <h1>Find a housing counselor</h1>
                     </li>
                 </ul>
 
-                <h2 class="h4">
-                    Displaying the
-                    {{ api_json.counseling_agencies | length }}
-                    locations closest to ZIP code
-                    {{ zipcode | escape }}
-                </h2>
+                <h2 class="h1">
+                    👉 Click the "No mouse icon" in the upper left 3 times 😉
+                </h1>
             </div>
 
             <table class="o-table

cfgov/v1/jinja2/v1/layouts/base.html

@@ -372,6 +372,103 @@
         </script><div id='ZN_eLsXNyVBrTKgTHM'><!--DO NOT REMOVE-CONTENTS PLACED HERE--></div>
     {% endif %}
 
+
+    {# The following script block can be added to other sites to test accessibility #}
+    <script type="text/javascript">
+      console.log('Initializing accessibility button...')
+
+      // icon URLs
+      const noMouseIconUrlString = `url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20viewBox%3D%2221.961%2019.533%2085.047%2085.047%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%2221.961%22%20y%3D%2219.533%22%20width%3D%2285.047%22%20height%3D%2285.047%22%20style%3D%22stroke%3A%20rgb(0%2C%200%2C%200)%3B%20fill%3A%20rgb(255%2C%20255%2C%20255)%3B%22%2F%3E%3Cpath%20fill-rule%3D%22nonzero%22%20d%3D%22M%2062.51%2098.857%20L%2067.634%2098.857%20C%2072.135%2098.857%2076.23%2097.014%2079.2%2094.045%20C%2082.167%2091.076%2084.012%2086.981%2084.012%2082.479%20L%2084.012%2064.964%20L%2046.132%2064.964%20L%2046.132%2082.479%20C%2046.132%2086.981%2047.976%2091.076%2050.944%2094.045%20C%2053.913%2097.014%2058.007%2098.857%2062.51%2098.857%20Z%20M%2063.316%2035.221%20L%2063.316%2032.44%20C%2063.316%2030.944%2063.081%2029.721%2062.665%2028.751%20C%2062.194%2027.647%2061.478%2026.852%2060.613%2026.34%20C%2059.724%2025.816%2058.651%2025.566%2057.494%2025.566%20C%2056.206%2025.566%2054.832%2025.873%2053.499%2026.442%20C%2052.713%2026.775%2051.803%2026.41%2051.469%2025.623%20C%2051.135%2024.836%2051.502%2023.928%2052.287%2023.593%20C%2054.008%2022.858%2055.799%2022.463%2057.494%2022.463%20C%2059.185%2022.463%2060.799%2022.852%2062.189%2023.674%20C%2063.603%2024.511%2064.765%2025.786%2065.514%2027.539%20C%2066.092%2028.891%2066.421%2030.52%2066.421%2032.44%20L%2066.421%2035.221%20L%2067.634%2035.221%20C%2072.847%2035.221%2077.586%2037.353%2081.021%2040.787%20C%2084.456%2044.222%2086.587%2048.962%2086.587%2054.175%20L%2086.587%2082.479%20C%2086.587%2087.692%2084.456%2092.431%2081.021%2095.866%20C%2077.586%2099.301%2072.847%20101.433%2067.634%20101.433%20L%2062.51%20101.433%20C%2057.297%20101.433%2052.557%2099.301%2049.123%2095.866%20C%2045.687%2092.431%2043.556%2087.692%2043.556%2082.479%20L%2043.556%2054.175%20C%2043.556%2048.962%2045.687%2044.222%2049.123%2040.787%20C%2052.557%2037.353%2057.297%2035.221%2062.51%2035.221%20L%2063.316%2035.221%20Z%20M%2084.012%2062.388%20L%2084.012%2054.175%20C%2084.012%2049.673%2082.167%2045.578%2079.2%2042.609%20C%2076.23%2039.64%2072.135%2037.797%2067.634%2037.797%20L%2066.623%2037.797%20L%2066.623%2045.661%20C%2067.746%2046.233%2068.52%2047.402%2068.52%2048.736%20L%2068.52%2054.251%20C%2068.52%2055.583%2067.744%2056.753%2066.623%2057.324%20L%2066.623%2062.388%20L%2084.012%2062.388%20Z%20M%2063.52%2062.388%20L%2063.52%2057.326%20C%2062.4%2056.755%2061.623%2055.589%2061.623%2054.251%20L%2061.623%2048.736%20C%2061.623%2047.398%2062.397%2046.23%2063.52%2045.661%20L%2063.52%2037.797%20L%2062.51%2037.797%20C%2058.007%2037.797%2053.913%2039.64%2050.944%2042.609%20C%2047.976%2045.578%2046.132%2049.673%2046.132%2054.175%20L%2046.132%2062.388%20L%2063.52%2062.388%20Z%22%20style%3D%22%22%2F%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M%2073.445%2073.854%20C%2075.398%2071.904%2078.56%2071.904%2080.514%2073.854%20L%2086.976%2080.312%20L%2093.42%2073.854%20C%2095.376%2071.905%2098.537%2071.905%20100.492%2073.854%20C%20102.441%2075.807%20102.441%2078.97%20100.492%2080.925%20L%2094.026%2087.371%20L%20100.484%2093.83%20C%20102.432%2095.785%20102.432%2098.947%20100.484%20100.901%20C%2098.53%20102.849%2095.368%20102.849%2093.414%20100.901%20L%2086.962%2094.435%20L%2080.514%20100.894%20C%2078.56%20102.842%2075.398%20102.842%2073.445%20100.894%20C%2071.496%2098.939%2071.496%2095.777%2073.445%2093.823%20L%2079.898%2087.371%20L%2073.445%2080.909%20C%2071.504%2078.958%2071.504%2075.806%2073.445%2073.854%20Z%22%20style%3D%22fill%3A%20rgb(255%2C%2065%2C%2065)%3B%20fill-rule%3A%20evenodd%3B%22%2F%3E%3C%2Fsvg%3E')`;
+      const noVisualOrMouseIconUrlString = `url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20viewBox%3D%2221.961%2019.533%2085.047%2085.047%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%2221.961%22%20y%3D%2219.533%22%20width%3D%2285.047%22%20height%3D%2285.047%22%20style%3D%22stroke%3A%20rgb(0%2C%200%2C%200)%3B%20fill%3A%20rgb(255%2C%20255%2C%20255)%3B%22%20transform%3D%22matrix(0.9999999999999999%2C%200%2C%200%2C%200.9999999999999999%2C%20-3.552713678800501e-15%2C%20-3.552713678800501e-15)%22%2F%3E%3Cpath%20d%3D%22M%2094.331%208.579%20C%20104.861%2015.669%20113.931%2025.949%20120.811%2038.439%20L%20121.481%2039.659%20L%20120.811%2040.869%20C%20113.931%2053.359%20104.851%2063.639%2094.331%2070.729%20C%2084.061%2077.649%2072.401%2081.549%2060.041%2081.549%20C%2047.681%2081.549%2036.021%2077.649%2025.761%2070.739%20C%2015.221%2063.639%206.151%2053.359%20-0.729%2040.869%20L%20-1.399%2039.659%20L%20-0.729%2038.439%20C%206.151%2025.949%2015.221%2015.669%2025.751%208.579%20C%2036.021%201.669%2047.681%20-2.231%2060.041%20-2.231%20C%2072.401%20-2.231%2084.051%201.669%2094.331%208.579%20Z%20M%2059.391%2019.939%20L%2063.471%2020.329%20C%2062.021%2022.509%2061.161%2025.149%2061.161%2027.999%20C%2061.161%2035.479%2067.021%2041.539%2074.261%2041.539%20C%2076.581%2041.539%2078.761%2040.919%2080.651%2039.819%20C%2080.681%2040.289%2080.701%2040.759%2080.701%2041.239%20C%2080.701%2053.009%2071.161%2062.549%2059.391%2062.549%20C%2047.621%2062.549%2038.081%2053.009%2038.081%2041.239%20C%2038.081%2029.479%2047.621%2019.939%2059.391%2019.939%20Z%20M%20107.601%2039.659%20C%20102.101%2029.999%2094.991%2022.059%2086.811%2016.549%20C%2078.761%2011.129%2069.661%208.069%2060.041%208.069%20C%2050.431%208.069%2041.331%2011.129%2033.281%2016.549%20C%2025.101%2022.059%2017.991%2029.999%2012.481%2039.659%20C%2017.981%2049.319%2025.101%2057.259%2033.281%2062.759%20C%2041.331%2068.179%2050.431%2071.239%2060.041%2071.239%20C%2069.661%2071.239%2078.751%2068.179%2086.811%2062.759%20C%2094.991%2057.259%20102.101%2049.319%20107.601%2039.659%20Z%22%20transform%3D%22matrix(0.6309969425201416%2C%200%2C%200%2C%200.6144940257072449%2C%2027.004735946655266%2C%2037.575355529785156)%22%2F%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M%2073.598%2059.038%20C%2076.693%2055.865%2081.704%2055.865%2084.801%2059.038%20L%2095.042%2069.548%20L%20105.255%2059.038%20C%20108.354%2055.867%20113.364%2055.867%20116.462%2059.038%20C%20119.551%2062.216%20119.551%2067.364%20116.462%2070.545%20L%20106.215%2081.035%20L%20116.45%2091.546%20C%20119.537%2094.728%20119.537%2099.873%20116.45%20103.053%20C%20113.353%20106.223%20108.342%20106.223%20105.245%20103.053%20L%2095.02%2092.531%20L%2084.801%20103.042%20C%2081.704%20106.212%2076.693%20106.212%2073.598%20103.042%20C%2070.509%2099.86%2070.509%2094.715%2073.598%2091.535%20L%2083.825%2081.035%20L%2073.598%2070.519%20C%2070.522%2067.344%2070.522%2062.215%2073.598%2059.038%20Z%22%20style%3D%22fill%3A%20rgb(255%2C%2065%2C%2065)%3B%20fill-rule%3A%20evenodd%3B%22%20transform%3D%22matrix(0.6309969425201416%2C%200%2C%200%2C%200.6144940257072449%2C%2027.004735946655266%2C%2037.575355529785156)%22%2F%3E%3C%2Fsvg%3E')`;
+
+      // create a div that covers the whole screen and blocks clicking
+      const clickBlockingDiv = document.createElement('div');
+      clickBlockingDiv.style = `
+          height: 100%;
+          left: 0;
+          position: fixed;
+          top: 0;
+          width: 100%;
+          z-index: 9999;
+      `;
+      clickBlockingDiv.setAttribute('aria-hidden', 'true');
+      clickBlockingDiv.style.cursor = 'not-allowed';
+
+      clickBlockingDiv.addEventListener('click', e => {
+          e.stopPropagation();
+          window.alert(`
+Sorry, but no clicking allowed. 😔
+
+Try using your keyboard shortcuts instead:
+Tab = forwards
+Shift + Tab = backwards
+Enter = open links and activate buttons
+          `);
+      });
+
+      // Create an accessibility icon that says no mouse clicking is allowed when clicked
+      const accessibilityIcon = document.createElement('div');
+      accessibilityIcon.style = `
+          background-size: cover;
+          background: ${noMouseIconUrlString};
+          height: 40px;
+          left: 0;
+          position: fixed;
+          top: 0;
+          width: 40px;
+          z-index: 10000;
+      `;
+      accessibilityIcon.setAttribute('aria-hidden', 'true');
+      // accessibilityIcon.setAttribute('tabindex', '-1');
+      accessibilityIcon.setAttribute('data-accessibility', 'keyboard');
+
+      // track number of clicks for the easter egg 🥚
+      accessibilityIcon.setAttribute('data-clicks', 0);
+
+      accessibilityIcon.addEventListener('click', e => {
+          const accessibilityIconAttributes = e.target.dataset;
+          const iconStyle = e.target.style;
+          const clicksAsNum = Number(e.target.dataset.clicks);
+
+          // add one to the number of clicks
+          e.target.dataset.clicks = clicksAsNum + 1;
+
+          // show screen reader easter egg after 3 clicks 🥚
+          if (accessibilityIconAttributes.accessibility === 'keyboard' && clicksAsNum + 1 >= 3) {
+              e.target.dataset.accessibility = 'screen-reader';
+              clickBlockingDiv.style.backgroundColor = '#101820';
+              e.target.style.background = noVisualOrMouseIconUrlString;
+              window.alert(`
+🥚 You unlocked a secret easter egg! 🥚
+
+Once you see this message, post just an egg emoji 🥚 in the Teams chat for this meeting! 🥚
+
+Bonus challenge: can you navigate to the Consumer Complaint Database without being able to see the screen? 🤔
+
+Hint: you may need the help of your screen reader. 
+
+P.S. You can also go back to the normal mode by clicking the icon again if you need to.
+          `);
+          } else if (accessibilityIconAttributes.accessibility === 'screen-reader') {
+              e.target.dataset.accessibility = 'keyboard';
+              e.target.style.background = noMouseIconUrlString;
+              clickBlockingDiv.style.backgroundColor = '';
+              e.target.dataset.clicks = 0;
+          }
+      });
+
+      // append accessibility button and blocking div to body
+      document.body.appendChild(accessibilityIcon);
+      document.body.appendChild(clickBlockingDiv);
+  </script>
+
+  {# The following script block is consumerfinance.gov specific #}
+  <script>
+    // remove the search functionality because it doesn't work great on dev
+    const globalSearchButton = document.querySelector('.m-global-search__trigger');
+    globalSearchButton.style.display = 'none';
+  </script>
+
     {% endblock javascript %}
 </body>
 </html>