@ptcwebops/ptcw-design 5.9.0 → 5.9.2

package/dist/collection/components/ptc-case-studies-slider/ptc-case-studies-slider.js

@@ -5,57 +5,194 @@ export class PtcCaseStudiesSlider {
     // SLider List
     this.caseStudiesThumbs = null;
     this.caseStudiesSlides = null;
+    this.tabs = [];
+    this.tabPanels = [];
+    this.activeTabIndex = 0;
+    this.firstTab = null;
+    this.lastTab = null;
   }
   componentDidLoad() {
-    this.initSlider();
-    this.slideChangeHandler();
     this.renderSlides('swiper-slide-thumb', 'swiper-wrapper-thumbs');
     this.renderSlides('swiper-slide-content', 'swiper-wrapper-content');
+    this.initializeTabs();
+    this.initSlider();
+    this.slideChangeHandler();
     //Added for preloader skeleton issue
     setTimeout(() => { this.initSlider(); }, 3100);
   }
-  initSlider() {
-    this.caseStudiesThumbs = new Swiper(this.caeStudiesThumbRef, {
-      modules: [Navigation, Pagination, FreeMode, Grid],
-      loop: false,
-      slidesPerView: 'auto',
-      freeMode: true,
-      watchSlidesProgress: true,
-      centerInsufficientSlides: true,
-      breakpoints: {
-        992: {
-          slidesPerView: 7,
-        },
+  // Initialize Tabs
+  initializeTabs() {
+    var _a, _b;
+    const tablist = (_a = this.caeStudiesThumbRef) === null || _a === void 0 ? void 0 : _a.querySelector('.swiper-wrapper-thumbs');
+    if (!tablist)
+      return;
+    // Updated selector to match existing class names
+    this.tabs = Array.from(tablist.querySelectorAll('.swiper-slide-thumb'));
+    this.tabPanels = Array.from(((_b = this.caseStudiesSlidesRef) === null || _b === void 0 ? void 0 : _b.querySelectorAll('.swiper-slide-content')) || []);
+    this.tabs.forEach((tab, index) => {
+      tab.setAttribute('role', 'tab');
+      tab.setAttribute('aria-selected', 'false');
+      tab.setAttribute('aria-controls', `tabpanel-${index}`);
+      tab.setAttribute('tabindex', '-1');
+      tab.id = `tab-${index}`;
+      // Set first and last tab
+      if (index === 0) {
+        this.firstTab = tab;
       }
+      this.lastTab = tab;
     });
-    this.caseStudiesSlides = new Swiper(this.caseStudiesSlidesRef, {
-      modules: [Navigation, Pagination, Thumbs, Autoplay, EffectFade],
-      loop: false,
-      grabCursor: true,
-      effect: 'fade',
-      autoplay: {
-        delay: 10000,
-        disableOnInteraction: false,
-        waitForTransition: true,
-      },
-      thumbs: {
-        swiper: this.caseStudiesThumbs,
-      },
-      pagination: {
-        el: this.paginationRef,
-        clickable: true,
-      },
+    const tablistContainer = this.caeStudiesThumbRef;
+    if (tablistContainer) {
+      tablistContainer.setAttribute('role', 'tablist');
+      tablistContainer.setAttribute('aria-label', 'Case Studies Tabs');
+    }
+    // Select the first tab by default
+    if (this.tabs.length > 0) {
+      this.setSelectedTab(0);
+    }
+  }
+  // Set the selected tab by index
+  setSelectedTab(index) {
+    this.tabs.forEach((tab, i) => {
+      var _a;
+      if (i === index) {
+        tab.setAttribute('aria-selected', 'true');
+        tab.setAttribute('tabindex', '0');
+        this.tabPanels[i].classList.remove('is-hidden');
+        (_a = this.caseStudiesSlides) === null || _a === void 0 ? void 0 : _a.slideTo(i);
+        this.activeTabIndex = i;
+      }
+      else {
+        tab.setAttribute('aria-selected', 'false');
+        tab.setAttribute('tabindex', '-1');
+        this.tabPanels[i].classList.add('is-hidden');
+      }
     });
   }
+  // Handle keyboard navigation
+  handleKeyDown(event) {
+    const tgt = event.currentTarget;
+    let flag = false;
+    switch (event.key) {
+      case 'ArrowRight':
+        this.moveFocusToNextTab(tgt);
+        flag = true;
+        break;
+      case 'ArrowLeft':
+        this.moveFocusToPreviousTab(tgt);
+        flag = true;
+        break;
+      case 'Enter':
+      case ' ':
+        const index = this.tabs.indexOf(tgt);
+        if (index !== -1) {
+          this.setSelectedTab(index);
+          flag = true;
+        }
+        break;
+      default:
+        break;
+    }
+    if (flag) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  }
+  // Move focus to a specific tab
+  moveFocusToTab(currentTab) {
+    currentTab.focus();
+  }
+  // Move focus to the previous tab
+  moveFocusToPreviousTab(currentTab) {
+    if (currentTab === this.firstTab) {
+      if (this.lastTab) {
+        this.moveFocusToTab(this.lastTab);
+      }
+    }
+    else {
+      const index = this.tabs.indexOf(currentTab);
+      if (index > 0) {
+        this.moveFocusToTab(this.tabs[index - 1]);
+      }
+    }
+  }
+  // Move focus to the next tab
+  moveFocusToNextTab(currentTab) {
+    if (currentTab === this.lastTab) {
+      if (this.firstTab) {
+        this.moveFocusToTab(this.firstTab);
+      }
+    }
+    else {
+      const index = this.tabs.indexOf(currentTab);
+      if (index < this.tabs.length - 1) {
+        this.moveFocusToTab(this.tabs[index + 1]);
+      }
+    }
+  }
+  // Handle tab click
+  onClick(index) {
+    this.setSelectedTab(index);
+    this.tabs[index].focus();
+  }
+  initSlider() {
+    if (this.caeStudiesThumbRef && !this.caseStudiesThumbs) {
+      this.caseStudiesThumbs = new Swiper(this.caeStudiesThumbRef, {
+        modules: [Navigation, Pagination, FreeMode, Grid],
+        loop: false,
+        slidesPerView: 'auto',
+        freeMode: true,
+        watchSlidesProgress: true,
+        centerInsufficientSlides: true,
+        breakpoints: {
+          992: {
+            slidesPerView: 7,
+          },
+        },
+      });
+    }
+    if (this.caseStudiesSlidesRef && !this.caseStudiesSlides) {
+      this.caseStudiesSlides = new Swiper(this.caseStudiesSlidesRef, {
+        modules: [Navigation, Pagination, Thumbs, Autoplay, EffectFade],
+        loop: false,
+        grabCursor: true,
+        effect: 'fade',
+        autoplay: {
+          delay: 10000,
+          disableOnInteraction: false,
+          waitForTransition: true,
+        },
+        thumbs: {
+          swiper: this.caseStudiesThumbs,
+        },
+        pagination: {
+          el: this.paginationRef,
+          clickable: true,
+        },
+        keyboard: {
+          enabled: false,
+        },
+      });
+    }
+  }
   slideChangeHandler() {
-    this.caseStudiesSlides.on('slideChange', () => {
-      const visibleSlide = this.caseStudiesSlides.slides[this.caseStudiesSlides.activeIndex];
-      const tagName = visibleSlide.querySelector('ptc-text-copy-with-background').shadowRoot;
-      const content = tagName.querySelector('.card-wrap');
-      const parent = tagName.querySelector('.card-wrap').parentNode;
-      parent.removeChild(content);
-      parent.appendChild(content);
-    });
+    if (this.caseStudiesSlides) {
+      this.caseStudiesSlides.on('slideChange', () => {
+        var _a;
+        const activeIndex = this.caseStudiesSlides.activeIndex;
+        this.setSelectedTab(activeIndex);
+        const visibleSlide = this.caseStudiesSlides.slides[activeIndex];
+        const tagName = (_a = visibleSlide.querySelector('ptc-text-copy-with-background')) === null || _a === void 0 ? void 0 : _a.shadowRoot;
+        if (tagName) {
+          const content = tagName.querySelector('.card-wrap');
+          const parent = content === null || content === void 0 ? void 0 : content.parentNode;
+          if (parent && content) {
+            parent.removeChild(content);
+            parent.appendChild(content);
+          }
+        }
+      });
+    }
   }
   renderSlides(slideName, wrapperName) {
     const slidesList = Array.from(this.hostElement.querySelectorAll('.' + slideName));
@@ -65,17 +202,20 @@ export class PtcCaseStudiesSlider {
         const cloneNode = node.cloneNode(true);
         swiperWrapper.appendChild(cloneNode);
         node.remove;
-        const imageElement = node.querySelector('img');
+        cloneNode.addEventListener('keydown', (event) => this.handleKeyDown(event));
+        cloneNode.addEventListener('click', () => this.onClick(index));
+        const imageElement = cloneNode.querySelector('img');
         if (imageElement) {
           imageElement.addEventListener('click', () => {
-            this.caseStudiesSlides.slideTo(index); // Change the slide to the corresponding index
+            var _a;
+            (_a = this.caseStudiesSlides) === null || _a === void 0 ? void 0 : _a.slideTo(index); // Change the slide to the corresponding index
           });
         }
       });
     }
   }
   render() {
-    return (h(Host, null, h("div", { class: "ptc-container" }, h("div", { class: "case-studies-thumbs", ref: el => this.caeStudiesThumbRef = el }, h("span", { class: "hide" }, h("slot", { name: 'thumb-slides' })), h("div", { class: 'swiper-wrapper swiper-wrapper-thumbs' }))), h("div", { class: "case-studies-slides", ref: el => this.caseStudiesSlidesRef = el }, h("span", { class: "hide" }, h("slot", { name: 'content-slides' })), h("div", { class: 'swiper-wrapper swiper-wrapper-content' }), h("div", { class: "swiper-pagination", ref: el => this.paginationRef = el }))));
+    return (h(Host, null, h("div", { class: "ptc-container" }, h("div", { class: "case-studies-thumbs swiper", ref: el => this.caeStudiesThumbRef = el }, h("span", { class: "hide" }, h("slot", { name: 'thumb-slides' })), h("div", { class: 'swiper-wrapper swiper-wrapper-thumbs' }))), h("div", { class: "case-studies-slides swiper", ref: el => this.caseStudiesSlidesRef = el }, h("span", { class: "hide" }, h("slot", { name: 'content-slides' })), h("div", { class: 'swiper-wrapper swiper-wrapper-content' }), h("div", { class: "swiper-pagination", ref: el => this.paginationRef = el }))));
   }
   static get is() { return "ptc-case-studies-slider"; }
   static get encapsulation() { return "shadow"; }
@@ -89,5 +229,14 @@ export class PtcCaseStudiesSlider {
       "$": ["ptc-case-studies-slider.css"]
     };
   }
+  static get states() {
+    return {
+      "tabs": {},
+      "tabPanels": {},
+      "activeTabIndex": {},
+      "firstTab": {},
+      "lastTab": {}
+    };
+  }
   static get elementRef() { return "hostElement"; }
 }

package/dist/collection/components/ptc-collapse-list/ptc-collapse-list.js

@@ -98,6 +98,7 @@ export class PtcCollapseList {
               newItem.target = z.linkTarget;
               newItem.title = z.linkTitle;
               newItem.text = z.facetDisplay;
+              newItem.id = generateUUID();
             }
             else {
               newItem.id = generateUUID();
@@ -322,7 +323,7 @@ export class PtcCollapseList {
     let renderLevel = (arr, level, searchOptions) => {
       let levelClass = `level-${level}`;
       return (h("ul", null, searchOptions &&
-        h("li", { class: "search-box-wrapper" }, h("div", { class: "search-box" }, h("input", { class: "search-box", type: "text", placeholder: searchOptions.placeholder, onKeyUp: (e) => { this.onItemFilterSearchUpdate(e); }, onBlur: (e) => { this.onItemFilterSearchUpdate(e); } }))), arr.map((z) => {
+        h("li", { class: "search-box-wrapper" }, h("div", { class: "search-box" }, h("input", { class: "search-box", id: "searchBoxId", type: "text", placeholder: searchOptions.placeholder, onKeyUp: (e) => { this.onItemFilterSearchUpdate(e); }, onBlur: (e) => { this.onItemFilterSearchUpdate(e); } }))), arr.map((z) => {
         let expandable = false;
         let selectable = false;
         let icon;
@@ -368,15 +369,15 @@ export class PtcCollapseList {
       };
       let tooltip = level == 1 ? item.tooltip : undefined;
       if (item.isExternalLink) {
-        return (h("a", { href: item.href, target: item.target, title: item.title }, icon, item.text, renderToolTip(tooltip)));
+        return (h("a", { href: item.href, id: item.id, target: item.target, title: item.title }, icon, item.text, renderToolTip(tooltip)));
       }
       else if ((!expandable && selectable) || (expandable && !selectable)) {
-        return (h("a", { href: "#", title: item.text, onClick: clickEvent }, icon, item.text, renderToolTip(tooltip)));
+        return (h("a", { href: "#", id: item.id, title: item.text, onClick: clickEvent }, icon, item.text, renderToolTip(tooltip)));
       }
       else {
         return [
-          h("a", { class: "expander-icon", href: "#", onClick: (e) => { this.onExpandClick(e, false); } }, icon),
-          h("a", { href: "#", title: item.text, onClick: (e) => { this.onItemLinkClick(e, item.id); } }, item.text),
+          h("a", { class: "expander-icon", href: "#", id: item.id, onClick: (e) => { this.onExpandClick(e, false); } }, icon),
+          h("a", { href: "#", title: item.text, id: item.id, onClick: (e) => { this.onItemLinkClick(e, item.id); } }, item.text),
           renderToolTip(tooltip)
         ];
       }
@@ -385,7 +386,7 @@ export class PtcCollapseList {
     if (!this.showSearchBar) {
       return (h(Host, null, h("div", { class: "container" }, h("ptc-title", { type: 'h2', "title-size": "medium", "title-weight": "w-6", "text-align": 'left', upperline: "no-upperline" }, this.header), renderLevel(this.data, 1))));
     }
-    return (h(Host, null, h("div", { class: "container" }, h("ptc-title", { type: 'h2', "title-size": "medium", "title-weight": "w-6", "text-align": 'left', upperline: "no-upperline" }, this.header), h("div", { class: "search-box" }, h("input", { type: "text", placeholder: this.placeholderText, onKeyUp: (e) => { this.onInputUpdated(e); } })), renderLevel(this.data, 1))));
+    return (h(Host, null, h("div", { class: "container" }, h("ptc-title", { type: 'h2', "title-size": "medium", "title-weight": "w-6", "text-align": 'left', upperline: "no-upperline" }, this.header), h("div", { class: "search-box" }, h("input", { type: "text", id: "searchBoxId", placeholder: this.placeholderText, onKeyUp: (e) => { this.onInputUpdated(e); } })), renderLevel(this.data, 1))));
   }
   async removeSelectedItem(value) {
     let item = this.getItemByValue(value);

package/dist/collection/components/ptc-ellipsis-dropdown/ptc-ellipsis-dropdown.css

@@ -232,4 +232,12 @@ ptc-link, ptc-square-card,
 
 .show .dropdown-container {
   display: inline-block;
+}
+
+dropdown-item:focus-visible {
+  outline: none;
+}
+dropdown-item:focus-visible .dropdown-item {
+  border-radius: var(--ptc-border-radius-standard);
+  outline: 5px solid var(--keyboard-nav-outline);
 }

package/dist/collection/components/ptc-ellipsis-dropdown/ptc-ellipsis-dropdown.js

@@ -1,6 +1,9 @@
 import { h } from '@stencil/core';
 export class PtcEllipsisDropdown {
   constructor() {
+    this.menuitemNodes = [];
+    this.firstMenuitem = false;
+    this.lastMenuitem = false;
     this.dataItems = [];
     this.selectedTab = undefined;
     this.isDropdownOpen = false;
@@ -8,6 +11,7 @@ export class PtcEllipsisDropdown {
     this.isIPad = undefined;
     this.dropdownType = "default";
   }
+  //firstChars = [];
   dropdownToggle(e) {
     e.currentTarget.classList.toggle("show");
     this.isDropdownOpen = e.currentTarget.classList.contains("show");
@@ -26,20 +30,146 @@ export class PtcEllipsisDropdown {
     this.isMobile = window.innerWidth < 768;
     this.isIPad = window.innerWidth < 992 || screen.width < 992;
   }
+  onEscClicked() {
+    var _a;
+    let container = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.ptc-ellipsis-dropdown');
+    //this.host.focus();
+    if (container) {
+      container.classList.remove('show');
+      this.isDropdownOpen = false;
+    }
+  }
   componentWillLoad() {
     this.isMobile = window.innerWidth < 768;
     this.isIPad = window.innerWidth < 992 || screen.width < 992;
   }
+  onMenuitemKeydown(event) {
+    var tgt = event.currentTarget, key = event.key, flag = false;
+    if (event.ctrlKey || event.altKey || event.metaKey) {
+      return;
+    }
+    if (event.shiftKey) {
+      if (event.key === 'Tab') {
+      }
+    }
+    else {
+      switch (key) {
+        case 'Up':
+        case 'ArrowUp':
+          this.setFocusToPreviousMenuitem(tgt);
+          flag = true;
+          break;
+        case 'ArrowDown':
+        case 'Down':
+          this.setFocusToNextMenuitem(tgt);
+          flag = true;
+          break;
+        case 'Home':
+        case 'PageUp':
+          this.setFocusToFirstMenuitem();
+          flag = true;
+          break;
+        case 'End':
+        case 'PageDown':
+          this.setFocusToLastMenuitem();
+          flag = true;
+          break;
+        case 'Tab':
+          this.onEscClicked();
+          break;
+        default:
+          break;
+      }
+    }
+    if (flag) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  }
+  setFocusToMenuitem(newMenuitem) {
+    this.menuitemNodes.forEach(function (item) {
+      if (item === newMenuitem) {
+        item.tabIndex = 0;
+        newMenuitem.focus();
+      }
+      else {
+        item.tabIndex = -1;
+      }
+    });
+  }
+  setFocusToFirstMenuitem() {
+    this.setFocusToMenuitem(this.firstMenuitem);
+  }
+  setFocusToLastMenuitem() {
+    this.setFocusToMenuitem(this.lastMenuitem);
+  }
+  setFocusToPreviousMenuitem(currentMenuitem) {
+    var newMenuitem, index;
+    if (currentMenuitem === this.firstMenuitem) {
+      newMenuitem = this.lastMenuitem;
+    }
+    else {
+      index = this.menuitemNodes.indexOf(currentMenuitem);
+      newMenuitem = this.menuitemNodes[index - 1];
+    }
+    this.setFocusToMenuitem(newMenuitem);
+    return newMenuitem;
+  }
+  setFocusToNextMenuitem(currentMenuitem) {
+    var newMenuitem, index;
+    if (currentMenuitem === this.lastMenuitem) {
+      newMenuitem = this.firstMenuitem;
+    }
+    else {
+      index = this.menuitemNodes.indexOf(currentMenuitem);
+      newMenuitem = this.menuitemNodes[index + 1];
+    }
+    this.setFocusToMenuitem(newMenuitem);
+    return newMenuitem;
+  }
+  componentDidLoad() {
+    setTimeout(() => {
+      this.menuitems = this.host.shadowRoot.querySelectorAll('dropdown-item');
+      for (var i = 0; i < this.menuitems.length; i++) {
+        var menuitem = this.menuitems[i];
+        this.menuitemNodes.push(menuitem);
+        menuitem.tabIndex = -1;
+        menuitem.addEventListener('keydown', this.onMenuitemKeydown.bind(this));
+        if (!this.firstMenuitem) {
+          this.firstMenuitem = menuitem;
+        }
+        this.lastMenuitem = menuitem;
+      }
+    }, 100);
+    const ellp = this.host.shadowRoot.querySelector('.ptc-ellipsis-dropdown');
+    this.host.addEventListener('keydown', (event) => {
+      // Open dropdown on 'Enter' key press
+      if (event.key === 'Enter') {
+        ellp.click();
+      }
+      if (event.key === 'ArrowDown') {
+        this.host.shadowRoot.querySelectorAll('dropdown-item')[0].focus();
+      }
+    });
+    if (this.isMobile || (this.isIPad && this.dropdownType === 'tab-with-banner')) {
+      this.host.setAttribute('tabindex', '0');
+    }
+  }
   render() {
     let activeTab = this.dataItems.find(z => z.isSelected == true);
     let isActive = false;
     if (activeTab) {
       isActive = true;
     }
-    return (h("div", { class: this.dropdownType == 'tab-with-banner' ? "ptc-ellipsis-dropdown tab-with-banner" : "ptc-ellipsis-dropdown default", onClick: (e) => this.dropdownToggle(e) }, (this.isMobile || (this.isIPad && this.dropdownType === 'tab-with-banner')) ? (h("div", { class: 'mob-drop' }, h("span", { class: 'opt-name' }, this.dataItems.map((item) => item.isSelected ? item.text : '')), h("svg", { width: "12", height: "9", viewBox: "0 0 12 9", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1 1.65723L5.94975 6.60697L10.8995 1.65723", stroke: "#00890B", "stroke-width": "2", "stroke-linecap": "round" })))) : (h("div", { class: isActive || this.isDropdownOpen ? "ellipsis-icon active" : "ellipsis-icon" }, h("icon-asset", { type: "ptc", size: "xxx-small", name: "ellipsis", color: isActive || this.isDropdownOpen ? 'white' : 'black' }))), h("div", { class: "dropdown-container" }, h("slot", { name: "dropdown" }), this.dataItems.map(dataItem => {
+    return (h("div", { class: this.dropdownType == 'tab-with-banner' ? "ptc-ellipsis-dropdown tab-with-banner" : "ptc-ellipsis-dropdown default", onClick: (e) => this.dropdownToggle(e) }, (this.isMobile || (this.isIPad && this.dropdownType === 'tab-with-banner')) ? (h("div", { class: 'mob-drop' }, h("span", { class: 'opt-name' }, this.dataItems.map((item) => item.isSelected ? item.text : '')), h("svg", { width: "12", height: "9", viewBox: "0 0 12 9", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1 1.65723L5.94975 6.60697L10.8995 1.65723", stroke: "#00890B", "stroke-width": "2", "stroke-linecap": "round" })))) : (h("div", { class: isActive || this.isDropdownOpen ? "ellipsis-icon active" : "ellipsis-icon" }, h("icon-asset", { type: "ptc", size: "xxx-small", name: "ellipsis", color: isActive || this.isDropdownOpen ? 'white' : 'black' }))), h("div", { class: "dropdown-container", role: "menu", "aria-labelledby": "menubutton1" }, h("slot", { name: "dropdown" }), this.dataItems.map((dataItem) => {
       let activeClass = dataItem.value == this.selectedTab ? 'active' : '';
       let activeDropdown = dataItem.isSelected ? 'selected-drop' : '';
-      return (h("dropdown-item", { class: activeClass + activeDropdown + 'mf-listen' }, h("span", { onClick: (e) => {
+      return (h("dropdown-item", { role: "menuitem", class: activeClass + activeDropdown + 'mf-listen', onKeyDown: (e) => {
+          if (e.key === 'Enter') {
+            e.preventDefault();
+            this.onItemSelected(dataItem);
+          }
+        } }, h("span", { onClick: (e) => {
           e.preventDefault();
           this.onItemSelected(dataItem);
         } }, dataItem.text)));
@@ -155,6 +285,12 @@ export class PtcEllipsisDropdown {
         "target": "window",
         "capture": false,
         "passive": true
+      }, {
+        "name": "escClicked",
+        "method": "onEscClicked",
+        "target": "window",
+        "capture": false,
+        "passive": false
       }];
   }
 }

package/dist/collection/components/ptc-jumbotron/ptc-jumbotron.css

@@ -1259,6 +1259,13 @@ a:focus-visible {
 
 .hp-adjustments {
   background-color: var(--color-black);
+  height: auto;
+  min-height: 640px !important;
+}
+@media (min-height: 640px) {
+  .hp-adjustments {
+    min-height: 72vh !important;
+  }
 }
 .hp-adjustments .div1 {
   grid-area: 1/1/3/2;
@@ -1292,11 +1299,6 @@ a:focus-visible {
   opacity: 0;
 }
 
-@media screen and (min-width: 992.01px) {
-  .hp-adjustments {
-    height: 90vh;
-  }
-}
 .div1 {
   grid-area: 1/1/2/2;
   min-height: 300px;

package/dist/collection/components/ptc-tab-list/ptc-tab-list.css

@@ -193,7 +193,11 @@ ptc-tab-list.tab-with-banner .tabs-header-container {
   }
 }
 .ellipsis-btn.active {
-  display: block;
+  display: inline-block;
+}
+.ellipsis-btn:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  outline: 5px solid var(--keyboard-nav-outline);
 }
 
 tab-header {