Website tabs - Set focus on tab change (#2561)

Author: dchyun

website/app/components/doc/page/tabs.hbs

@@ -14,7 +14,7 @@
           role="tab"
           aria-controls={{tab.target}}
           aria-selected={{if tab.isCurrent "true" "false"}}
-          {{on "click" (fn tab.onClickTab tab)}}
+          {{on "click" (fn this.onClickTab tab)}}
         >{{capitalize tab.label}}</button>
       </li>
     {{/each}}

website/app/components/doc/page/tabs.js

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+export default class DocPageTabsComponent extends Component {
+  @action
+  onClickTab(tab) {
+    // Invoke the callback function if it's provided as argument
+    if (typeof tab.onClickTab === 'function') {
+      tab.onClickTab(tab);
+    }
+
+    // Set focus on tab clicked
+    let tabElement = document.getElementById(tab.id);
+    tabElement.focus();
+  }
+}

website/app/controllers/application.js

@@ -100,10 +100,13 @@ export default class ApplicationController extends Controller {
     // Disable transition validation if we're transitioning to the same page
     // and the page is has a filter functionality based on `queryParams`
     // namely the Icon library or the Tokens page
+    // or if the transition is between tabs on the same page
+    let hasTabs = document.querySelector('.doc-page-tabs') != null;
     if (
       transition.from.params.path === transition.to.params.path &&
       (transition.from.params.path === 'icons/library' ||
-        transition.from.params.path === 'foundations/tokens')
+        transition.from.params.path === 'foundations/tokens' ||
+        hasTabs)
     ) {
       return false;
     } else {

website/app/controllers/show.js

@@ -246,7 +246,6 @@ export default class ShowController extends Controller {
     }
 
     // TABS
-    // ?? CAN WE EXPLICITLY SET FOCUS ON THE TAB WHEN IT IS SET TO CURRENT?
     this.tabs.forEach((tab) => {
       set(tab, 'isCurrent', tab.index === current);
     });