@ptcwebops/ptcw-design 6.1.30 → 6.1.32

package/dist/cjs/ptc-close-icon_2.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-63ddc79c.js');
 
-const ptcCloseIconCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:inline-block}:host .close-icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:5px solid transparent;box-sizing:border-box;border-radius:var(--ptc-border-radius-standard);cursor:pointer}:host .close-icon svg{padding:7px;border:1px solid transparent;border-radius:var(--ptc-border-radius-standard);background-color:transparent;transition:border-color var(--ptc-transition-medium) var(--ptc-ease-inout)}:host .close-icon svg:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}:host .close-icon:hover svg{border-color:var(--color-gray-12)}:host .close-icon:active svg{transition-duration:0ms;background-color:var(--color-gray-02);border:1px solid var(--color-gray-12)}";
+const ptcCloseIconCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:inline-block}:host:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}:host .close-icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:5px solid transparent;box-sizing:border-box;border-radius:var(--ptc-border-radius-standard);cursor:pointer}:host .close-icon svg{padding:7px;border:1px solid transparent;border-radius:var(--ptc-border-radius-standard);background-color:transparent;transition:border-color var(--ptc-transition-medium) var(--ptc-ease-inout)}:host .close-icon svg:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}:host .close-icon:hover svg{border-color:var(--color-gray-12)}:host .close-icon:active svg{transition-duration:0ms;background-color:var(--color-gray-02);border:1px solid var(--color-gray-12)}";
 
 const PtcCloseIcon = class {
   constructor(hostRef) {
@@ -79,6 +79,8 @@ const PtcModal = class {
   componentDidLoad() {
     if (this.show) {
       this.fireOnOpened(this);
+      const wrapperEle = this.el.querySelector('.wrapper');
+      wrapperEle && wrapperEle.focus();
     }
     if (this.showHeaderFooter) {
       this.handleScroll();

package/dist/cjs/ptc-office-location-card.cjs.entry.js

@@ -27,7 +27,7 @@ const showAll = `<svg class="ol-full-icon" width="16" height="16" viewBox="0 0 1
 </svg>
 `;
 
-const ptcOfficeLocationCardCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:block;position:relative}:host .ofc-card-wrapper{padding:2rem;border:1px solid var(--color-gray-02);cursor:pointer;color:var(--color-gray-10);height:100%;box-sizing:border-box;border-radius:var(--ptc-border-radius-standard);transition:border-color var(--ptc-transition-medium) var(--ptc-ease-inout)}:host .ofc-card-wrapper:hover{border-color:var(--color-gray-10)}:host .map-link,:host .contact-number{margin-top:20px;display:flex;align-items:center;color:var(--color-gray-10)}:host .map-link a,:host .contact-number a{color:#2bad56 !important}:host .ofc-icon{margin-right:1rem}:host .show-full-cta{position:absolute;top:12px;right:12px;font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-medium);line-height:var(--ptc-line-height-densest);display:flex;text-decoration:none;transition:text-decoration var(--ptc-transition-medium) var(--ptc-ease-inout)}:host .show-full-cta:hover{text-decoration:underline}:host .show-full-cta span{margin-left:8px}:host .ofc-title{color:var(--color-gray-10);font-size:var(--ptc-font-size-large);font-weight:var(--ptc-font-weight-extrabold);line-height:var(--ptc-line-height-densest)}";
+const ptcOfficeLocationCardCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:block;position:relative}:host .ofc-card-wrapper{padding:2rem;border:1px solid var(--color-gray-02);cursor:pointer;color:var(--color-gray-10);height:100%;box-sizing:border-box;border-radius:var(--ptc-border-radius-standard);transition:border-color var(--ptc-transition-medium) var(--ptc-ease-inout)}:host .ofc-card-wrapper:hover{border-color:var(--color-gray-10)}:host .ofc-card-wrapper:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}:host .map-link,:host .contact-number{margin-top:20px;display:flex;align-items:center;color:var(--color-gray-10)}:host .map-link a,:host .contact-number a{color:#2bad56 !important}:host .ofc-icon{margin-right:1rem}:host .show-full-cta{position:absolute;top:12px;right:12px;font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-medium);line-height:var(--ptc-line-height-densest);display:flex;text-decoration:none;transition:text-decoration var(--ptc-transition-medium) var(--ptc-ease-inout);align-items:center}:host .show-full-cta:hover{text-decoration:underline}:host .show-full-cta:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}:host .show-full-cta span{margin-left:8px}:host .ofc-title{color:var(--color-gray-10);font-size:var(--ptc-font-size-large);font-weight:var(--ptc-font-weight-extrabold);line-height:var(--ptc-line-height-densest)}";
 
 const PtcOfficeLocationCard = class {
   constructor(hostRef) {
@@ -51,8 +51,8 @@ const PtcOfficeLocationCard = class {
     modal.show = true;
   }
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: 'ofc-card-wrapper', onClick: () => this.handleClick() }, this.showFullAddressModal &&
-      index.h("div", { class: 'show-full-cta', onClick: (e) => { this.showFullAddress(e); } }, this.showFullAddressText, index.h("span", { innerHTML: showAll })), index.h("div", { class: 'ofc-title' }, this.officeName), index.h("div", { class: 'map-link' }, index.h("span", { class: "ofc-icon", innerHTML: showMapIcon.showMapSVG }), index.h("slot", { name: "map-link" })), index.h("div", { class: 'contact-number' }, !this.isContactEmpty &&
+    return (index.h(index.Host, null, index.h("div", { class: 'ofc-card-wrapper', onClick: () => this.handleClick(), onKeyPress: () => this.handleClick(), tabindex: 0 }, this.showFullAddressModal &&
+      index.h("div", { class: 'show-full-cta', onClick: (e) => { this.showFullAddress(e); }, tabindex: 0, onKeyPress: (e) => { this.showFullAddress(e); } }, this.showFullAddressText, index.h("span", { innerHTML: showAll })), index.h("div", { class: 'ofc-title' }, this.officeName), index.h("div", { class: 'map-link' }, index.h("span", { class: "ofc-icon", innerHTML: showMapIcon.showMapSVG }), index.h("slot", { name: "map-link" })), index.h("div", { class: 'contact-number' }, !this.isContactEmpty &&
       index.h("span", { class: "ofc-icon", innerHTML: phone }), index.h("slot", { name: "contact-number" })), index.h("slot", null)), this.showFullAddressModal &&
       index.h("ptc-modal", { id: "show-full-add", show: false, size: "md", fixed: true, rounded: true, overlay: true, "keep-in-viewport": true, styles: ".modal-body{padding: 0 32px 32px 32px;box-sizing: border-box;}" }, index.h("div", { class: 'ofc-title' }, this.officeName), index.h("div", { class: 'map-link' }, index.h("span", { class: "ofc-icon", innerHTML: showMapIcon.showMapSVG }), index.h("slot", { name: 'map-link-modal' })), index.h("div", { class: 'contact-number' }, !this.isContactEmpty &&
         index.h("span", { class: "ofc-icon", innerHTML: phone }), index.h("slot", { name: 'contact-number-modal' })))));

package/dist/cjs/ptc-office-locations.cjs.entry.js

@@ -27,7 +27,7 @@ const hideMapSVG = `<svg width="16" height="17" viewBox="0 0 16 17" fill="none"
 </svg>
 `;
 
-const ptcOfficeLocationsCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:block}:host .country-list{z-index:1056;min-width:278px;position:absolute;top:100%;left:16px;width:max-content;margin-top:8px;-webkit-box-orient:vertical;-webkit-box-direction:normal;border-radius:var(--ptc-border-radius-standard);box-shadow:0 8px 24px rgba(0, 0, 0, 0.25);background-color:var(--color-white);border-top:none;overflow:hidden;max-height:0;transition:max-height 0.25s ease-out}:host .country-list ul{list-style:none;margin:0;padding:24px 24px 8px 24px;border-bottom:1px solid var(--color-gray-02);max-height:480px}@media only screen and (min-width: 992px){:host .country-list ul{overflow:auto}}:host .country-list ul::-webkit-scrollbar{width:8px}:host .country-list ul::-webkit-scrollbar-track{background:transparent}:host .country-list ul::-webkit-scrollbar-thumb{background:var(--color-gray-02);border-radius:var(--ptc-border-radius-pill)}:host .country-list li{margin-bottom:1rem;cursor:pointer;transition:background-color 0.3s ease}:host .country-list li label{display:block;position:relative;padding:0 0 4px 32px;font-weight:var(--ptc-font-weight-medium);color:var(--color-gray-10);cursor:pointer}:host .country-list li label .checkmark{background-color:var(--color-white);border:1px solid var(--color-gray-12);border-radius:var(--ptc-border-radius-standard);-webkit-box-sizing:border-box;box-sizing:border-box;height:20px;left:0;position:absolute;top:0;width:20px}:host .country-list li label .checkmark::after{background-image:url('data:image/svg+xml,<svg width=\"14\" height=\"10\" viewBox=\"0 0 14 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.5 4L5.5 8L12.5 1\" stroke=\"white\" stroke-width=\"2\"/></svg>');background-position:50%;background-repeat:no-repeat;background-size:75% 100%;content:\"\";display:none;height:20px;left:-1px;position:absolute;top:-1px;width:20px}:host .country-list li label input[type=checkbox]{cursor:pointer;height:0;opacity:0;position:absolute;width:0;margin:0}:host .country-list li label input:checked~.checkmark{background-color:#1f2024}:host .country-list li label input:checked~.checkmark::after{display:block}:host .country-list li label:hover .checkmark{background-color:var(--color-gray-02)}:host .country-list .country-list-footer{align-items:center;display:flex;flex-direction:row;justify-content:space-between;padding:1rem}:host .country-list.country-list-mobile{display:block;position:relative;overflow:auto;max-height:100%;width:100%;box-shadow:none;margin:0;padding:24px 32px;border-top:1px solid var(--color-gray-02)}:host .country-list.country-list-mobile .continent-name{color:var(--color-gray-10);font-size:var(--ptc-font-size-large);font-weight:var(--ptc-font-weight-bold);margin-bottom:1rem}:host .country-list.country-list-mobile ul{border:none;padding:16px 0 0 0}:host .region-list{display:flex;justify-content:center;height:100%}:host .region-list .region{position:relative}:host .region-list .region .region-btn{margin:0 0.5rem;height:100%;display:flex;cursor:pointer;position:relative}:host .region-list .region .region-btn .continent-arrow,:host .region-list .region .region-btn .continent-name{background-color:var(--color-gray-02);transition:background-color ease-out 250ms;font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-semibold);color:var(--color-gray-10)}:host .region-list .region .region-btn .continent-arrow:hover,:host .region-list .region .region-btn .continent-name:hover{background-color:var(--color-gray-03)}:host .region-list .region .region-btn .continent-name{display:flex;border-top-left-radius:270px;border-bottom-left-radius:270px;align-items:center;padding:12px 8px 12px 16px;border-right:1px solid var(--color-gray-03);text-align:center}@media only screen and (min-width: 1200px){:host .region-list .region .region-btn .continent-name{padding:12px 12px 12px 20px}}:host .region-list .region .region-btn .continent-arrow{display:flex;align-items:center;border-top-right-radius:270px;border-bottom-right-radius:270px;padding:12px 16px 12px 12px}@media only screen and (min-width: 1200px){:host .region-list .region .region-btn .continent-arrow{padding:12px 18px 12px 12px}}:host .region-list .region .region-btn .continent-arrow svg{transition:transform ease-out 250ms}:host .region-list .region.active .country-list{max-height:800px;}:host .region-list .region.active .region-btn .continent-arrow svg{transform:rotate(-180deg)}:host .region-list .region.selected .continent-arrow,:host .region-list .region.selected .continent-name{background-color:var(--color-gray-12);transition:background-color ease-out 250ms;color:var(--color-white)}:host .region-list .region.selected .continent-arrow:hover,:host .region-list .region.selected .continent-name:hover{background-color:var(--color-gray-12);color:var(--color-white)}:host .region-list .region.selected .continent-arrow svg path{stroke:var(--color-white)}:host .office-location-list-wrapper{opacity:1;transition:opacity 0.25s ease-out;margin-top:2rem}:host .office-location-list-wrapper.updating{opacity:0}:host .office-location-list-wrapper .ol-list-bg{background-color:var(--color-white);display:grid;align-content:flex-start;padding:16px;column-gap:16px;row-gap:16px;grid-template-columns:1fr;overflow-y:auto}@media only screen and (min-width: 768px){:host .office-location-list-wrapper .ol-list-bg{grid-template-columns:1fr 1fr}}@media only screen and (min-width: 1200px){:host .office-location-list-wrapper .ol-list-bg{grid-template-columns:1fr 1fr 1fr}}:host .office-location-list-wrapper .map-embed{display:none}:host .office-location-list-wrapper.showing-map{display:flex;flex-direction:row;height:56rem;max-width:1736rem}:host .office-location-list-wrapper.showing-map .ol-list-bg{width:100%;grid-template-columns:1fr}@media only screen and (min-width: 992px){:host .office-location-list-wrapper.showing-map .ol-list-bg{width:40%}}@media only screen and (min-width: 1200px){:host .office-location-list-wrapper.showing-map .ol-list-bg{width:35%}}@media only screen and (min-width: 1440px){:host .office-location-list-wrapper.showing-map .ol-list-bg{width:65%;grid-template-columns:1fr 1fr}}@media only screen and (min-width: 992px){:host .office-location-list-wrapper.showing-map .map-embed{width:60%}}@media only screen and (min-width: 1200px){:host .office-location-list-wrapper.showing-map .map-embed{width:65%}}@media only screen and (min-width: 1440px){:host .office-location-list-wrapper.showing-map .map-embed{width:35%}}:host .office-location-list-wrapper.showing-map .map-embed{display:block}:host .filter-cta{background:var(--color-white);border:1px solid transparent;border-radius:var(--ptc-border-radius-pill);display:flex;flex-direction:row;margin:0 auto;padding:12px 20px;transition:border 0.25s ease-out;font-weight:var(--ptc-font-weight-semibold);font-size:var(--ptc-font-size-x-small);color:var(--color-gray-10)}:host .filter-cta svg{margin-right:10px}:host .filter-cta:hover{border:1px solid var(--color-gray-02)}:host .modal-footer{display:flex;justify-items:center;justify-content:space-between;padding:0 1rem}:host .map-btn{margin:0 0.5rem;height:100%;display:flex;align-items:center;cursor:pointer;position:relative;background-color:var(--color-white);padding:9px 20px;font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-semibold);border-radius:var(--ptc-border-radius-pill);color:var(--color-gray-10);border:1px solid transparent;transition:border 0.25s ease-out;box-sizing:border-box}@media only screen and (min-width: 1200px){:host .map-btn{margin:0 1rem}}:host .map-btn:hover{border:1px solid var(--color-gray-04)}:host .map-btn .map-icon{margin-right:10px;min-height:20px}";
+const ptcOfficeLocationsCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:block}:host .country-list{z-index:1056;min-width:278px;position:absolute;top:100%;left:16px;width:max-content;margin-top:8px;-webkit-box-orient:vertical;-webkit-box-direction:normal;border-radius:var(--ptc-border-radius-standard);box-shadow:0 8px 24px rgba(0, 0, 0, 0.25);background-color:var(--color-white);border-top:none;overflow:hidden;max-height:0;transition:max-height 0.25s ease-out}:host .country-list ul{list-style:none;margin:0;padding:24px 24px 8px 24px;border-bottom:1px solid var(--color-gray-02);max-height:480px}@media only screen and (min-width: 992px){:host .country-list ul{overflow:auto}}:host .country-list ul::-webkit-scrollbar{width:8px}:host .country-list ul::-webkit-scrollbar-track{background:transparent}:host .country-list ul::-webkit-scrollbar-thumb{background:var(--color-gray-02);border-radius:var(--ptc-border-radius-pill)}:host .country-list li{margin-bottom:1rem;cursor:pointer;transition:background-color 0.3s ease}:host .country-list li label{display:inline-block;position:relative;padding:0 0 4px 32px;font-weight:var(--ptc-font-weight-medium);color:var(--color-gray-10);cursor:pointer}:host .country-list li label .checkmark{background-color:var(--color-white);border:1px solid var(--color-gray-12);border-radius:var(--ptc-border-radius-standard);-webkit-box-sizing:border-box;box-sizing:border-box;height:20px;left:0;position:absolute;top:0;width:20px}:host .country-list li label .checkmark::after{background-image:url('data:image/svg+xml,<svg width=\"14\" height=\"10\" viewBox=\"0 0 14 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.5 4L5.5 8L12.5 1\" stroke=\"white\" stroke-width=\"2\"/></svg>');background-position:50%;background-repeat:no-repeat;background-size:75% 100%;content:\"\";display:none;height:20px;left:-1px;position:absolute;top:-1px;width:20px}:host .country-list li label input[type=checkbox]{cursor:pointer;height:0;opacity:0;position:absolute;width:0;margin:0}:host .country-list li label input:checked~.checkmark{background-color:#1f2024}:host .country-list li label input:checked~.checkmark::after{display:block}:host .country-list li label:hover .checkmark{background-color:var(--color-gray-02)}:host .country-list li label:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline);padding-bottom:0px}:host .country-list .country-list-footer{align-items:center;display:flex;flex-direction:row;justify-content:space-between;padding:1rem}:host .country-list.country-list-mobile{display:block;position:relative;overflow:auto;max-height:100%;width:100%;box-shadow:none;margin:0;padding:24px 32px;border-top:1px solid var(--color-gray-02)}:host .country-list.country-list-mobile .continent-name{color:var(--color-gray-10);font-size:var(--ptc-font-size-large);font-weight:var(--ptc-font-weight-bold);margin-bottom:1rem}:host .country-list.country-list-mobile ul{border:none;padding:16px 0 0 0}:host .region-list{display:flex;justify-content:center;height:100%}:host .region-list .region{position:relative}:host .region-list .region .region-btn{margin:0 0.5rem;height:100%;display:flex;cursor:pointer;position:relative}:host .region-list .region .region-btn .continent-arrow,:host .region-list .region .region-btn .continent-name{background-color:var(--color-gray-02);transition:background-color ease-out 250ms;font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-semibold);color:var(--color-gray-10)}:host .region-list .region .region-btn .continent-arrow:hover,:host .region-list .region .region-btn .continent-name:hover{background-color:var(--color-gray-03)}:host .region-list .region .region-btn .continent-name{display:flex;border-top-left-radius:270px;border-bottom-left-radius:270px;align-items:center;padding:12px 8px 12px 16px;border-right:1px solid var(--color-gray-03);text-align:center}@media only screen and (min-width: 1200px){:host .region-list .region .region-btn .continent-name{padding:12px 12px 12px 20px}}:host .region-list .region .region-btn .continent-name:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline);z-index:9}:host .region-list .region .region-btn .continent-arrow{display:flex;align-items:center;border-top-right-radius:270px;border-bottom-right-radius:270px;padding:12px 16px 12px 12px}@media only screen and (min-width: 1200px){:host .region-list .region .region-btn .continent-arrow{padding:12px 18px 12px 12px}}:host .region-list .region .region-btn .continent-arrow svg{transition:transform ease-out 250ms}:host .region-list .region .region-btn .continent-arrow:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}:host .region-list .region.active .country-list{max-height:800px;}:host .region-list .region.active .region-btn .continent-arrow svg{transform:rotate(-180deg)}:host .region-list .region.selected .continent-arrow,:host .region-list .region.selected .continent-name{background-color:var(--color-gray-12);transition:background-color ease-out 250ms;color:var(--color-white)}:host .region-list .region.selected .continent-arrow:hover,:host .region-list .region.selected .continent-name:hover{background-color:var(--color-gray-12);color:var(--color-white)}:host .region-list .region.selected .continent-arrow svg path{stroke:var(--color-white)}:host .office-location-list-wrapper{opacity:1;transition:opacity 0.25s ease-out;margin-top:2rem}:host .office-location-list-wrapper.updating{opacity:0}:host .office-location-list-wrapper .ol-list-bg{background-color:var(--color-white);display:grid;align-content:flex-start;padding:16px;column-gap:16px;row-gap:16px;grid-template-columns:1fr;overflow-y:auto}@media only screen and (min-width: 768px){:host .office-location-list-wrapper .ol-list-bg{grid-template-columns:1fr 1fr}}@media only screen and (min-width: 1200px){:host .office-location-list-wrapper .ol-list-bg{grid-template-columns:1fr 1fr 1fr}}:host .office-location-list-wrapper .map-embed{display:none}:host .office-location-list-wrapper.showing-map{display:flex;flex-direction:row;height:56rem;max-width:1736rem}:host .office-location-list-wrapper.showing-map .ol-list-bg{width:100%;grid-template-columns:1fr}@media only screen and (min-width: 992px){:host .office-location-list-wrapper.showing-map .ol-list-bg{width:40%}}@media only screen and (min-width: 1200px){:host .office-location-list-wrapper.showing-map .ol-list-bg{width:35%}}@media only screen and (min-width: 1440px){:host .office-location-list-wrapper.showing-map .ol-list-bg{width:65%;grid-template-columns:1fr 1fr}}@media only screen and (min-width: 992px){:host .office-location-list-wrapper.showing-map .map-embed{width:60%}}@media only screen and (min-width: 1200px){:host .office-location-list-wrapper.showing-map .map-embed{width:65%}}@media only screen and (min-width: 1440px){:host .office-location-list-wrapper.showing-map .map-embed{width:35%}}:host .office-location-list-wrapper.showing-map .map-embed{display:block}:host .filter-cta{background:var(--color-white);border:1px solid transparent;border-radius:var(--ptc-border-radius-pill);display:flex;flex-direction:row;margin:0 auto;padding:12px 20px;transition:border 0.25s ease-out;font-weight:var(--ptc-font-weight-semibold);font-size:var(--ptc-font-size-x-small);color:var(--color-gray-10)}:host .filter-cta svg{margin-right:10px}:host .filter-cta:hover{border:1px solid var(--color-gray-02)}:host .filter-cta:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}:host .modal-footer{display:flex;justify-items:center;justify-content:space-between;padding:0 1rem}:host .map-btn{margin:0 0.5rem;height:100%;display:flex;align-items:center;cursor:pointer;position:relative;background-color:var(--color-white);padding:9px 20px;font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-semibold);border-radius:var(--ptc-border-radius-pill);color:var(--color-gray-10);border:1px solid transparent;transition:border 0.25s ease-out;box-sizing:border-box}@media only screen and (min-width: 1200px){:host .map-btn{margin:0 1rem}}:host .map-btn:hover{border:1px solid var(--color-gray-04)}:host .map-btn:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}:host .map-btn .map-icon{margin-right:10px;min-height:20px}";
 
 const PtcOfficeLocations = class {
   constructor(hostRef) {
@@ -104,14 +104,35 @@ const PtcOfficeLocations = class {
     this.showFirstMap();
   }
   toggleCountryList(region) {
+    let regionListID = this.hostEl.shadowRoot.querySelector(`#region-wrap-${region.replace(/\s+/g, '')}`);
     // Toggle open/close state for the clicked region
     if (this.openRegion === region) {
       // If the clicked region is already open, close it
       this.openRegion = '';
+      if (regionListID) {
+        let labelsList = regionListID.querySelectorAll('label');
+        labelsList.forEach((i) => {
+          i.tabIndex = -1;
+        });
+        let btnsList = regionListID.querySelectorAll('ptc-button');
+        btnsList.forEach((i) => {
+          i.tabIndex = -1;
+        });
+      }
     }
     else {
       // Close any previously open region and open the clicked region
       this.openRegion = region;
+      if (regionListID) {
+        let labelsList = regionListID.querySelectorAll('label');
+        labelsList.forEach((i) => {
+          i.tabIndex = 0;
+        });
+        let btnsList = regionListID.querySelectorAll('ptc-button');
+        btnsList.forEach((i) => {
+          i.removeAttribute("tabIndex");
+        });
+      }
     }
   }
   getCheckboxes(region) {
@@ -157,14 +178,28 @@ const PtcOfficeLocations = class {
     this.updateOfficeList();
     this.toggleCountryList(region);
   }
+  updateCheckboxStatusOnenter(region, e) {
+    if (e.keyCode == 13) {
+      this.updateCheckboxStatus(region, e);
+    }
+  }
   updateCheckboxStatus(region, e) {
     const regionWrap = this.hostEl.shadowRoot.querySelector(`#region-wrap-${region.replace(/\s+/g, '')}`);
     const checkboxes = this.getCheckboxes(region);
-    const isAllRegionsCheckboxClicked = e.target.id === `all-regions-${region.replace(/\s+/g, '')}`;
+    const isAllRegionsCheckboxClicked = e.target.id === `all-regions-${region.replace(/\s+/g, '')}`
+      || e.keyCode === 13 && e.target.getAttribute("data-id") === `all-regions-${region.replace(/\s+/g, '')}`;
+    let AllRegionsCheckBoxSelected = e.target.checked;
+    if (e.keyCode === 13) {
+      const checkBoxSelected = e.target.querySelector('input');
+      if (checkBoxSelected) {
+        checkBoxSelected.checked = !checkBoxSelected.checked;
+        AllRegionsCheckBoxSelected = checkBoxSelected.checked;
+      }
+    }
     let anyCheckboxSelected = false;
     checkboxes.forEach((checkbox) => {
       if (isAllRegionsCheckboxClicked) {
-        checkbox.checked = checkbox.classList.contains('all-region-label') ? e.target.checked : false;
+        checkbox.checked = checkbox.classList.contains('all-region-label') ? AllRegionsCheckBoxSelected : false;
       }
       else if (checkbox.classList.contains('all-region-label')) {
         checkbox.checked = false;
@@ -223,8 +258,8 @@ const PtcOfficeLocations = class {
   renderCountrylist(region) {
     const uniqueLocations = [...new Map(this.locations
         .filter(location => location.region === region).map(item => [item['country'], item])).values()];
-    return (index.h("ul", { id: 'region-list-' + region.replace(/\s+/g, '') }, index.h("li", null, index.h("label", { htmlFor: 'all-regions-' + region.replace(/\s+/g, '') }, this.allRegionsText, index.h("input", { type: "checkbox", class: 'all-region-label', id: 'all-regions-' + region.replace(/\s+/g, ''), value: region, "data-continent": region, onChange: (e) => this.updateCheckboxStatus(region.replace(/\s+/g, ''), e) }), index.h("span", { class: 'checkmark' }))), uniqueLocations
-      .map(location => (index.h("li", { key: location.id }, index.h("label", { htmlFor: location.country }, location.country, index.h("input", { type: "checkbox", id: location.country, value: location.country, "data-continent": region, onChange: (e) => this.updateCheckboxStatus(region.replace(/\s+/g, ''), e) }), index.h("span", { class: 'checkmark' })))))));
+    return (index.h("ul", { id: 'region-list-' + region.replace(/\s+/g, '') }, index.h("li", { id: 'all-regions-id-' + region.replace(/\s+/g, ''), class: "mf-listen" }, index.h("label", { htmlFor: 'all-regions-' + region.replace(/\s+/g, ''), "data-id": 'all-regions-' + region.replace(/\s+/g, ''), onKeyDown: (e) => this.updateCheckboxStatusOnenter(region.replace(/\s+/g, ''), e), tabindex: this.isMobile ? 0 : -1 }, this.allRegionsText, index.h("input", { type: "checkbox", class: 'all-region-label', tabindex: -1, id: 'all-regions-' + region.replace(/\s+/g, ''), value: region, "data-continent": region, onChange: (e) => this.updateCheckboxStatus(region.replace(/\s+/g, ''), e) }), index.h("span", { class: 'checkmark' }))), uniqueLocations
+      .map(location => (index.h("li", { key: location.id, id: location.id + 'id', class: "mf-listen" }, index.h("label", { htmlFor: location.country, tabindex: this.isMobile ? 0 : -1, "data-id": location.country, onKeyDown: (e) => this.updateCheckboxStatusOnenter(region.replace(/\s+/g, ''), e) }, location.country, index.h("input", { type: "checkbox", id: location.country, tabindex: -1, value: location.country, "data-continent": region, onChange: (e) => this.updateCheckboxStatus(region.replace(/\s+/g, ''), e) }), index.h("span", { class: 'checkmark' })))))));
   }
   toggleMap() {
     this.showMap = !this.showMap;
@@ -241,9 +276,9 @@ const PtcOfficeLocations = class {
   render() {
     const classMap = this.getCssClassMap();
     return (index.h(index.Host, null, !this.isMobile &&
-      index.h("div", { class: "region-list" }, this.regions.map(region => (index.h("div", { class: `region ${this.openRegion === region ? 'active' : ''}`, key: region.id, id: 'region-wrap-' + region.replace(/\s+/g, '') }, index.h("span", { class: "region-btn" }, index.h("span", { class: "continent-name", onClick: () => { this.updateSelectedClass(region.replace(/\s+/g, '')); } }, region), index.h("span", { class: "continent-arrow", onClick: () => this.toggleCountryList(region) }, index.h("svg", { width: "10", height: "7", viewBox: "0 0 10 7", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M1 1L5 5L9 1", stroke: "#40434A", "stroke-width": "2", "stroke-linecap": "round" })))), index.h("div", { class: `country-list country-list-desktop` }, this.renderCountrylist(region), index.h("div", { class: "country-list-footer" }, index.h("ptc-button", { color: "ptc-tertiary", "link-title": "Clear", type: "button", size: "small", onClick: () => this.clearFilter(region), styles: 'button { border: none !important;} button:hover { background-color: transparent !important;} button:hover span{ text-decoration: underline !important}' }, this.clearText), index.h("ptc-button", { color: "ptc-secondary", "link-title": "Apply", type: "button", size: "small", onClick: () => this.applyFilter(region) }, this.applyText)))))), index.h("span", { class: "map-btn", onClick: () => { this.toggleMap(); } }, index.h("span", { class: 'map-icon', innerHTML: this.showMap ? hideMapSVG : showMapIcon.showMapSVG }), index.h("span", null, this.showMap ? this.hideMapText : this.showMapText, " "))), this.isMobile &&
+      index.h("div", { class: "region-list" }, this.regions.map(region => (index.h("div", { class: `region mf-listen ${this.openRegion === region ? 'active' : ''}`, key: region.id, id: 'region-wrap-' + region.replace(/\s+/g, '') }, index.h("span", { class: "region-btn" }, index.h("span", { class: "continent-name", onClick: () => { this.updateSelectedClass(region.replace(/\s+/g, '')); }, onKeyPress: () => { this.updateSelectedClass(region.replace(/\s+/g, '')); }, tabindex: "0" }, region), index.h("span", { class: "continent-arrow", onClick: () => this.toggleCountryList(region), onKeyPress: () => this.toggleCountryList(region), tabindex: "0" }, index.h("svg", { width: "10", height: "7", viewBox: "0 0 10 7", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M1 1L5 5L9 1", stroke: "#40434A", "stroke-width": "2", "stroke-linecap": "round" })))), index.h("div", { class: `country-list country-list-desktop` }, this.renderCountrylist(region), index.h("div", { class: "country-list-footer" }, index.h("ptc-button", { "tracker-id": "clearBtnID", color: "ptc-tertiary", tabIndex: -1, "link-title": "Clear", type: "button", size: "small", onClick: () => this.clearFilter(region), styles: 'button { border: none !important;} button:hover { background-color: transparent !important;} button:hover span{ text-decoration: underline !important}' }, this.clearText), index.h("ptc-button", { "tracker-id": "applyBtnID", color: "ptc-secondary", tabIndex: -1, "link-title": "Apply", type: "button", size: "small", onClick: () => this.applyFilter(region) }, this.applyText)))))), index.h("span", { class: "map-btn mf-listen", id: "mapBtnID", onClick: () => { this.toggleMap(); }, onKeyPress: () => { this.toggleMap(); }, tabindex: 0 }, index.h("span", { class: 'map-icon', innerHTML: this.showMap ? hideMapSVG : showMapIcon.showMapSVG }), index.h("span", null, this.showMap ? this.hideMapText : this.showMapText, " "))), this.isMobile &&
       index.h("button", { class: "filter-cta", onClick: () => { this.openFilterModal(); } }, " ", index.h("span", { class: "svg-close", innerHTML: filterSVG }), this.filtersText), this.isMobile &&
-      index.h("ptc-modal", { id: "modal-example", show: false, size: "lg", fixed: true, rounded: true, "show-header-footer": "true" }, index.h("div", { slot: "header" }, index.h("ptc-title", { type: 'h4', upperline: "no-upperline", "text-align": 'center', "title-margin": "margin-5" }, this.filtersText)), index.h("div", { slot: "footer", class: 'modal-footer' }, index.h("ptc-button", { color: "ptc-tertiary", "link-title": "Clear", type: "button", size: "small", onClick: () => { this.clearFiltersMobile(); }, styles: 'button { border: none !important;} button:hover { background-color: transparent !important;} button:hover span{ text-decoration: underline !important}' }, this.clearText), index.h("ptc-button", { color: "ptc-secondary", "link-title": "Apply", type: "button", size: "small", onClick: () => { this.applyFilterMobile(); } }, this.applyText)), index.h("div", { slot: "body" }, index.h("div", { class: "filter-modal-body" }, this.regions.map(region => (index.h("div", { class: "country-list country-list-mobile", key: region.id, id: 'region-wrap-' + region.replace(/\s+/g, '') }, index.h("span", { class: "continent-name" }, region), this.renderCountrylist(region))))))), index.h("div", { class: classMap }, index.h("div", { class: `ol-list-bg ` }, index.h("slot", null)), !this.isMobile &&
+      index.h("ptc-modal", { id: "modal-example", show: false, size: "lg", fixed: true, rounded: true, "show-header-footer": "true" }, index.h("div", { slot: "header" }, index.h("ptc-title", { type: 'h4', upperline: "no-upperline", "text-align": 'center', "title-margin": "margin-5" }, this.filtersText)), index.h("div", { slot: "footer", class: 'modal-footer' }, index.h("ptc-button", { "tracker-id": "mobileClearBtnID", color: "ptc-tertiary", "link-title": "Clear", type: "button", size: "small", onClick: () => { this.clearFiltersMobile(); }, styles: 'button { border: none !important;} button:hover { background-color: transparent !important;} button:hover span{ text-decoration: underline !important}' }, this.clearText), index.h("ptc-button", { "tracker-id": "mobileApplyBtnID", color: "ptc-secondary", "link-title": "Apply", type: "button", size: "small", onClick: () => { this.applyFilterMobile(); } }, this.applyText)), index.h("div", { slot: "body" }, index.h("div", { class: "filter-modal-body" }, this.regions.map(region => (index.h("div", { class: "country-list country-list-mobile mf-listen", key: region.id, id: 'region-wrap-' + region.replace(/\s+/g, '') }, index.h("span", { class: "continent-name" }, region), this.renderCountrylist(region))))))), index.h("div", { class: classMap }, index.h("div", { class: `ol-list-bg ` }, index.h("slot", null)), !this.isMobile &&
       index.h("div", { class: "map-embed" }, index.h("iframe", { frameborder: "0", referrerPolicy: "no-referrer-when-downgrade", width: '100%', height: '100%', style: { border: '0' }, allowfullScreen: true, src: `https://www.google.com/maps/embed/v1/place?key=AIzaSyATvSgSVv2hH0yXiKMcBYsF26j67d3oPLg&q=${this.address}` })))));
   }
   getCssClassMap() {

package/dist/collection/components/ptc-close-icon/ptc-close-icon.css

@@ -57,6 +57,10 @@ ptc-link, ptc-square-card,
 :host {
   display: inline-block;
 }
+:host:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  outline: 5px solid var(--keyboard-nav-outline);
+}
 :host .close-icon {
   display: flex;
   align-items: center;

package/dist/collection/components/ptc-modal/ptc-modal.js

@@ -57,6 +57,8 @@ export class PtcModal {
   componentDidLoad() {
     if (this.show) {
       this.fireOnOpened(this);
+      const wrapperEle = this.el.querySelector('.wrapper');
+      wrapperEle && wrapperEle.focus();
     }
     if (this.showHeaderFooter) {
       this.handleScroll();

package/dist/collection/components/ptc-office-location-card/ptc-office-location-card.css

@@ -71,6 +71,10 @@ ptc-link, ptc-square-card,
 :host .ofc-card-wrapper:hover {
   border-color: var(--color-gray-10);
 }
+:host .ofc-card-wrapper:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  outline: 5px solid var(--keyboard-nav-outline);
+}
 :host .map-link,
 :host .contact-number {
   margin-top: 20px;
@@ -95,10 +99,15 @@ ptc-link, ptc-square-card,
   display: flex;
   text-decoration: none;
   transition: text-decoration var(--ptc-transition-medium) var(--ptc-ease-inout);
+  align-items: center;
 }
 :host .show-full-cta:hover {
   text-decoration: underline;
 }
+:host .show-full-cta:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  outline: 5px solid var(--keyboard-nav-outline);
+}
 :host .show-full-cta span {
   margin-left: 8px;
 }

package/dist/collection/components/ptc-office-location-card/ptc-office-location-card.js

@@ -22,8 +22,8 @@ export class PtcOfficeLocationCard {
     modal.show = true;
   }
   render() {
-    return (h(Host, null, h("div", { class: 'ofc-card-wrapper', onClick: () => this.handleClick() }, this.showFullAddressModal &&
-      h("div", { class: 'show-full-cta', onClick: (e) => { this.showFullAddress(e); } }, this.showFullAddressText, h("span", { innerHTML: showAll })), h("div", { class: 'ofc-title' }, this.officeName), h("div", { class: 'map-link' }, h("span", { class: "ofc-icon", innerHTML: showMapSVG }), h("slot", { name: "map-link" })), h("div", { class: 'contact-number' }, !this.isContactEmpty &&
+    return (h(Host, null, h("div", { class: 'ofc-card-wrapper', onClick: () => this.handleClick(), onKeyPress: () => this.handleClick(), tabindex: 0 }, this.showFullAddressModal &&
+      h("div", { class: 'show-full-cta', onClick: (e) => { this.showFullAddress(e); }, tabindex: 0, onKeyPress: (e) => { this.showFullAddress(e); } }, this.showFullAddressText, h("span", { innerHTML: showAll })), h("div", { class: 'ofc-title' }, this.officeName), h("div", { class: 'map-link' }, h("span", { class: "ofc-icon", innerHTML: showMapSVG }), h("slot", { name: "map-link" })), h("div", { class: 'contact-number' }, !this.isContactEmpty &&
       h("span", { class: "ofc-icon", innerHTML: phone }), h("slot", { name: "contact-number" })), h("slot", null)), this.showFullAddressModal &&
       h("ptc-modal", { id: "show-full-add", show: false, size: "md", fixed: true, rounded: true, overlay: true, "keep-in-viewport": true, styles: ".modal-body{padding: 0 32px 32px 32px;box-sizing: border-box;}" }, h("div", { class: 'ofc-title' }, this.officeName), h("div", { class: 'map-link' }, h("span", { class: "ofc-icon", innerHTML: showMapSVG }), h("slot", { name: 'map-link-modal' })), h("div", { class: 'contact-number' }, !this.isContactEmpty &&
         h("span", { class: "ofc-icon", innerHTML: phone }), h("slot", { name: 'contact-number-modal' })))));

package/dist/collection/components/ptc-office-locations/ptc-office-locations.css

@@ -103,7 +103,7 @@ ptc-link, ptc-square-card,
   transition: background-color 0.3s ease;
 }
 :host .country-list li label {
-  display: block;
+  display: inline-block;
   position: relative;
   padding: 0 0 4px 32px;
   font-weight: var(--ptc-font-weight-medium);
@@ -152,6 +152,11 @@ ptc-link, ptc-square-card,
 :host .country-list li label:hover .checkmark {
   background-color: var(--color-gray-02);
 }
+:host .country-list li label:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  outline: 5px solid var(--keyboard-nav-outline);
+  padding-bottom: 0px;
+}
 :host .country-list .country-list-footer {
   align-items: center;
   display: flex;
@@ -221,6 +226,11 @@ ptc-link, ptc-square-card,
     padding: 12px 12px 12px 20px;
   }
 }
+:host .region-list .region .region-btn .continent-name:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  outline: 5px solid var(--keyboard-nav-outline);
+  z-index: 9;
+}
 :host .region-list .region .region-btn .continent-arrow {
   display: flex;
   align-items: center;
@@ -236,6 +246,10 @@ ptc-link, ptc-square-card,
 :host .region-list .region .region-btn .continent-arrow svg {
   transition: transform ease-out 250ms;
 }
+:host .region-list .region .region-btn .continent-arrow:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  outline: 5px solid var(--keyboard-nav-outline);
+}
 :host .region-list .region.active .country-list {
   max-height: 800px;
   /* Adjust height as needed */
@@ -351,6 +365,10 @@ ptc-link, ptc-square-card,
 :host .filter-cta:hover {
   border: 1px solid var(--color-gray-02);
 }
+:host .filter-cta:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  outline: 5px solid var(--keyboard-nav-outline);
+}
 :host .modal-footer {
   display: flex;
   justify-items: center;
@@ -382,6 +400,10 @@ ptc-link, ptc-square-card,
 :host .map-btn:hover {
   border: 1px solid var(--color-gray-04);
 }
+:host .map-btn:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  outline: 5px solid var(--keyboard-nav-outline);
+}
 :host .map-btn .map-icon {
   margin-right: 10px;
   min-height: 20px;

package/dist/collection/components/ptc-office-locations/ptc-office-locations.js

@@ -76,14 +76,35 @@ export class PtcOfficeLocations {
     this.showFirstMap();
   }
   toggleCountryList(region) {
+    let regionListID = this.hostEl.shadowRoot.querySelector(`#region-wrap-${region.replace(/\s+/g, '')}`);
     // Toggle open/close state for the clicked region
     if (this.openRegion === region) {
       // If the clicked region is already open, close it
       this.openRegion = '';
+      if (regionListID) {
+        let labelsList = regionListID.querySelectorAll('label');
+        labelsList.forEach((i) => {
+          i.tabIndex = -1;
+        });
+        let btnsList = regionListID.querySelectorAll('ptc-button');
+        btnsList.forEach((i) => {
+          i.tabIndex = -1;
+        });
+      }
     }
     else {
       // Close any previously open region and open the clicked region
       this.openRegion = region;
+      if (regionListID) {
+        let labelsList = regionListID.querySelectorAll('label');
+        labelsList.forEach((i) => {
+          i.tabIndex = 0;
+        });
+        let btnsList = regionListID.querySelectorAll('ptc-button');
+        btnsList.forEach((i) => {
+          i.removeAttribute("tabIndex");
+        });
+      }
     }
   }
   getCheckboxes(region) {
@@ -129,14 +150,28 @@ export class PtcOfficeLocations {
     this.updateOfficeList();
     this.toggleCountryList(region);
   }
+  updateCheckboxStatusOnenter(region, e) {
+    if (e.keyCode == 13) {
+      this.updateCheckboxStatus(region, e);
+    }
+  }
   updateCheckboxStatus(region, e) {
     const regionWrap = this.hostEl.shadowRoot.querySelector(`#region-wrap-${region.replace(/\s+/g, '')}`);
     const checkboxes = this.getCheckboxes(region);
-    const isAllRegionsCheckboxClicked = e.target.id === `all-regions-${region.replace(/\s+/g, '')}`;
+    const isAllRegionsCheckboxClicked = e.target.id === `all-regions-${region.replace(/\s+/g, '')}`
+      || e.keyCode === 13 && e.target.getAttribute("data-id") === `all-regions-${region.replace(/\s+/g, '')}`;
+    let AllRegionsCheckBoxSelected = e.target.checked;
+    if (e.keyCode === 13) {
+      const checkBoxSelected = e.target.querySelector('input');
+      if (checkBoxSelected) {
+        checkBoxSelected.checked = !checkBoxSelected.checked;
+        AllRegionsCheckBoxSelected = checkBoxSelected.checked;
+      }
+    }
     let anyCheckboxSelected = false;
     checkboxes.forEach((checkbox) => {
       if (isAllRegionsCheckboxClicked) {
-        checkbox.checked = checkbox.classList.contains('all-region-label') ? e.target.checked : false;
+        checkbox.checked = checkbox.classList.contains('all-region-label') ? AllRegionsCheckBoxSelected : false;
       }
       else if (checkbox.classList.contains('all-region-label')) {
         checkbox.checked = false;
@@ -195,8 +230,8 @@ export class PtcOfficeLocations {
   renderCountrylist(region) {
     const uniqueLocations = [...new Map(this.locations
         .filter(location => location.region === region).map(item => [item['country'], item])).values()];
-    return (h("ul", { id: 'region-list-' + region.replace(/\s+/g, '') }, h("li", null, h("label", { htmlFor: 'all-regions-' + region.replace(/\s+/g, '') }, this.allRegionsText, h("input", { type: "checkbox", class: 'all-region-label', id: 'all-regions-' + region.replace(/\s+/g, ''), value: region, "data-continent": region, onChange: (e) => this.updateCheckboxStatus(region.replace(/\s+/g, ''), e) }), h("span", { class: 'checkmark' }))), uniqueLocations
-      .map(location => (h("li", { key: location.id }, h("label", { htmlFor: location.country }, location.country, h("input", { type: "checkbox", id: location.country, value: location.country, "data-continent": region, onChange: (e) => this.updateCheckboxStatus(region.replace(/\s+/g, ''), e) }), h("span", { class: 'checkmark' })))))));
+    return (h("ul", { id: 'region-list-' + region.replace(/\s+/g, '') }, h("li", { id: 'all-regions-id-' + region.replace(/\s+/g, ''), class: "mf-listen" }, h("label", { htmlFor: 'all-regions-' + region.replace(/\s+/g, ''), "data-id": 'all-regions-' + region.replace(/\s+/g, ''), onKeyDown: (e) => this.updateCheckboxStatusOnenter(region.replace(/\s+/g, ''), e), tabindex: this.isMobile ? 0 : -1 }, this.allRegionsText, h("input", { type: "checkbox", class: 'all-region-label', tabindex: -1, id: 'all-regions-' + region.replace(/\s+/g, ''), value: region, "data-continent": region, onChange: (e) => this.updateCheckboxStatus(region.replace(/\s+/g, ''), e) }), h("span", { class: 'checkmark' }))), uniqueLocations
+      .map(location => (h("li", { key: location.id, id: location.id + 'id', class: "mf-listen" }, h("label", { htmlFor: location.country, tabindex: this.isMobile ? 0 : -1, "data-id": location.country, onKeyDown: (e) => this.updateCheckboxStatusOnenter(region.replace(/\s+/g, ''), e) }, location.country, h("input", { type: "checkbox", id: location.country, tabindex: -1, value: location.country, "data-continent": region, onChange: (e) => this.updateCheckboxStatus(region.replace(/\s+/g, ''), e) }), h("span", { class: 'checkmark' })))))));
   }
   toggleMap() {
     this.showMap = !this.showMap;
@@ -213,9 +248,9 @@ export class PtcOfficeLocations {
   render() {
     const classMap = this.getCssClassMap();
     return (h(Host, null, !this.isMobile &&
-      h("div", { class: "region-list" }, this.regions.map(region => (h("div", { class: `region ${this.openRegion === region ? 'active' : ''}`, key: region.id, id: 'region-wrap-' + region.replace(/\s+/g, '') }, h("span", { class: "region-btn" }, h("span", { class: "continent-name", onClick: () => { this.updateSelectedClass(region.replace(/\s+/g, '')); } }, region), h("span", { class: "continent-arrow", onClick: () => this.toggleCountryList(region) }, h("svg", { width: "10", height: "7", viewBox: "0 0 10 7", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1 1L5 5L9 1", stroke: "#40434A", "stroke-width": "2", "stroke-linecap": "round" })))), h("div", { class: `country-list country-list-desktop` }, this.renderCountrylist(region), h("div", { class: "country-list-footer" }, h("ptc-button", { color: "ptc-tertiary", "link-title": "Clear", type: "button", size: "small", onClick: () => this.clearFilter(region), styles: 'button { border: none !important;} button:hover { background-color: transparent !important;} button:hover span{ text-decoration: underline !important}' }, this.clearText), h("ptc-button", { color: "ptc-secondary", "link-title": "Apply", type: "button", size: "small", onClick: () => this.applyFilter(region) }, this.applyText)))))), h("span", { class: "map-btn", onClick: () => { this.toggleMap(); } }, h("span", { class: 'map-icon', innerHTML: this.showMap ? hideMapSVG : showMapSVG }), h("span", null, this.showMap ? this.hideMapText : this.showMapText, " "))), this.isMobile &&
+      h("div", { class: "region-list" }, this.regions.map(region => (h("div", { class: `region mf-listen ${this.openRegion === region ? 'active' : ''}`, key: region.id, id: 'region-wrap-' + region.replace(/\s+/g, '') }, h("span", { class: "region-btn" }, h("span", { class: "continent-name", onClick: () => { this.updateSelectedClass(region.replace(/\s+/g, '')); }, onKeyPress: () => { this.updateSelectedClass(region.replace(/\s+/g, '')); }, tabindex: "0" }, region), h("span", { class: "continent-arrow", onClick: () => this.toggleCountryList(region), onKeyPress: () => this.toggleCountryList(region), tabindex: "0" }, h("svg", { width: "10", height: "7", viewBox: "0 0 10 7", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1 1L5 5L9 1", stroke: "#40434A", "stroke-width": "2", "stroke-linecap": "round" })))), h("div", { class: `country-list country-list-desktop` }, this.renderCountrylist(region), h("div", { class: "country-list-footer" }, h("ptc-button", { "tracker-id": "clearBtnID", color: "ptc-tertiary", tabIndex: -1, "link-title": "Clear", type: "button", size: "small", onClick: () => this.clearFilter(region), styles: 'button { border: none !important;} button:hover { background-color: transparent !important;} button:hover span{ text-decoration: underline !important}' }, this.clearText), h("ptc-button", { "tracker-id": "applyBtnID", color: "ptc-secondary", tabIndex: -1, "link-title": "Apply", type: "button", size: "small", onClick: () => this.applyFilter(region) }, this.applyText)))))), h("span", { class: "map-btn mf-listen", id: "mapBtnID", onClick: () => { this.toggleMap(); }, onKeyPress: () => { this.toggleMap(); }, tabindex: 0 }, h("span", { class: 'map-icon', innerHTML: this.showMap ? hideMapSVG : showMapSVG }), h("span", null, this.showMap ? this.hideMapText : this.showMapText, " "))), this.isMobile &&
       h("button", { class: "filter-cta", onClick: () => { this.openFilterModal(); } }, " ", h("span", { class: "svg-close", innerHTML: filterSVG }), this.filtersText), this.isMobile &&
-      h("ptc-modal", { id: "modal-example", show: false, size: "lg", fixed: true, rounded: true, "show-header-footer": "true" }, h("div", { slot: "header" }, h("ptc-title", { type: 'h4', upperline: "no-upperline", "text-align": 'center', "title-margin": "margin-5" }, this.filtersText)), h("div", { slot: "footer", class: 'modal-footer' }, h("ptc-button", { color: "ptc-tertiary", "link-title": "Clear", type: "button", size: "small", onClick: () => { this.clearFiltersMobile(); }, styles: 'button { border: none !important;} button:hover { background-color: transparent !important;} button:hover span{ text-decoration: underline !important}' }, this.clearText), h("ptc-button", { color: "ptc-secondary", "link-title": "Apply", type: "button", size: "small", onClick: () => { this.applyFilterMobile(); } }, this.applyText)), h("div", { slot: "body" }, h("div", { class: "filter-modal-body" }, this.regions.map(region => (h("div", { class: "country-list country-list-mobile", key: region.id, id: 'region-wrap-' + region.replace(/\s+/g, '') }, h("span", { class: "continent-name" }, region), this.renderCountrylist(region))))))), h("div", { class: classMap }, h("div", { class: `ol-list-bg ` }, h("slot", null)), !this.isMobile &&
+      h("ptc-modal", { id: "modal-example", show: false, size: "lg", fixed: true, rounded: true, "show-header-footer": "true" }, h("div", { slot: "header" }, h("ptc-title", { type: 'h4', upperline: "no-upperline", "text-align": 'center', "title-margin": "margin-5" }, this.filtersText)), h("div", { slot: "footer", class: 'modal-footer' }, h("ptc-button", { "tracker-id": "mobileClearBtnID", color: "ptc-tertiary", "link-title": "Clear", type: "button", size: "small", onClick: () => { this.clearFiltersMobile(); }, styles: 'button { border: none !important;} button:hover { background-color: transparent !important;} button:hover span{ text-decoration: underline !important}' }, this.clearText), h("ptc-button", { "tracker-id": "mobileApplyBtnID", color: "ptc-secondary", "link-title": "Apply", type: "button", size: "small", onClick: () => { this.applyFilterMobile(); } }, this.applyText)), h("div", { slot: "body" }, h("div", { class: "filter-modal-body" }, this.regions.map(region => (h("div", { class: "country-list country-list-mobile mf-listen", key: region.id, id: 'region-wrap-' + region.replace(/\s+/g, '') }, h("span", { class: "continent-name" }, region), this.renderCountrylist(region))))))), h("div", { class: classMap }, h("div", { class: `ol-list-bg ` }, h("slot", null)), !this.isMobile &&
       h("div", { class: "map-embed" }, h("iframe", { frameborder: "0", referrerPolicy: "no-referrer-when-downgrade", width: '100%', height: '100%', style: { border: '0' }, allowfullScreen: true, src: `https://www.google.com/maps/embed/v1/place?key=AIzaSyATvSgSVv2hH0yXiKMcBYsF26j67d3oPLg&q=${this.address}` })))));
   }
   getCssClassMap() {