From 6c9505e1bf6c825a6e1e212773d908d0b6592fd9 Mon Sep 17 00:00:00 2001 From: Bill Himmelsbach Date: Tue, 17 Sep 2024 07:14:13 -0700 Subject: [PATCH 01/11] spike(a11y): disable all clicking --- cfgov/unprocessed/css/main.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/cfgov/unprocessed/css/main.scss b/cfgov/unprocessed/css/main.scss index dbc34118f82..833fd748088 100644 --- a/cfgov/unprocessed/css/main.scss +++ b/cfgov/unprocessed/css/main.scss @@ -100,6 +100,12 @@ body { -webkit-font-smoothing: antialiased; } +// Accessibility Demo (no clicking allowed) +// don't allow mouse clicking +* { + pointer-events: none; +} + // Make Arial the first-line font in Vietnamese pages' main content area. // This is used because Avenir Next does not contain all Vietnamese diacritics. // See https://[GHE]/Design-Development/Design-and-Content-Team/issues/175 From 3819d4880e617d4aeb2b8dae818bd78d14c9e35c Mon Sep 17 00:00:00 2001 From: Bill Himmelsbach Date: Tue, 17 Sep 2024 21:45:50 -0700 Subject: [PATCH 02/11] spike(a11y): move to JS only implementation --- cfgov/unprocessed/css/main.scss | 6 -- .../jinja2/v1/includes/organisms/header.html | 94 +++++++++++++++++++ 2 files changed, 94 insertions(+), 6 deletions(-) diff --git a/cfgov/unprocessed/css/main.scss b/cfgov/unprocessed/css/main.scss index 833fd748088..dbc34118f82 100644 --- a/cfgov/unprocessed/css/main.scss +++ b/cfgov/unprocessed/css/main.scss @@ -100,12 +100,6 @@ body { -webkit-font-smoothing: antialiased; } -// Accessibility Demo (no clicking allowed) -// don't allow mouse clicking -* { - pointer-events: none; -} - // Make Arial the first-line font in Vietnamese pages' main content area. // This is used because Avenir Next does not contain all Vietnamese diacritics. // See https://[GHE]/Design-Development/Design-and-Content-Team/issues/175 diff --git a/cfgov/v1/jinja2/v1/includes/organisms/header.html b/cfgov/v1/jinja2/v1/includes/organisms/header.html index 3f722cf1c7b..3766beafbcb 100644 --- a/cfgov/v1/jinja2/v1/includes/organisms/header.html +++ b/cfgov/v1/jinja2/v1/includes/organisms/header.html @@ -21,6 +21,100 @@ {% set mega_menu_content = show_mega_menu and get_mega_menu_content() %}
+ {% if flag_enabled('BETA_NOTICE') %} {% import 'v1/includes/molecules/notification.html' as notification with context %} From 9e9f8a46971d20521170c224eef5d684719cfc66 Mon Sep 17 00:00:00 2001 From: Bill Himmelsbach Date: Tue, 17 Sep 2024 21:51:07 -0700 Subject: [PATCH 03/11] spike(a11y): JS cleanup --- .../jinja2/v1/includes/organisms/header.html | 32 ++++++------------- 1 file changed, 9 insertions(+), 23 deletions(-) diff --git a/cfgov/v1/jinja2/v1/includes/organisms/header.html b/cfgov/v1/jinja2/v1/includes/organisms/header.html index 3766beafbcb..949743f503f 100644 --- a/cfgov/v1/jinja2/v1/includes/organisms/header.html +++ b/cfgov/v1/jinja2/v1/includes/organisms/header.html @@ -51,8 +51,8 @@ }); // Create an accessibility icon that says no mouse clicking is allowed when clicked - const accessibilityMenu = document.createElement('button'); - accessibilityMenu.style = ` + const accessibilityButton = document.createElement('button'); + accessibilityButton.style = ` background-size: cover; background: ${noMouseIconUrlString}; height: 40px; @@ -62,14 +62,14 @@ width: 40px; z-index: 10000; `; - accessibilityMenu.setAttribute('aria-hidden', 'true'); - accessibilityMenu.setAttribute('tabindex', '-1'); - accessibilityMenu.setAttribute('data-accessibility', 'keyboard'); + accessibilityButton.setAttribute('aria-hidden', 'true'); + accessibilityButton.setAttribute('tabindex', '-1'); + accessibilityButton.setAttribute('data-accessibility', 'keyboard'); // track number of clicks for the easter egg 🥚 - accessibilityMenu.setAttribute('data-clicks', 0); + accessibilityButton.setAttribute('data-clicks', 0); - accessibilityMenu.addEventListener('click', e => { + accessibilityButton.addEventListener('click', e => { const accessibilityButtonAttributes = e.target.dataset; const buttonStyle = e.target.style; const clicksAsNum = Number(e.target.dataset.clicks); @@ -97,23 +97,9 @@ } }); - document.body.appendChild(accessibilityMenu); - - + // append accessibility button and blocking div to body + document.body.appendChild(accessibilityButton); document.body.appendChild(clickBlockingDiv); - - - // // create a div that covers the whole screen and blocks clicking and can't see through - // const clickBlockingDivNoVisual = document.createElement('div'); - // clickBlockingDivNoVisual.style = ` - // position: fixed; - // top: 0; - // left: 0; - // width: 100%; - // height: 100%; - // z-index: 9999; - // background-color: black; - // `; {% if flag_enabled('BETA_NOTICE') %} From d8a10485d9f60e0c8c47a02c30207f431365e1d4 Mon Sep 17 00:00:00 2001 From: Bill Himmelsbach Date: Tue, 17 Sep 2024 22:18:49 -0700 Subject: [PATCH 04/11] spike(a11y): lift js up into base.html --- .../jinja2/v1/includes/organisms/header.html | 80 ------------------ cfgov/v1/jinja2/v1/layouts/base.html | 81 +++++++++++++++++++ 2 files changed, 81 insertions(+), 80 deletions(-) diff --git a/cfgov/v1/jinja2/v1/includes/organisms/header.html b/cfgov/v1/jinja2/v1/includes/organisms/header.html index 949743f503f..3f722cf1c7b 100644 --- a/cfgov/v1/jinja2/v1/includes/organisms/header.html +++ b/cfgov/v1/jinja2/v1/includes/organisms/header.html @@ -21,86 +21,6 @@ {% set mega_menu_content = show_mega_menu and get_mega_menu_content() %}
- {% if flag_enabled('BETA_NOTICE') %} {% import 'v1/includes/molecules/notification.html' as notification with context %} diff --git a/cfgov/v1/jinja2/v1/layouts/base.html b/cfgov/v1/jinja2/v1/layouts/base.html index 981470ca081..45ffeb87a6b 100644 --- a/cfgov/v1/jinja2/v1/layouts/base.html +++ b/cfgov/v1/jinja2/v1/layouts/base.html @@ -372,6 +372,87 @@
{% endif %} + + {% endblock javascript %} From 5ef4b12d8fd9459bf0c10283a40b480d6db72b3e Mon Sep 17 00:00:00 2001 From: Bill Himmelsbach Date: Tue, 17 Sep 2024 22:47:46 -0700 Subject: [PATCH 05/11] spike(a11y): remove search, cleanup naming and comments --- cfgov/v1/jinja2/v1/layouts/base.html | 33 ++++++++++++++++++---------- 1 file changed, 21 insertions(+), 12 deletions(-) diff --git a/cfgov/v1/jinja2/v1/layouts/base.html b/cfgov/v1/jinja2/v1/layouts/base.html index 45ffeb87a6b..2469bfacba4 100644 --- a/cfgov/v1/jinja2/v1/layouts/base.html +++ b/cfgov/v1/jinja2/v1/layouts/base.html @@ -372,6 +372,8 @@
{% endif %} + + {# The following script block can be added to other sites to test accessibility #} + {# The following script block is consumerfinance.gov specific #} + + {% endblock javascript %} From a3f63825f1196bc10d5647af210b92f5bd4d58be Mon Sep 17 00:00:00 2001 From: Bill Himmelsbach Date: Tue, 17 Sep 2024 23:30:10 -0700 Subject: [PATCH 06/11] spike(a11y): re-enable search --- cfgov/v1/jinja2/v1/layouts/base.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/cfgov/v1/jinja2/v1/layouts/base.html b/cfgov/v1/jinja2/v1/layouts/base.html index 2469bfacba4..e85ac15e443 100644 --- a/cfgov/v1/jinja2/v1/layouts/base.html +++ b/cfgov/v1/jinja2/v1/layouts/base.html @@ -456,11 +456,11 @@ {# The following script block is consumerfinance.gov specific #} - --> {% endblock javascript %} From 84a0fd55e69cf875667d2b6c8605ca30ea5b5788 Mon Sep 17 00:00:00 2001 From: Bill Himmelsbach Date: Wed, 18 Sep 2024 00:04:17 -0700 Subject: [PATCH 07/11] spike(a11y): disable search --- cfgov/v1/jinja2/v1/layouts/base.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/cfgov/v1/jinja2/v1/layouts/base.html b/cfgov/v1/jinja2/v1/layouts/base.html index e85ac15e443..2469bfacba4 100644 --- a/cfgov/v1/jinja2/v1/layouts/base.html +++ b/cfgov/v1/jinja2/v1/layouts/base.html @@ -456,11 +456,11 @@ {# The following script block is consumerfinance.gov specific #} - + {% endblock javascript %} From b68d4055193b0c816951208ac3884a39863a3744 Mon Sep 17 00:00:00 2001 From: Bill Himmelsbach Date: Wed, 18 Sep 2024 01:04:05 -0700 Subject: [PATCH 08/11] spike(a11y): hide search, add easter egg --- .../jinja2/housing_counselor/index.html | 9 +++------ cfgov/v1/jinja2/v1/layouts/base.html | 4 ++-- 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/cfgov/housing_counselor/jinja2/housing_counselor/index.html b/cfgov/housing_counselor/jinja2/housing_counselor/index.html index 54ff3376b6d..0ce48372602 100644 --- a/cfgov/housing_counselor/jinja2/housing_counselor/index.html +++ b/cfgov/housing_counselor/jinja2/housing_counselor/index.html @@ -184,12 +184,9 @@

Find a housing counselor

-

- Displaying the - {{ api_json.counseling_agencies | length }} - locations closest to ZIP code - {{ zipcode | escape }} -

+

+ 👉 Click the "No mouse icon" in the upper left 3 times 😉 +

// remove the search functionality because it doesn't work great on dev const globalSearchButton = document.querySelector('.m-global-search__trigger'); globalSearchButton.style.display = 'none';