[CIVIC-1244] Updated flyout focus to accept a focus target selector.

civictheme · Dec 7, 2023 · 1d8a7dc · 1d8a7dc
1 parent a4ef502
commit 1d8a7dc
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 5 deletions.
diff --git a/web/themes/contrib/civictheme/civictheme_library/components/00-base/flyout/flyout.js b/web/themes/contrib/civictheme/civictheme_library/components/00-base/flyout/flyout.js
@@ -39,7 +39,7 @@ function CivicThemeFlyout(el) {
   this.panel = this.el.querySelector('[data-flyout-panel]');
   this.el.expanded = this.el.hasAttribute('data-flyout-expanded');
   this.duration = this.el.hasAttribute('data-flyout-duration') ? parseInt(this.el.getAttribute('data-flyout-duration'), 10) : 500;
-  this.focus = this.el.hasAttribute('data-flyout-focus');
+  this.focus = this.el.hasAttribute('data-flyout-focus') ? this.el.getAttribute('data-flyout-focus').split(',') : false;
 
   // Add event listener to element.
   if (this.openTrigger) {
@@ -149,7 +149,7 @@ CivicThemeFlyout.prototype.expand = function () {
   if (this.focus) {
     // Focus on the first available target or close button.
     const focusPoints = [
-      '[data-flyout-focus-in-target]',
+      ...this.focus,
       '[data-flyout-close-trigger]',
       '[data-flyout-close-all-trigger]',
     ];

diff --git a/.../civictheme_library/components/03-organisms/mobile-navigation/mobile-navigation-menu.twig b/.../civictheme_library/components/03-organisms/mobile-navigation/mobile-navigation-menu.twig
@@ -67,7 +67,7 @@ Copied as-is from '@base/menu/menu.twig'.
           title: item.title,
           url: item.url,
           modifier_class: 'ct-menu__item__link',
-          attributes: item.link_attributes|default('') ~ ' data-flyout-focus-in-target',
+          attributes: item.link_attributes|default(''),
           is_new_window: item.is_new_window is defined ? item.is_new_window : false,
           is_external: item.is_external is defined ? item.is_external : false,
         } only %}
@@ -106,7 +106,7 @@ Overrides for generation of child links.
     attributes: 'data-flyout-open-trigger aria-expanded="false" aria-label="Open %s submenu"'|format(parent_item.title),
   } only %}
 
-  <div data-flyout data-flyout-direction="right" data-flyout-focus>
+  <div data-flyout data-flyout-direction="right" data-flyout-focus=".ct-link">
     <div data-flyout-panel>
       {% include '@organisms/mobile-navigation/mobile-navigation-close.twig' %}
 

diff --git a/...theme/civictheme_library/components/03-organisms/mobile-navigation/mobile-navigation.twig b/...theme/civictheme_library/components/03-organisms/mobile-navigation/mobile-navigation.twig
@@ -16,7 +16,7 @@
 {% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
 {% set modifier_class = '%s %s'|format(theme_class, modifier_class|default('')) %}
 
-<div class="ct-mobile-navigation {{ modifier_class }}" data-flyout data-flyout-direction="right" data-flyout-focus>
+<div class="ct-mobile-navigation {{ modifier_class }}" data-flyout data-flyout-direction="right" data-flyout-focus=".ct-link">
   <div data-flyout-panel class="ct-mobile-navigation__panel">
     {% include '@organisms/mobile-navigation/mobile-navigation-close.twig' %}