Fix and Improve period selection via keyboard navigation

Author: tzi

plugins/CoreHome/vue/dist/CoreHome.umd.js

@@ -12,29 +12,61 @@ import DirectiveUtilities from '../directiveUtilities';
 interface ExpandOnClickArgs {
   // input (specified by user)
   expander: string | HTMLElement,
-  onClosed?: () => void;
+  onClosed?: (event: MouseEvent|KeyboardEvent) => void;
+  onExpand?: (event: MouseEvent|KeyboardEvent) => void;
 
   // state
   isMouseDown?: boolean;
   hasScrolled?: boolean;
 
-  // event handlers
-  onExpand?: () => void;
+  // internal event handlers
+  onClickOnExpander?: (event: MouseEvent|KeyboardEvent) => void;
   onClickOutsideElement?: (event: MouseEvent) => void;
   onScroll?: () => void;
   onMouseDown?: () => void;
   onEscapeHandler?: (event: KeyboardEvent) => void;
 }
 
-function onExpand(element: HTMLElement) {
-  element.classList.toggle('expanded');
+function expand(
+  element: HTMLElement,
+  binding: DirectiveBinding<ExpandOnClickArgs>,
+  event: MouseEvent|KeyboardEvent,
+) {
+  element.classList.add('expanded');
+  if (binding.value?.onExpand) {
+    binding.value.onExpand(event);
+  }
 
   const positionElement = element.querySelector('.dropdown.positionInViewport');
   if (positionElement) {
     Matomo.helper.setMarginLeftToBeInViewport(positionElement);
   }
 }
 
+function close(
+  element: HTMLElement,
+  binding: DirectiveBinding<ExpandOnClickArgs>,
+  event: MouseEvent|KeyboardEvent,
+) {
+  element.classList.remove('expanded');
+
+  if (binding.value?.onClosed) {
+    binding.value.onClosed(event);
+  }
+}
+
+function onClickOnExpander(
+  element: HTMLElement,
+  binding: DirectiveBinding<ExpandOnClickArgs>,
+  event: MouseEvent|KeyboardEvent,
+) {
+  if (element.classList.contains('expanded')) {
+    close(element, binding, event);
+  } else {
+    expand(element, binding, event);
+  }
+}
+
 function onClickOutsideElement(
   element: HTMLElement,
   binding: DirectiveBinding<ExpandOnClickArgs>,
@@ -49,11 +81,7 @@ function onClickOutsideElement(
   }
 
   if (!element.contains(event.target as HTMLElement)) {
-    element.classList.remove('expanded');
-
-    if (binding.value?.onClosed) {
-      binding.value.onClosed();
-    }
+    close(element, binding, event);
   }
 }
 
@@ -71,15 +99,14 @@ function onEscapeHandler(
   binding: DirectiveBinding<ExpandOnClickArgs>,
   event: KeyboardEvent,
 ) {
-  if (event.which === 27) {
+  if (event.key === 'Escape') {
     binding.value.isMouseDown = false;
     binding.value.hasScrolled = false;
-    element.classList.remove('expanded');
+    close(element, binding, event);
   }
 }
 
 const doc = document.documentElement;
-const { $ } = window;
 
 /**
  * Usage (in a component):
@@ -93,7 +120,7 @@ export default {
   mounted(el: HTMLElement, binding: DirectiveBinding<ExpandOnClickArgs>): void {
     binding.value.isMouseDown = false;
     binding.value.hasScrolled = false;
-    binding.value.onExpand = onExpand.bind(null, el);
+    binding.value.onClickOnExpander = onClickOnExpander.bind(null, el, binding);
     binding.value.onEscapeHandler = onEscapeHandler.bind(null, el, binding);
     binding.value.onMouseDown = onMouseDown.bind(null, binding);
     binding.value.onClickOutsideElement = onClickOutsideElement.bind(null, el, binding);
@@ -102,7 +129,7 @@ export default {
     setTimeout(() => {
       const expander = DirectiveUtilities.getRef(binding.value.expander, binding);
       if (expander) {
-        $(expander).on('click', binding.value.onExpand!);
+        expander.addEventListener('click', binding.value.onClickOnExpander!);
       }
     });
     doc.addEventListener('keyup', binding.value.onEscapeHandler);
@@ -113,7 +140,7 @@ export default {
   unmounted(el: HTMLElement, binding: DirectiveBinding<ExpandOnClickArgs>): void {
     const expander = DirectiveUtilities.getRef(binding.value.expander, binding);
     if (expander) {
-      $(expander).off('click', binding.value.onExpand!);
+      doc.removeEventListener('click', binding.value.onClickOnExpander!);
     }
     doc.removeEventListener('keyup', binding.value.onEscapeHandler!);
     doc.removeEventListener('mousedown', binding.value.onMouseDown!);

plugins/CoreHome/vue/dist/CoreHome.umd.min.js

@@ -105,7 +105,7 @@
 }
 
 .periodSelector-withPrevNext {
-  a.title {
+  button.title {
     width: calc(~'100% - 40px');
     text-align: center;
 

plugins/CoreHome/vue/src/ExpandOnClick/ExpandOnClick.ts

@@ -10,7 +10,11 @@
     ref="root"
     class="periodSelector piwikSelector"
     :class="{'periodSelector-withPrevNext': canShowMovePeriod}"
-    v-expand-on-click="{ expander: 'title' }"
+    v-expand-on-click="{
+      expander: 'title',
+      onExpand: onExpand,
+      onClosed: onClosed,
+    }"
   >
     <button
       v-if="canShowMovePeriod"
@@ -21,17 +25,17 @@
       <span class="icon-chevron-left"></span>
     </button>
 
-    <a
+    <button
       ref="title"
       id="date"
       class="title"
-      tabindex="-1"
+      tabindex="4"
       v-tooltips
       :title="translate('General_ChooseDate', currentlyViewingText)"
     >
       <span class="icon icon-calendar" />
       {{ currentlyViewingText }}
-    </a>
+    </button>
 
     <div
       id="periodMore"
@@ -436,6 +440,18 @@ export default defineComponent({
     },
   },
   methods: {
+    onExpand(event: MouseEvent|KeyboardEvent) {
+      const isKeyboardEvent = event.detail === 0;
+      if (isKeyboardEvent) {
+        window.$(this.$refs.root as HTMLElement).find('.ui-datepicker-month').focus();
+      }
+    },
+    onClosed(event: MouseEvent|KeyboardEvent) {
+      const isKeyboardEvent = event.detail === 0;
+      if (isKeyboardEvent) {
+        window.$(this.$refs.title as HTMLElement).focus();
+      }
+    },
     handleZIndexPositionRelativeCompareDropdownIssue() {
       const $element = window.$(this.$refs.root as HTMLElement);
       $element.on('focus', '#comparePeriodToDropdown .select-dropdown', () => {

plugins/CoreHome/vue/src/PeriodSelector/PeriodSelector.less

@@ -132,7 +132,9 @@ a {
 }
 
 a:focus-visible,
-button:focus-visible {
+button:focus-visible,
+input[type="button"]:focus-visible,
+select:focus-visible {
   outline: 2px solid @theme-color-focus-ring;
   outline-offset: -2px;
 }

plugins/CoreHome/vue/src/PeriodSelector/PeriodSelector.vue

@@ -24,6 +24,11 @@ input[type="submit"].btn,
     text-decoration: none;
   }
 
+  &:focus-visible {
+    outline: 2px solid @theme-color-focus-ring;
+    outline-offset: -2px;
+  }
+
   em {
     font-style: normal;
   }