@asd20/ui-next 2.21.11 → 2.22.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+# [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.0",
   "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,18 @@
   >
     <div
       v-if="resolvedOpen"
+      ref="container"
       :class="classes"
     >
       <focus-trap
         :open="resolvedOpen"
       >
-        <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 +30,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 +66,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 +79,13 @@ 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'),
+    }
+  },
   computed: {
     resolvedOpen() {
       return typeof this.modelValue === 'boolean'
@@ -85,26 +98,67 @@ export default {
         'asd20-modal-container--windowed': this.windowed,
       }
     },
+    hasTitle() {
+      return Boolean(this.title || this.$slots.title)
+    },
   },
   watch: {
     resolvedOpen: function(newVal) {
       if (newVal) {
+        this.startListeningForEscape()
         this.setFocus()
+        return
       }
+
+      this.stopListeningForEscape()
     },
   },
 
   mounted() {
     if (this.resolvedOpen === true) {
+      this.startListeningForEscape()
       this.setFocus()
     }
   },
+  beforeUnmount() {
+    this.stopListeningForEscape()
+  },
   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

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

@@ -106,9 +106,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 +136,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 +167,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);
     }
   }