@asd20/ui-next 2.22.0 → 2.22.2

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## [2.22.2](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.22.1...ui-next-v2.22.2) (2026-08-31)
+
+## [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)
 
 

package/package.json

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

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

@@ -14,6 +14,7 @@
     >
       <focus-trap
         :open="resolvedOpen"
+        :return-focus-on-deactivate="false"
       >
         <div
           class="asd20-modal"
@@ -84,6 +85,7 @@ export default {
       listeningForEscape: false,
       transitioning: false,
       titleId: createComponentInstanceId('asd20-modal-title'),
+      previouslyFocusedElement: null,
     }
   },
   computed: {
@@ -103,17 +105,23 @@ export default {
     },
   },
   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()
@@ -122,6 +130,7 @@ export default {
   },
   beforeUnmount() {
     this.stopListeningForEscape()
+    if (this.resolvedOpen) this.restoreFocus()
   },
   methods: {
     dismiss(value = false) {
@@ -166,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,

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/Asd20DistrictVideoTemplate/index.vue

@@ -262,7 +262,7 @@ export default {
       },
       {
         start: 0,
-        end: 17,
+        end: 18,
         suffix: 'years',
         label: 'Accredited With Distinction',
         once: true,

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) {