fix(about): focus states

client/src/about/custom-elements.ts

@@ -37,18 +37,17 @@ export class TeamMember extends LitElement {
     }
   }
 
-  _focus({ currentTarget }) {
+  _focusin({ currentTarget }) {
     if (currentTarget instanceof HTMLElement) {
       window.history.pushState({}, "", `#${currentTarget.id}`);
-      this.classList.add("open");
       this.scrollIntoView({ block: "nearest", inline: "nearest" });
     }
   }
 
   _focusout({ relatedTarget }) {
-    if (!(relatedTarget instanceof Node && this.contains(relatedTarget))) {
-      this.classList.remove("open");
-    }
+    const hx = this.querySelector("h4, h5");
+    const panel = hx?.closest(".tabpanel");
+    window.history.pushState({}, "", `#${panel?.id || ""}`);
   }
 
   createRenderRoot() {
@@ -59,13 +58,16 @@ export class TeamMember extends LitElement {
     super.connectedCallback();
     this.tabIndex = 0;
     this._setID();
-    this.addEventListener("focus", this._focus);
+    if (window.location.hash === `#${this.id}`) {
+      setTimeout(() => this.focus(), 100);
+    }
+    this.addEventListener("focusin", this._focusin);
     this.addEventListener("focusout", this._focusout);
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.removeEventListener("focus", this._focus);
+    this.removeEventListener("focusin", this._focusin);
     this.removeEventListener("focusout", this._focusout);
   }
 }

client/src/about/index.scss

@@ -705,7 +705,7 @@ main.about-container {
           }
         }
 
-        &.open {
+        &:focus-within {
           align-content: start;
           cursor: unset;
           display: grid;