@asd20/ui-next 2.24.2 → 2.24.4

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## [2.24.4](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.24.3...ui-next-v2.24.4) (2026-09-17)
+
+
+### Bug Fixes
+
+* remove legacy accessibility form templates and components ([3e9fa07](https://github.com/academydistrict20/asd20-ui-next/commit/3e9fa0749a9000f9c8970bbb8d1a81ed665a94e8))
+
+## [2.24.3](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.24.2...ui-next-v2.24.3) (2026-09-17)
+
+
+### Bug Fixes
+
+* fix accessibility form verbiage; add native trigger support for public forms ([54f5b47](https://github.com/academydistrict20/asd20-ui-next/commit/54f5b47b2bb80fbf807439fcfd376e911806e053))
+* fix release verifier from last commit ([b7b8d8f](https://github.com/academydistrict20/asd20-ui-next/commit/b7b8d8f996c757ddd727ab2272f38ea11737ddb7))
+
 ## [2.24.2](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.24.1...ui-next-v2.24.2) (2026-09-17)
 
 

package/components.js

@@ -66,7 +66,6 @@ export { default as Asd20Toolbar } from './src/components/molecules/Asd20Toolbar
 export { default as Asd20WidgetGroup } from './src/components/molecules/Asd20WidgetGroup.vue'
 
 // Organisms
-export { default as Asd20AccessibilityIssueModal } from './src/components/organisms/Asd20AccessibilityIssueModal/index.vue'
 export { default as Asd20ActionMenu } from './src/components/organisms/Asd20ActionMenu/index.vue'
 export { default as Asd20AiSearch } from './src/components/organisms/Asd20AiSearch/index.vue'
 export { default as Asd20AppHeader } from './src/components/organisms/Asd20AppHeader/index.vue'

package/helpers.js

@@ -50,6 +50,5 @@ export { default as queryFiles } from './src/helpers/queryFiles.js'
 export { default as queryMessages } from './src/helpers/queryMessages.js'
 export { default as queryPages } from './src/helpers/queryPages.js'
 export { default as queryPeople } from './src/helpers/queryPeople.js'
-export { default as sendAccessibilityIssue } from './src/helpers/sendAccessibilityIssue.js'
 export { default as sendEmail } from './src/helpers/sendEmail.js'
 export { default as sortOrgsByLevel } from './src/helpers/sortOrgsByLevel.js'

package/package.json

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

package/src/components/atoms/Asd20Button/index.vue

@@ -39,6 +39,7 @@ export default {
     hideLabel: { type: Boolean, default: false },
     link: { type: String, default: '' },
     trackingCode: { type: String, default: '' }, // e.g., 'data-analytics-id'
+    publicFormId: { type: String, default: '' },
     icon: { type: String, default: '' },
     badge: { type: Number, default: 0 },
     size: {
@@ -73,7 +74,13 @@ export default {
       }
     },
     tag() {
-      return !this.link || this.link === ' ' ? 'button' : 'a'
+      return this.normalizedPublicFormId || !this.link || this.link === ' '
+        ? 'button'
+        : 'a'
+    },
+    normalizedPublicFormId() {
+      const formId = String(this.publicFormId || '').trim()
+      return /^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(formId) ? formId : ''
     },
     isExternal() {
       return shouldOpenInNewWindow(this.link)
@@ -109,16 +116,21 @@ export default {
 
       // Optional tracking code (dynamic attribute key)
       if (this.trackingCode) a[this.trackingCode] = ''
+      if (this.normalizedPublicFormId) {
+        a['data-public-form'] = this.normalizedPublicFormId
+      }
 
       return a
     },
   },
   methods: {
     handleClick(event) {
-      navigateInternalHref(this, event, this.link, {
-        target: event.currentTarget?.getAttribute?.('target'),
-        download: event.currentTarget?.hasAttribute?.('download'),
-      })
+      if (!this.normalizedPublicFormId) {
+        navigateInternalHref(this, event, this.link, {
+          target: event.currentTarget?.getAttribute?.('target'),
+          download: event.currentTarget?.hasAttribute?.('download'),
+        })
+      }
       this.forwardEvent('click', event)
     },
     forwardEvent(name, event) {

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

@@ -8,6 +8,8 @@
       :required="field.required"
       :minlength="field.minLength"
       :maxlength="field.maxLength"
+      :show-character-count="showCharacterCount"
+      :show-pristine-validation-errors="showPristineValidationErrors"
       :autocomplete="field.autocomplete || undefined"
       :aria-describedby="describedBy"
       :aria-invalid="hasErrors ? 'true' : undefined"
@@ -23,6 +25,8 @@
       :required="field.required"
       :minlength="field.minLength"
       :maxlength="field.maxLength"
+      :show-character-count="showCharacterCount"
+      :show-pristine-validation-errors="showPristineValidationErrors"
       :autocomplete="field.autocomplete || undefined"
       :aria-describedby="describedBy"
       :aria-invalid="hasErrors ? 'true' : undefined"
@@ -127,6 +131,8 @@ export default {
     modelValue: { type: [String, Boolean], default: '' },
     errors: { type: Array, default: () => [] },
     inputId: { type: String, required: true },
+    showCharacterCount: { type: Boolean, default: true },
+    showPristineValidationErrors: { type: Boolean, default: true },
   },
   emits: ['update:modelValue'],
   data() {

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

@@ -25,7 +25,7 @@
       <slot name="suffix" />
     </div>
     <div
-      v-if="validationErrors.length || maxLength !== null"
+      v-if="renderedValidationErrors.length || hasCharacterCount"
       class="asd20-text-area-input__validation-row"
     >
       <div class="asd20-text-area-input__validation-errors">
@@ -37,7 +37,7 @@
         />
       </div>
       <span
-        v-if="maxLength !== null"
+        v-if="hasCharacterCount"
         class="asd20-text-area-input__character-count"
       >{{ characterCountText }}</span>
     </div>

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

@@ -21,7 +21,7 @@
       <slot name="suffix" />
     </div>
     <div
-      v-if="validationErrors.length || maxLength !== null"
+      v-if="renderedValidationErrors.length || hasCharacterCount"
       class="asd20-text-input__validation-row"
     >
       <div class="asd20-text-input__validation-errors">
@@ -33,7 +33,7 @@
         />
       </div>
       <span
-        v-if="maxLength !== null"
+        v-if="hasCharacterCount"
         class="asd20-text-input__character-count"
       >{{ characterCountText }}</span>
     </div>

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

@@ -67,6 +67,8 @@
           :label="cta.label"
           :icon="cta.icon"
           :link="cta.url"
+          :tracking-code="cta.trackingCode"
+          :public-form-id="cta.publicFormId"
           reversed
           horizontal
           centered

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

@@ -158,6 +158,8 @@
         :label="callsToAction[0].label"
         :icon="callsToAction[0].icon"
         :link="callsToAction[0].url"
+        :tracking-code="callsToAction[0].trackingCode"
+        :public-form-id="callsToAction[0].publicFormId"
         reversed
         horizontal
         centered
@@ -168,6 +170,8 @@
         :label="callsToAction[1].label"
         :icon="callsToAction[1].icon"
         :link="callsToAction[1].url"
+        :tracking-code="callsToAction[1].trackingCode"
+        :public-form-id="callsToAction[1].publicFormId"
         reversed
         horizontal
         centered

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

@@ -150,6 +150,7 @@
         :icon="callsToAction[0].icon"
         :link="callsToAction[0].url"
         :tracking-code="callsToAction[0].trackingCode"
+        :public-form-id="callsToAction[0].publicFormId"
         reversed
         horizontal
         centered
@@ -162,6 +163,7 @@
         :icon="callsToAction[1].icon"
         :link="callsToAction[1].url"
         :tracking-code="callsToAction[1].trackingCode"
+        :public-form-id="callsToAction[1].publicFormId"
         reversed
         horizontal
         centered

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

@@ -2,7 +2,7 @@
   <asd20-modal
     :open="open"
     :title="modalTitle"
-    icon="contact"
+    icon="website"
     dismissable
     class="asd20-public-form-modal"
     @dismiss="dismiss"
@@ -77,6 +77,8 @@
           :input-id="fieldId(field.name)"
           :model-value="values[field.name]"
           :errors="validationErrors[field.name] || []"
+          :show-character-count="shouldShowCharacterCount(field)"
+          :show-pristine-validation-errors="showPristineValidationErrors"
           @update:modelValue="updateValue(field.name, $event)"
         />
 
@@ -230,6 +232,9 @@ export default {
     modalTitle() {
       return this.formDefinition?.title || 'Public Form'
     },
+    showPristineValidationErrors() {
+      return this.formDefinition?.id !== 'accessibility-issue'
+    },
     errorEntries() {
       if (!this.formDefinition) return []
       return this.formDefinition.fields
@@ -321,6 +326,9 @@ export default {
     fieldId(name) {
       return `${this.instanceId}-${name}`
     },
+    shouldShowCharacterCount(field) {
+      return this.formDefinition.id !== 'accessibility-issue' || field.name === 'issue'
+    },
     updateValue(name, value) {
       this.values[name] = value
       if (this.validationAttempted) this.validate(false)
@@ -352,7 +360,7 @@ export default {
     },
     captchaFailed() {
       this.showFeedback(
-        'The verification service could not start. Please try again or use the contact options below.'
+        'The verification service could not start. Please try again or use the contact options listed.'
       )
     },
     captchaExpired() {
@@ -368,15 +376,15 @@ export default {
       if (status === 403)
         return 'The verification was not accepted. Please try again.'
       if (status === 429) {
-        return 'Too many submissions were received recently. Please wait and try again, or use the contact options below.'
+        return 'Too many submissions were received recently. Please wait and try again, or use the contact options listed.'
       }
       if (status === 502) {
-        return 'The form could not be delivered right now. Please try again later or use the contact options below.'
+        return 'The form could not be delivered right now. Please try again later or use the contact options listed.'
       }
       if (status === 503) {
-        return 'This form is temporarily unavailable. Please use the contact options below.'
+        return 'This form is temporarily unavailable. Please use the contact options listed.'
       }
-      return 'Something went wrong while submitting the form. Please try again later or use the contact options below.'
+      return 'Something went wrong while submitting the form. Please try again later or use the contact options listed.'
     },
     showFeedback(message, role = 'alert') {
       this.feedbackMessage = message

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

@@ -62,6 +62,8 @@
         :label="cta.label"
         :icon="cta.icon"
         :link="cta.url"
+        :tracking-code="cta.trackingCode"
+        :public-form-id="cta.publicFormId"
         reversed
         horizontal
         centered

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

@@ -88,6 +88,8 @@
             :label="cta.label"
             :icon="cta.icon"
             :link="cta.url"
+            :tracking-code="cta.trackingCode"
+            :public-form-id="cta.publicFormId"
             reversed
             horizontal
             centered

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

@@ -57,6 +57,8 @@
         :label="cta.label"
         :icon="cta.icon"
         :link="cta.url"
+        :tracking-code="cta.trackingCode"
+        :public-form-id="cta.publicFormId"
         bordered
         reversed
         horizontal

package/src/graphql/pageQueryExample.graphql

@@ -25,6 +25,7 @@ query($pageId: uuid!, $now: String) {
         id
         title
         trackingCode
+        publicFormId
         url
         description
       }
@@ -84,6 +85,7 @@ query($pageId: uuid!, $now: String) {
             id
             title
             trackingCode
+            publicFormId
             url
           }
         }

package/src/helpers/injectedContentInteractions.js

@@ -74,29 +74,3 @@ export function bindInjectedAccordionInteractions(root) {
     root.removeEventListener('click', onClick)
   }
 }
-
-export function bindAccessibilityModalTrigger(root, onOpen) {
-  if (!root?.addEventListener) {
-    return () => {}
-  }
-
-  const onClick = event => {
-    const trigger = findClosestInRoot(
-      event,
-      '[data-trigger-accessibility-modal]',
-      root
-    )
-
-    if (!trigger) {
-      return
-    }
-
-    onOpen()
-  }
-
-  root.addEventListener('click', onClick)
-
-  return () => {
-    root.removeEventListener('click', onClick)
-  }
-}

package/src/mixins/inputComponentMixin.js

@@ -25,6 +25,8 @@ export default {
     modelValue: { default: '' },
     label: { type: String, default: '' },
     hideLabel: { type: Boolean, default: false },
+    showCharacterCount: { type: Boolean, default: true },
+    showPristineValidationErrors: { type: Boolean, default: true },
     helpText: { type: String, default: '' },
     items: { type: Array, default: () => [] },
     itemDefault: { type: Object, default: null },
@@ -101,6 +103,8 @@ export default {
       return this.validationErrors.length === 0
     },
     renderedValidationErrors() {
+      if (!this.isDirty && !this.showPristineValidationErrors) return []
+
       return this.validationErrors.map(error =>
         !this.isDirty && error === REQUIRED_VALIDATION_ERROR
           ? 'Required'
@@ -127,13 +131,16 @@ export default {
     },
 
     computedHelpText() {
-      if (this.maxLength !== null) {
+      if (this.hasCharacterCount) {
         return [this.helpText, this.characterCountText].filter(Boolean).join(' ')
       }
       return this.helpText
     },
+    hasCharacterCount() {
+      return this.showCharacterCount && this.maxLength !== null
+    },
     characterCountText() {
-      if (this.maxLength === null) return ''
+      if (!this.hasCharacterCount) return ''
       return `${(this.resolvedValue || '').length}/${this.maxLength}`
     },
     maxLength() {

package/templates.js

@@ -23,7 +23,6 @@ export { default as Asd20SalaryCalculatorTemplate } from './src/components/templ
 export { default as Asd20SchoolHomeTemplate } from './src/components/templates/Asd20SchoolHomeTemplate/index.vue'
 export { default as Asd20SchoolHomeVideoTemplate } from './src/components/templates/Asd20SchoolHomeVideoTemplate/index.vue'
 export { default as Asd20SearchAppTemplate } from './src/components/templates/Asd20SearchAppTemplate/index.vue'
-export { default as Asd20WayfindingAccessibilityTemplate } from './src/components/templates/Asd20WayfindingAccessibilityTemplate/index.vue'
 export { default as Asd20WayfindingAlternateTemplate } from './src/components/templates/Asd20WayfindingAlternateTemplate/index.vue'
 export { default as Asd20WayfindingImageTemplate } from './src/components/templates/Asd20WayfindingImageTemplate/index.vue'
 export { default as Asd20WayfindingTemplate } from './src/components/templates/Asd20WayfindingTemplate/index.vue'

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

@@ -1,375 +0,0 @@
-<template>
-  <asd20-modal
-    :open="open"
-    title="Report an Accessibility Issue"
-    icon="accessibility"
-    dismissable
-    class="asd20-accessibility-issue-modal"
-    @dismiss="$emit('dismiss')"
-  >
-    <Asd20Viewport scrollable>
-      <div
-        v-if="submissionSuccess"
-        class="submission-success"
-        role="status"
-        aria-live="polite"
-      >
-        <p style="text-align: center; font-weight: bold; font-size: 1.1rem;">
-          Thank you! Your issue has been submitted.
-        </p>
-      </div>
-
-      <template v-else>
-        <asd20-text-input
-          id="firstName"
-          v-model="form.firstName"
-          label="First Name"
-          required
-          @validated="validationErrors.firstName = $event"
-        />
-        <asd20-text-input
-          id="lastName"
-          v-model="form.lastName"
-          label="Last Name"
-          required
-          @validated="validationErrors.lastName = $event"
-        />
-        <asd20-text-input
-          id="email"
-          v-model="form.email"
-          label="Email Address"
-          type="email"
-          required
-          :validator="validateEmailAddress"
-          @validated="validationErrors.email = $event"
-        />
-        <asd20-text-input
-          id="phone"
-          v-model="form.phone"
-          label="Phone Number"
-        />
-        <asd20-text-input
-          id="address"
-          v-model="form.address"
-          label="Mailing Address"
-        />
-        <asd20-text-input
-          id="organization"
-          v-model="form.organization"
-          label="Organization"
-        />
-        <asd20-text-area-input
-          id="issue"
-          v-model="form.issue"
-          label="Describe the Issue"
-          maxlength="2000"
-          help-text="<ul style='margin: 0 0 0.5rem 1rem; font-size: 0.75rem !important;'>
-              <li>Specify the exact URL, program, service, or digital asset you had a problem with.</li>
-              <li>Provide as much detail as possible, including the nature of the accessibility barrier, the date and time it occurred, any assistive technology you were using, or the nature of the program or service being denied.</li>
-              <li>Describe what you believe should be done to resolve the issue.</li><br>
-            </ul>"
-          required
-          :validator="validateIssue"
-          @validated="validationErrors.issue = $event"
-        />
-        <div
-          class="asd20-accessibility-issue-modal__honeypot"
-          aria-hidden="true"
-        >
-          <label for="accessibility-website">Website</label>
-          <input
-            id="accessibility-website"
-            v-model="form.website"
-            type="text"
-            name="website"
-            tabindex="-1"
-            autocomplete="off"
-          >
-        </div>
-        <div
-          class="asd20-accessibility-issue-modal__submit"
-          aria-live="polite"
-        >
-          <Recaptcha
-            v-if="!sending"
-            sitekey="6LfidKoUAAAAAFqr3QEbia3jIkecsZyxBYlMvWrX"
-            :load-recaptcha-script="true"
-            size="invisible"
-            @verify="captchaVerified"
-            @error="captchaFailed"
-          >
-            <asd20-button
-              label="Submit Issue"
-              :disabled="!isValid || sending"
-              horizontal
-              centered
-              bordered
-              @click="validateBeforeSend"
-            />
-          </Recaptcha>
-          <asd20-spinner
-            v-else
-            size="sm"
-          />
-        </div>
-        <div
-          v-if="feedbackMessage"
-          ref="feedback"
-          class="asd20-accessibility-issue-modal__feedback"
-          :role="feedbackRole"
-          tabindex="-1"
-        >
-          {{ feedbackMessage }}
-        </div>
-      </template>
-    </Asd20Viewport>
-  </asd20-modal>
-</template>
-
-<script>
-import Asd20Modal from '../../molecules/Asd20Modal'
-import Asd20TextInput from '../../molecules/Asd20TextInput'
-import Asd20TextAreaInput from '../../molecules/Asd20TextAreaInput'
-import Asd20Viewport from '../../atoms/Asd20Viewport'
-import Asd20Spinner from '../../atoms/Asd20Spinner'
-import Asd20Button from '../../atoms/Asd20Button'
-import Recaptcha from '../../utils/Recaptcha'
-import sendAccessibilityIssue, {
-  resolveAccessibilityIssueEndpoint,
-} from '../../../helpers/sendAccessibilityIssue.js'
-
-export default {
-  name: 'Asd20AccessibilityIssueModal',
-  components: {
-    Asd20Modal,
-    Asd20TextInput,
-    Asd20TextAreaInput,
-    Asd20Viewport,
-    Asd20Spinner,
-    Asd20Button,
-    Recaptcha,
-  },
-  props: {
-    open: { type: Boolean, default: false },
-  },
-  data() {
-    return {
-      sending: false,
-      submissionSuccess: false,
-      feedbackMessage: '',
-      feedbackRole: 'alert',
-      form: {
-        firstName: '',
-        lastName: '',
-        email: '',
-        phone: '',
-        address: '',
-        organization: '',
-        issue: '',
-        website: '',
-      },
-      validationErrors: {
-        firstName: [],
-        lastName: [],
-        email: [],
-        issue: [],
-      },
-    }
-  },
-  computed: {
-    isValid() {
-      return Object.values(this.validationErrors).every(e => e.length === 0)
-    },
-  },
-  watch: {
-    open(value) {
-      if (value) {
-        this.submissionSuccess = false
-        this.feedbackMessage = ''
-      }
-    },
-  },
-  methods: {
-    validateEmailAddress({ value, validationErrors }) {
-      const pattern = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
-      if (!pattern.test(value)) {
-        validationErrors.push('A valid email address is required')
-      }
-      return validationErrors
-    },
-    validateIssue({ value, validationErrors }) {
-      const maxLength = 2000
-      if (!value || value.trim().length === 0) {
-        validationErrors.push('Issue description is required.')
-      } else if (value.length > maxLength) {
-        validationErrors.push(
-          `Issue description must be fewer than ${maxLength} characters.`
-        )
-      }
-      return validationErrors
-    },
-    resolveRuntimeConfig() {
-      return (
-        this.$config ||
-        this.$?.appContext?.config?.globalProperties?.$config ||
-        {}
-      )
-    },
-    getFormValidationMessages() {
-      const messages = []
-      const emailPattern =
-        /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
-
-      if (!String(this.form.firstName || '').trim())
-        messages.push('First name is required.')
-      if (!String(this.form.lastName || '').trim())
-        messages.push('Last name is required.')
-      if (!emailPattern.test(String(this.form.email || '').trim()))
-        messages.push('Enter a valid email address.')
-
-      const issue = String(this.form.issue || '').trim()
-      if (!issue) messages.push('Describe the accessibility issue.')
-      else if (issue.length > 2000)
-        messages.push('The issue description must be 2,000 characters or fewer.')
-
-      return messages
-    },
-    validateBeforeSend(event) {
-      const messages = this.getFormValidationMessages()
-      if (!messages.length) return
-
-      event?.preventDefault?.()
-      this.showFeedback(messages.join(' '))
-    },
-    captchaVerified(token) {
-      if (token) this.sendAccessibilityIssue(token)
-    },
-    captchaFailed() {
-      this.showFeedback(
-        'The verification service could not start. Please try again or use the email and phone options on this page.'
-      )
-    },
-    showFeedback(message, role = 'alert') {
-      this.feedbackMessage = message
-      this.feedbackRole = role
-      this.$nextTick(() => this.$refs.feedback?.focus?.())
-    },
-    getServerFailureMessage(error) {
-      const status = Number(error?.response?.status || 0)
-      const serverMessage = error?.response?.data?.error
-
-      if (status === 400 && serverMessage) return serverMessage
-      if (status === 403)
-        return 'The verification was not accepted. Please try again.'
-      if (status === 429)
-        return 'Too many reports were submitted recently. Please wait and try again, or use the email and phone options on this page.'
-
-      return 'Something went wrong while submitting the form. Please try again later or use the email and phone options on this page.'
-    },
-    async sendAccessibilityIssue(captchaToken = '') {
-      const validationMessages = this.getFormValidationMessages()
-      if (validationMessages.length) {
-        this.showFeedback(validationMessages.join(' '))
-        return
-      }
-
-      const endpoint = resolveAccessibilityIssueEndpoint({
-        runtimeConfig: this.resolveRuntimeConfig(),
-      })
-      const submissionClient =
-        this.$sendAccessibilityIssue ||
-        (endpoint
-          ? async issue => await sendAccessibilityIssue(issue, endpoint)
-          : null)
-
-      if (!submissionClient) {
-        console.error('Accessibility issue endpoint is not configured.')
-        this.showFeedback(
-          'Issue reporting is not configured for this environment. Please use the email and phone options on this page.'
-        )
-        return
-      }
-
-      this.sending = true
-      this.feedbackMessage = ''
-
-      try {
-        await submissionClient({
-          ...this.form,
-          captchaToken,
-        })
-        this.submissionSuccess = true
-
-        // Wait 2 seconds, then close the modal
-        setTimeout(() => {
-          this.submissionSuccess = false
-          this.form = {
-            firstName: '',
-            lastName: '',
-            email: '',
-            phone: '',
-            address: '',
-            organization: '',
-            issue: '',
-            website: '',
-          }
-          this.$emit('dismiss')
-        }, 2000)
-      } catch (e) {
-        console.error('Accessibility issue submission failed:', e.message || e)
-        this.showFeedback(this.getServerFailureMessage(e))
-      } finally {
-        this.sending = false
-      }
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-@use '../../../design/component-stack' as *;
-
-.asd20-accessibility-issue-modal {
-  & :deep(.asd20-modal__content .asd20-viewport) {
-    padding: space(1);
-  }
-  & :deep(.asd20-text-area-input textarea) {
-    font-family: Arial, sans-serif;
-    font-size: 1rem;
-  }
-
-  &__submit {
-    display: flex;
-    justify-content: center;
-    min-height: 3rem;
-  }
-
-  &__feedback {
-    font-weight: 600;
-    margin: space(0.5) 0;
-    text-align: center;
-  }
-
-  &__honeypot {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-  }
-}
-
-@media (min-width: 1024px) {
-  .asd20-accessibility-issue-modal {
-    & :deep(.asd20-modal__content .asd20-viewport) {
-      padding: space(1);
-    }
-    & :deep(.asd20-modal) {
-      margin-top: auto;
-      margin-bottom: auto;
-      max-width: 40vw;
-    }
-  }
-}
-</style>

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

@@ -1,310 +0,0 @@
-<template>
-  <div class="asd20-template-wayfinding-accessibility">
-    <!-- Skip Nav -->
-    <asd20-skip-to></asd20-skip-to>
-
-    <!-- Site Navigation -->
-    <asd20-site-navigation
-      v-bind="siteNavigationSearchProps"
-      :navigation="navigation"
-      :action-items="actionItems"
-      :menu-open="menuOpen"
-      :search-open="searchOpen"
-      :organization="organization"
-      :organization-options="organizationOptions"
-      @update:menuOpen="$emit('update:menuOpen', $event)"
-      @update:searchOpen="$emit('update:searchOpen', $event)"
-    >
-    </asd20-site-navigation>
-
-    <!-- Banner Notifications -->
-    <asd20-notification-group
-      :notifications="activeNotificationsByType.banner"
-      group-type="banner"
-      @dismiss="$emit('dismiss-notification', $event)"
-      @toggle-all="$emit('toggle-all')"
-    ></asd20-notification-group>
-
-    <!-- Page Header -->
-    <asd20-page-header
-      v-show="pageHeaderContent"
-      v-bind="pageHeaderContent"
-      id="page-header"
-      :organization="organization"
-      :organization-options="organizationOptions"
-      :language-code="languageCode"
-      :breadcrumb-links="breadcrumbLinks"
-      @update:languageCode="$emit('update:languageCode', $event)"
-    >
-      <!-- Floating Notifications -->
-      <template #top>
-        <asd20-notification-group
-          class="asd20-notification-group--floating"
-          :notifications="activeNotificationsByType.floating"
-          :total-dismissed-notifications="totalDismissedNotifications"
-          group-type="floating"
-          @dismiss="$emit('dismiss-notification', $event)"
-          @toggle-all="$emit('toggle-all')"
-        ></asd20-notification-group>
-      </template>
-      <!-- <template #top><asd20-breadcrumb :links="breadcrumbLinks"></asd20-breadcrumb></template> -->
-    </asd20-page-header>
-
-    <!-- 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-notification-group>
-
-    <!-- Page Content -->
-    <asd20-page-content
-      class="intro-message"
-      :primary-messages="primaryMessage"
-      omit-detail-links
-      omit-calls-to-action
-    />
-
-    <!-- Feed Section -->
-    <asd20-feeds-section
-      :announcements="announcements"
-      :announcements-feed-props="announcementsFeedProps"
-      :stories="stories"
-      :stories-feed-props="storiesFeedProps"
-      :events="events"
-      :events-feed-props="eventsFeedProps"
-      :organization="organization"
-      :organization-options="organizationOptions"
-      @announcements-in-view="$emit('announcements-in-view')"
-      @stories-in-view="$emit('stories-in-view')"
-      @events-in-view="$emit('events-in-view')"
-    ></asd20-feeds-section>
-
-    <asd20-page-content
-      :class="wayFindingPrimaryMessages.length > 3 ? 'limit-message-width' : ''"
-      :primary-messages="wayFindingPrimaryMessages"
-      :secondary-messages="secondaryMessages"
-      omit-body-content
-      omit-calls-to-action
-      grid
-    />
-
-    <!-- Photos & Videos -->
-    <asd20-media-section
-      v-if="firstMessage.images.length > 1 || firstMessage.videos.length"
-      :images="firstMessage.images || []"
-      :videos="firstMessage.videos || []"
-    >
-    </asd20-media-section>
-
-    <!-- Sidebar Widgets -->
-    <asd20-widgets-section
-      v-if="widgetsSectionProps.sidebar"
-      v-bind="widgetsSectionProps.sidebar"
-      @events-in-view="$emit('events-in-view')"
-      @files-in-view="$emit('files-in-view')"
-      @people-in-view="$emit('people-in-view')"
-    />
-
-    <!-- Bottom Widgets -->
-    <asd20-widgets-section
-      v-if="widgetsSectionProps.footer || $slots.widgets"
-      v-bind="widgetsSectionProps.footer"
-      full
-      @events-in-view="$emit('events-in-view')"
-      @files-in-view="$emit('files-in-view')"
-      @people-in-view="$emit('people-in-view')"
-    >
-      <slot
-        name="widgets"
-      />
-    </asd20-widgets-section>
-
-    <slot name="before-footer" />
-
-    <!-- Quick Links -->
-    <asd20-quicklinks-menu
-      :quick-links="quickLinks"
-    >
-      <slot name="quicklinks-menu" />
-    </asd20-quicklinks-menu>
-
-    <!-- Footer -->
-    <asd20-page-footer
-      :organization="organization"
-      :social-links="socialLinks"
-      :disclosure-links="disclosureLinks"
-      :website-logo-props="websiteLogoProps"
-      :website-logo-props2="websiteLogoProps2"
-    >
-      <slot name="page-footer" />
-    </asd20-page-footer>
-    <Asd20AccessibilityIssueModal
-      v-show="modalVisible"
-      :open="modalOpen"
-      @dismiss="modalOpen = false"
-    />
-  </div>
-</template>
-
-<script>
-// Components
-import Asd20SkipTo from '../../../components/atoms/Asd20SkipTo'
-import Asd20PageHeader from '../../../components/organisms/Asd20PageHeader'
-
-import Asd20SiteNavigation from '../../../components/organisms/Asd20SiteNavigation'
-import Asd20PageContent from '../../../components/organisms/Asd20PageContent'
-
-import Asd20WidgetsSection from '../../../components/organisms/Asd20WidgetsSection'
-import Asd20FeedsSection from '../../../components/organisms/Asd20FeedsSection'
-import Asd20MediaSection from '../../../components/organisms/Asd20MediaSection'
-import Asd20AccessibilityIssueModal from '../../../components/organisms/Asd20AccessibilityIssueModal'
-import Asd20PageFooter from '../../../components/organisms/Asd20PageFooter'
-import Asd20QuicklinksMenu from '../../../components/organisms/Asd20QuicklinksMenu'
-import Asd20NotificationGroup from '../../../components/organisms/Asd20NotificationGroup'
-
-
-// Mixins
-import pageTemplateMixin from '../../../mixins/pageTemplateMixin'
-import { bindAccessibilityModalTrigger } from '../../../helpers/injectedContentInteractions'
-
-export default {
-  name: 'Asd20WayfindingAccessibilityTemplate',
-  components: {
-    Asd20PageContent,
-    Asd20SkipTo,
-    Asd20PageHeader,
-    Asd20PageFooter,
-    Asd20SiteNavigation,
-    Asd20WidgetsSection,
-    Asd20FeedsSection,
-    Asd20NotificationGroup,
-    Asd20QuicklinksMenu,
-    Asd20MediaSection,
-    Asd20AccessibilityIssueModal,
-  },
-  mixins: [pageTemplateMixin],
-  data() {
-    return {
-      modalVisible: false,
-      modalOpen: false,
-    }
-  },
-  computed: {
-    wayFindingPrimaryMessages() {
-      // wayfinding page
-      return (
-        this.messages
-          // Remove the first message, limit
-          .slice(
-            1,
-            Math.min(this.messages.length, this.primaryMessageLimit + 1)
-          )
-      )
-    },
-    primaryMessage() {
-      const introMessage = this.primaryMessages.slice(0, 1)
-      if (introMessage[0].bodyHtml === '' || null) return
-      return introMessage
-    },
-  },
-  mounted() {
-    this.removeAccessibilityModalTrigger = bindAccessibilityModalTrigger(
-      this.$el,
-      () => {
-        this.modalVisible = true
-        this.$nextTick(() => {
-          this.modalOpen = true
-        })
-      }
-    )
-  },
-  beforeUnmount() {
-    this.removeAccessibilityModalTrigger?.()
-  },
-}
-</script>
-
-<style src="../../../design/tokens.css"></style>
-
-<style lang="scss">
-@use '../../../design/template-stack' as *;
-.asd20-template-wayfinding-accessibility {
-  @include typography;
-  @include template;
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  flex-shrink: 0;
-  overflow: hidden;
-  margin-top: space(2.25);
-  .asd20-notification-group--floating {
-    position: absolute;
-    top: space(2);
-    right: space(0.5);
-  }
-  .asd20-notification-group--inline {
-    margin-top: space(2) !important;
-  }
-
-  .intro-message {
-    .primary-messaging-section {
-      justify-content: center;
-      margin-top: space(1) !important;
-      padding: space(1) space(2) !important;
-      .asd20-messaging {
-        border-top: space(0.25) solid var(--color__tertiary);
-        border-bottom: space(0.25) solid var(--color__tertiary);
-        padding: space(1) 0;
-      }
-    }
-
-    p,
-    p + ul,
-    p + ol {
-      font-size: 1rem !important;
-      line-height: 1.5;
-      font-family: var(--website-typography__font-family-headlines);
-    }
-    h2 {
-      @include asd20-font(
-        1.5,
-        var(--website-typography__font-family-headlines),
-        1.2,
-        700
-      );
-      font-family: var(--website-typography__font-family-headlines);
-    }
-  }
-}
-
-@media (min-width: 1024px) {
-  .asd20-template-wayfinding-accessibility {
-    .asd20-notification-group--floating {
-      position: absolute;
-      top: 1rem;
-    }
-    @include template-desktop;
-    margin-left: space(3);
-    margin-top: 0;
-    .asd20-page-content {
-      margin-top: space(0);
-    }
-  }
-}
-
-@media (min-width: 1790px) {
-  .limit-message-width {
-    .primary-messaging-section,
-    .secondary-messaging-section {
-      .asd20-messaging {
-        flex: 1 1 var(--minimum-column-width);
-        margin: var(--gutter) !important;
-        max-width: 30% !important;
-      }
-    }
-  }
-}
-</style>

package/src/helpers/sendAccessibilityIssue.js

@@ -1,64 +0,0 @@
-import axios from 'axios'
-
-import { normalizeBaseUrl, resolveRuntimeConfigValue } from './runtimeConfig'
-
-const ACCESSIBILITY_ISSUE_ROUTE = '/api/accessibility/issues'
-
-function issueIsValid(issue) {
-  return Boolean(
-    issue &&
-      String(issue.firstName || '').trim() &&
-      String(issue.lastName || '').trim() &&
-      String(issue.email || '').trim() &&
-      String(issue.issue || '').trim()
-  )
-}
-
-export function resolveAccessibilityIssueEndpoint({
-  endpoint = null,
-  runtimeConfig = {},
-} = {}) {
-  const explicitEndpoint = resolveRuntimeConfigValue({
-    explicitValue: endpoint,
-    runtimeConfig,
-    runtimeConfigKeys: ['accessibilityIssueEndpoint'],
-    envKeys: ['ACCESSIBILITY_ISSUE_ENDPOINT'],
-  })
-  if (explicitEndpoint) return String(explicitEndpoint).trim()
-
-  const functionsEndpoint = resolveRuntimeConfigValue({
-    runtimeConfig,
-    runtimeConfigKeys: ['functionsEndpoint'],
-    envKeys: ['FUNCTIONS_ENDPOINT'],
-  })
-  const baseUrl = normalizeBaseUrl(functionsEndpoint)
-
-  return baseUrl ? `${baseUrl}${ACCESSIBILITY_ISSUE_ROUTE}` : null
-}
-
-export default async function sendAccessibilityIssue(issue, endpoint) {
-  if (!issueIsValid(issue)) {
-    throw new Error('The issue object is incomplete or invalid.')
-  }
-
-  if (!endpoint) {
-    throw new Error('The accessibility issue endpoint is not configured.')
-  }
-
-  try {
-    const response = await axios.post(endpoint, issue)
-    return response.data
-  } catch (error) {
-    if (error.response) {
-      const submissionError = new Error(
-        `Accessibility submission error ${error.response.status}: ${JSON.stringify(
-          error.response.data
-        )}`
-      )
-      submissionError.response = error.response
-      throw submissionError
-    }
-
-    throw new Error(`Accessibility submission request error: ${error.message}`)
-  }
-}