@asd20/ui-next 2.21.11 → 2.22.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [2.22.1](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.22.0...ui-next-v2.22.1) (2026-08-28)
+
+
+### Bug Fixes
+
+* accessibility improvements; native space/enter activation in nav; fix skip-link; logins tab relationships ([e198494](https://github.com/academydistrict20/asd20-ui-next/commit/e198494e9aa59b83857cf8ca8c6d933afa32e284))
+
+# [2.22.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.21.11...ui-next-v2.22.0) (2026-08-28)
+
+
+### Features
+
+* accessibility improvements for directory; close modal with esc; focus changes ([8e29660](https://github.com/academydistrict20/asd20-ui-next/commit/8e2966030e00f4165e5622ecb60c80799649b2fb))
+
 ## [2.21.11](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.21.10...ui-next-v2.21.11) (2026-08-27)
 
 ## [2.21.10](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.21.9...ui-next-v2.21.10) (2026-08-27)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asd20/ui-next",
-  "version": "2.21.11",
+  "version": "2.22.1",
   "private": false,
   "description": "ASD20 UI component library for Vue 3.",
   "license": "MIT",

package/src/components/molecules/Asd20Accordion/index.vue

@@ -34,6 +34,7 @@
       <asd20-button
         :aria-labelledby="headingId"
         :aria-controls="contentId"
+        :aria-expanded="open"
         :icon-angle="open ? 180 : 90"
         icon="chevron"
         size="sm"
@@ -45,7 +46,6 @@
     <div
       :id="contentId"
       ref="content"
-      :aria-expanded="open"
       :aria-hidden="open ? 'false' : 'true'"
       :inert="open ? null : ''"
       :class="{

package/src/components/molecules/Asd20Modal/index.vue

@@ -9,12 +9,19 @@
   >
     <div
       v-if="resolvedOpen"
+      ref="container"
       :class="classes"
     >
       <focus-trap
         :open="resolvedOpen"
+        :return-focus-on-deactivate="false"
       >
-        <div class="asd20-modal">
+        <div
+          class="asd20-modal"
+          role="dialog"
+          aria-modal="true"
+          :aria-labelledby="hasTitle ? titleId : undefined"
+        >
           <div
             v-if="title || $slots.title"
             class="asd20-modal__header"
@@ -24,7 +31,9 @@
               :name="icon"
               size="md"
             />
-            <h2>{{ title }}<slot name="title" /></h2>
+            <h2 :id="titleId">
+              {{ title }}<slot name="title" />
+            </h2>
 
             <asd20-button
               v-if="dismissable"
@@ -58,6 +67,7 @@
 import Asd20Icon from '../../atoms/Asd20Icon'
 import Asd20Button from '../../atoms/Asd20Button'
 import FocusTrap from '../../utils/FocusTrap'
+import createComponentInstanceId from '../../../utils/createComponentInstanceId'
 
 export default {
   name: 'Asd20Modal',
@@ -70,9 +80,14 @@ export default {
     dismissable: { type: Boolean, default: false },
     windowed: { type: Boolean, default: false },
   },
-  data: () => ({
-    transitioning: false,
-  }),
+  data() {
+    return {
+      listeningForEscape: false,
+      transitioning: false,
+      titleId: createComponentInstanceId('asd20-modal-title'),
+      previouslyFocusedElement: null,
+    }
+  },
   computed: {
     resolvedOpen() {
       return typeof this.modelValue === 'boolean'
@@ -85,26 +100,74 @@ export default {
         'asd20-modal-container--windowed': this.windowed,
       }
     },
+    hasTitle() {
+      return Boolean(this.title || this.$slots.title)
+    },
   },
   watch: {
-    resolvedOpen: function(newVal) {
+    resolvedOpen: function(newVal, oldVal) {
       if (newVal) {
+        if (!oldVal) this.rememberFocus()
+        this.startListeningForEscape()
         this.setFocus()
+        return
       }
+
+      this.stopListeningForEscape()
+      if (oldVal) this.restoreFocus()
     },
   },
 
+  beforeMount() {
+    if (this.resolvedOpen) this.rememberFocus()
+  },
+
   mounted() {
     if (this.resolvedOpen === true) {
+      this.startListeningForEscape()
       this.setFocus()
     }
   },
+  beforeUnmount() {
+    this.stopListeningForEscape()
+    if (this.resolvedOpen) this.restoreFocus()
+  },
   methods: {
     dismiss(value = false) {
       this.$emit('dismiss', value)
       this.$emit('update:open', value)
       this.$emit('update:modelValue', value)
     },
+    dismissOnEscape(event) {
+      const openModals = document.querySelectorAll('.asd20-modal-container')
+      const topmostModal = openModals[openModals.length - 1]
+      const currentModal = this.$refs.container
+
+      if (
+        event.key !== 'Escape' ||
+        !this.dismissable ||
+        event.defaultPrevented ||
+        topmostModal !== currentModal
+      ) {
+        return
+      }
+
+      event.preventDefault()
+      event.stopImmediatePropagation()
+      this.dismiss(false)
+    },
+    startListeningForEscape() {
+      if (this.listeningForEscape) return
+
+      document.addEventListener('keydown', this.dismissOnEscape)
+      this.listeningForEscape = true
+    },
+    stopListeningForEscape() {
+      if (!this.listeningForEscape) return
+
+      document.removeEventListener('keydown', this.dismissOnEscape)
+      this.listeningForEscape = false
+    },
     focusRef(refName) {
       const ref = this.$refs[refName]
       const focusTarget = ref?.$el || ref
@@ -112,6 +175,26 @@ export default {
         focusTarget.focus()
       }
     },
+    rememberFocus() {
+      const activeElement = document?.activeElement
+      this.previouslyFocusedElement =
+        activeElement && activeElement !== document.body ? activeElement : null
+    },
+    restoreFocus() {
+      const focusTarget = this.previouslyFocusedElement
+      this.previouslyFocusedElement = null
+
+      if (!focusTarget) return
+
+      this.$nextTick(() => {
+        if (
+          focusTarget.isConnected &&
+          typeof focusTarget.focus === 'function'
+        ) {
+          focusTarget.focus()
+        }
+      })
+    },
     setFocus() {
       this.$nextTick(() => {
         this.focusRef('closeButton')

package/src/components/molecules/Asd20Tab/index.vue

@@ -1,8 +1,11 @@
 <template>
   <component
     :is="component"
-    tabindex="0"
+    :tabindex="resolvedTabindex"
     :class="classes"
+    :role="semantic ? 'tab' : undefined"
+    :aria-selected="semantic ? String(active) : undefined"
+    :aria-controls="semantic && panelId ? panelId : undefined"
     exact
     tag="button"
     :to="to"
@@ -67,6 +70,8 @@ export default {
     badge: { type: Number, default: 0 },
     pushRight: { type: Boolean, default: false },
     active: { type: Boolean, default: false },
+    semantic: { type: Boolean, default: false },
+    panelId: { type: String, default: '' },
     to: { type: [String, Object], default: '' },
   },
   emits: ['click'],
@@ -76,6 +81,10 @@ export default {
       if (resolveRouter(this) && this.to) return 'router-link'
       return 'button'
     },
+    resolvedTabindex() {
+      if (!this.semantic) return 0
+      return this.active ? 0 : -1
+    },
     classes() {
       return {
         'asd20-tab': true,
@@ -106,9 +115,9 @@ export default {
   transition: color 0.2s ease-out, border-color 0.2s ease-out,
     opacity 0.2s ease-out;
   font-weight: bold;
-  color: var(--color__primary-t50);
+  color: var(--color__primary-t40);
   text-decoration: none;
-  opacity: 0.8;
+  opacity: 1;
 
   &::after {
     content: '';
@@ -136,19 +145,29 @@ export default {
   }
 
   &:focus {
-    outline: none !important;
+    outline: 2px solid var(--color__accent) !important;
+    outline-offset: -2px;
     box-shadow: none !important;
   }
 
   &:focus-visible {
-    outline: none !important;
+    outline: 2px solid var(--color__accent) !important;
+    outline-offset: -2px;
     box-shadow: none !important;
   }
 
+  &:focus:not(:focus-visible) {
+    outline: none !important;
+  }
+
   &:focus::after,
   &:focus-visible::after {
-    background: var(--color__accent-t60);
-    box-shadow: 0 0 0 2px var(--color__accent-t80);
+    background: var(--color__accent);
+    box-shadow: none;
+  }
+
+  &:focus:not(:focus-visible)::after {
+    background: transparent;
   }
 
   &--active {
@@ -157,20 +176,9 @@ export default {
     &::after {
       background: var(--color__accent);
     }
-    &:focus {
-      outline: none !important;
-      box-shadow: none !important;
-    }
-
-    &:focus-visible {
-      outline: none !important;
-      box-shadow: none !important;
-    }
 
-    &:focus::after,
-    &:focus-visible::after {
+    &:focus:not(:focus-visible)::after {
       background: var(--color__accent);
-      box-shadow: 0 0 0 2px var(--color__accent-t70);
     }
   }
 

package/src/components/organisms/Asd20Navbar/index.vue

@@ -10,8 +10,7 @@
       :icon="menuActive ? 'close' : 'menu'"
       :label="menuActive ? 'Close' : 'Menu'"
       :active="menuActive"
-      @mouseup="toggleMenu"
-      @keyup.enter="toggleMenu"
+      @click="toggleMenu"
     />
 
     <slot />
@@ -89,12 +88,12 @@ export default {
     },
     toggleMenu(event) {
       this.$emit('update:menuActive', !this.menuActive)
-      this.$emit('keyboardTriggeredLastAction', event.type === 'keyup')
+      this.$emit('keyboardTriggeredLastAction', event?.detail === 0)
       this.$emit('update:searchActive', false)
     },
     toggleSearch(event) {
       this.$emit('update:searchActive', !this.searchActive)
-      this.$emit('keyboardTriggeredLastAction', event.type === 'keyup')
+      this.$emit('keyboardTriggeredLastAction', event?.detail === 0)
       this.$emit('update:menuActive', false)
     },
   },
@@ -150,6 +149,7 @@ $logo-width: 50vw;
   }
   .menu-button,
   .search-button {
+    flex-shrink: 0;
     border-radius: var(--website-shape__radius-s);
     color: var(--website-menu__foreground-color);
     & :deep(.asd20-icon g){
@@ -159,6 +159,12 @@ $logo-width: 50vw;
   .emptyNav {
     display: initial;
   }
+
+  :deep(.asd20-organization-picker),
+  :deep(.asd20-organization-picker .asd20-picker),
+  :deep(.asd20-organization-picker .asd20-district-logo) {
+    min-width: 0;
+  }
 }
 
 @keyframes navbar-collapse {

package/src/components/organisms/Asd20TabBar/index.vue

@@ -9,14 +9,18 @@
     <div
       ref="scroller"
       class="asd20-tab-bar__scroller"
+      :role="semantic ? 'tablist' : undefined"
       :aria-label="ariaLabel"
       @scroll.passive="onScroll"
     >
       <asd20-tab
         v-for="(tab, index) in tabs"
         v-bind="tab"
+        ref="tabComponents"
         :key="index"
+        :semantic="semantic"
         @click="$emit('tabClick', tab)"
+        @keydown="onTabKeydown($event, index)"
       />
       <slot />
     </div>
@@ -41,8 +45,11 @@ export default {
   props: {
     tabs: { type: Array, default: () => [] },
     ariaLabel: { type: String, default: 'Tab List' },
+    semantic: { type: Boolean, default: false },
   },
 
+  emits: ['tabClick'],
+
   data: () => ({
     canScrollLeft: false,
     canScrollRight: false,
@@ -75,6 +82,39 @@ export default {
   },
 
   methods: {
+    onTabKeydown(event, index) {
+      if (!this.semantic || !this.tabs.length) return
+
+      const lastIndex = this.tabs.length - 1
+      const destinations = {
+        ArrowLeft: index === 0 ? lastIndex : index - 1,
+        ArrowRight: index === lastIndex ? 0 : index + 1,
+        Home: 0,
+        End: lastIndex,
+      }
+      const destination = destinations[event.key]
+
+      if (destination === undefined) return
+
+      event.preventDefault()
+      this.focusAndActivateTab(destination)
+    },
+
+    focusAndActivateTab(index) {
+      const tabComponents = Array.isArray(this.$refs.tabComponents)
+        ? this.$refs.tabComponents
+        : []
+      const tabComponent = tabComponents[index]
+      const tabElement = tabComponent?.$el || tabComponent
+
+      if (typeof tabElement?.focus === 'function') {
+        tabElement.focus()
+      }
+      if (typeof tabElement?.click === 'function') {
+        tabElement.click()
+      }
+    },
+
     onScroll() {
       this.updateScrollState()
     },

package/src/components/organisms/Asd20VideoHeaderContent/index.vue

@@ -1,6 +1,8 @@
 <template>
   <component
     :is="tag"
+    id="main"
+    tabindex="-1"
     class="asd20-video-header-content"
   >
     <div class="asd20-video-header-content__shell">
@@ -10,7 +12,6 @@
         <section class="header-messaging-section">
           <asd20-messaging
             v-bind="messages[0]"
-            id="main"
             heading-tag-name="h1"
           ></asd20-messaging>
         </section>

package/src/components/templates/Asd20LoginsTemplate/index.vue

@@ -49,86 +49,95 @@
 
     <!-- Page Content -->
 
-    <slot></slot>
-    <section aria-label="Login Tabs">
-      <asd20-tab-bar
-        :tabs="tabsList"
-        class="logins-tab-bar"
-        @tabClick="onTabClick"
-      />
-      <asd20-viewport>
-        <!-- selectedGroup -->
-        <section v-if="selectedTabLogins">
-          <!-- Inline Notifications -->
-          <asd20-notification-group
-            class="asd20-notification-group--inline"
-            :notifications="activeNotificationsByType.inline"
-            group-type="inline"
-            @dismiss="$emit('dismiss-notification', $event)"
-            @toggle-all="$emit('toggle-all')"
-          />
-          <asd20-list
-            class="logins-list"
-            multi-column
-            :column-width="480"
+    <main class="asd20-template-logins__main">
+      <slot></slot>
+      <section aria-label="Login Tabs">
+        <asd20-tab-bar
+          :tabs="tabsList"
+          aria-label="Login categories"
+          class="logins-tab-bar"
+          semantic
+          @tabClick="onTabClick"
+        />
+        <asd20-viewport>
+          <!-- selectedGroup -->
+          <section
+            v-if="selectedTabLogins"
+            :id="selectedTabLogins.panelId"
+            role="tabpanel"
+            :aria-labelledby="selectedTabLogins.tabId"
           >
-            <asd20-list-item
-              v-for="(login, index) in selectedTabLogins.logins"
-              :key="index"
-              :label="login.title"
-              class="login-list-item"
-              align-top
-              bordered
+            <!-- Inline Notifications -->
+            <asd20-notification-group
+              class="asd20-notification-group--inline"
+              :notifications="activeNotificationsByType.inline"
+              group-type="inline"
+              @dismiss="$emit('dismiss-notification', $event)"
+              @toggle-all="$emit('toggle-all')"
+            />
+            <asd20-list
+              class="logins-list"
+              multi-column
+              :column-width="480"
             >
-              <template #actions>
-                <asd20-button
-                  target="_blank"
-                  horizontal
-                  reversed
-                  :label="
-                    login.callsToAction && login.callsToAction[0].label
-                      ? login.callsToAction[0].label
-                      : 'Login'
-                  "
-                  :aria-label="`Login to ${login.title}`"
-                  :link="login.callsToAction[0].url || ''"
-                />
-              </template>
-              <div class="asd20-list-item__description">
-                {{ login.summary }}
-                <a
-                  v-if="login.bodyHtml"
-                  href="#"
-                  @click.prevent="selectedLogin = login"
-                >
-                  {{ login.title }} details.
-                </a>
-              </div>
-            </asd20-list-item>
-          </asd20-list>
-        </section>
-      </asd20-viewport>
-    </section>
-
-    <asd20-modal
-      icon="login"
-      title="Login / Application Details"
-      windowed
-      dismissable
-      :open="selectedLogin != null"
-      class="asd20-login-details-modal"
-      @dismiss="selectedLogin = null"
-    >
-      <asd20-viewport
-        v-if="selectedLogin"
-        padded
-        scrollable
+              <asd20-list-item
+                v-for="(login, index) in selectedTabLogins.logins"
+                :key="index"
+                :label="login.title"
+                class="login-list-item"
+                align-top
+                bordered
+              >
+                <template #actions>
+                  <asd20-button
+                    target="_blank"
+                    horizontal
+                    reversed
+                    :label="
+                      login.callsToAction && login.callsToAction[0].label
+                        ? login.callsToAction[0].label
+                        : 'Login'
+                    "
+                    :aria-label="`Login to ${login.title}`"
+                    :link="login.callsToAction[0].url || ''"
+                  />
+                </template>
+                <div class="asd20-list-item__description">
+                  {{ login.summary }}
+                  <a
+                    v-if="login.bodyHtml"
+                    href="#"
+                    @click.prevent="selectedLogin = login"
+                  >
+                    {{ login.title }} details.
+                  </a>
+                </div>
+              </asd20-list-item>
+            </asd20-list>
+          </section>
+        </asd20-viewport>
+      </section>
+
+      <asd20-modal
+        icon="login"
+        title="Login / Application Details"
+        windowed
+        dismissable
+        :open="selectedLogin != null"
+        class="asd20-login-details-modal"
+        @dismiss="selectedLogin = null"
       >
-        <asd20-messaging-group
-          :messages="[selectedLogin]"
-        ></asd20-messaging-group>
-      </asd20-viewport>
-    </asd20-modal>
+        <asd20-viewport
+          v-if="selectedLogin"
+          padded
+          scrollable
+        >
+          <asd20-messaging-group
+            :messages="[selectedLogin]"
+          ></asd20-messaging-group>
+        </asd20-viewport>
+      </asd20-modal>
+    </main>
     <!-- </asd20-page-content> -->
 
     <slot name="before-footer" />
@@ -228,12 +237,18 @@ export default {
         }
       )
 
-      return sortedCategories.map(c => ({
-        id: `tab-${kebabCase(c)}`,
-        label: c,
-        hash: `#tab-${kebabCase(c)}`,
-        active: this.tab === `#tab-${kebabCase(c)}`,
-      }))
+      return sortedCategories.map(c => {
+        const tabId = `tab-${kebabCase(c)}`
+        const hash = `#${tabId}`
+
+        return {
+          id: tabId,
+          panelId: `${tabId}-panel`,
+          label: c,
+          hash,
+          active: this.tab === hash,
+        }
+      })
     },
     logins() {
       return (this.messages || []).map(m => {
@@ -263,6 +278,8 @@ export default {
 
         groups.push({
           tab: t.label,
+          tabId: t.id,
+          panelId: t.panelId,
           hash: t.hash,
           logins: loginsForTab,
         })

package/src/components/utils/FocusTrap.vue

@@ -8,6 +8,7 @@ export default {
     open: { type: Boolean, default: undefined },
     initialFocus: { type: null, default: undefined },
     allowOutsideClick: { type: [Boolean, Function], default: undefined },
+    returnFocusOnDeactivate: { type: Boolean, default: true },
   },
   data: () => ({
     trap: null,
@@ -24,6 +25,7 @@ export default {
         clickOutsideDeactivates: false,
         escapeDeactivates: false,
         fallbackFocus: () => this.ensureFallbackFocusTarget(),
+        returnFocusOnDeactivate: this.returnFocusOnDeactivate,
       }
 
       if (this.initialFocus !== undefined) {