@asd20/ui-next 2.24.3 → 2.25.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+# [2.25.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.24.4...ui-next-v2.25.0) (2026-09-21)
+
+
+### Features
+
+* support public form date limits and fallback guidance ([4ef8551](https://github.com/academydistrict20/asd20-ui-next/commit/4ef8551aaa98cf66f48395a9bf98d68f107a0486))
+
+## [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)
 
 

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.3",
+  "version": "2.25.0",
   "private": false,
   "description": "ASD20 UI component library for Vue 3.",
   "license": "MIT",

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

@@ -25,6 +25,7 @@
       :required="field.required"
       :minlength="field.minLength"
       :maxlength="field.maxLength"
+      :max="dateMaximum"
       :show-character-count="showCharacterCount"
       :show-pristine-validation-errors="showPristineValidationErrors"
       :autocomplete="field.autocomplete || undefined"
@@ -123,6 +124,19 @@ import Asd20Checkbox from '../../atoms/Asd20Checkbox'
 import Asd20TextAreaInput from '../Asd20TextAreaInput'
 import Asd20TextInput from '../Asd20TextInput'
 
+function districtToday() {
+  const parts = new Intl.DateTimeFormat('en-US', {
+    timeZone: 'America/Denver',
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+  }).formatToParts(new Date())
+  const values = Object.fromEntries(
+    parts.map(({ type, value }) => [type, value])
+  )
+  return `${values.year}-${values.month}-${values.day}`
+}
+
 export default {
   name: 'Asd20PublicFormField',
   components: { Asd20Checkbox, Asd20TextAreaInput, Asd20TextInput },
@@ -141,6 +155,11 @@ export default {
     }
   },
   computed: {
+    dateMaximum() {
+      return this.field.type === 'date' && this.field.maxDate === 'today'
+        ? districtToday()
+        : undefined
+    },
     displayLabel() {
       return this.field.required
         ? `${this.field.label} (required)`

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

@@ -102,7 +102,10 @@
           class="asd20-public-form-modal__fallback"
         >
           <p>
-            If you cannot submit this form, use one of these contact options:
+            {{
+              formDefinition.fallbackContact.instructions ||
+                'If you cannot submit this form, use one of these contact options:'
+            }}
           </p>
           <a
             v-if="formDefinition.fallbackContact.email"

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/helpers/publicFormDefinition.js

@@ -34,6 +34,12 @@ function optionalLength(value, label) {
   return value
 }
 
+function optionalMaxDate(value, type) {
+  if (value == null) return undefined
+  if (type === 'date' && value === 'today') return 'today'
+  throw new Error('Maximum date is invalid.')
+}
+
 function normalizeOptions(field) {
   if (!['select', 'radio'].includes(field.type)) return undefined
   if (
@@ -81,6 +87,7 @@ function normalizeField(field) {
     required: field.required === true,
     minLength: optionalLength(field.minLength, 'Minimum length'),
     maxLength: optionalLength(field.maxLength, 'Maximum length'),
+    maxDate: optionalMaxDate(field.maxDate, type),
     autocomplete: boundedText(field.autocomplete, 'Autocomplete value', 100),
     options: undefined,
   }
@@ -134,9 +141,14 @@ export function normalizePublicFormDefinition(definition) {
     }
     const email = boundedText(fallbackContact.email, 'Fallback email', 320)
     const phone = boundedText(fallbackContact.phone, 'Fallback phone', 50)
+    const instructions = boundedText(
+      fallbackContact.instructions,
+      'Fallback instructions',
+      1000
+    )
     if (email && !EMAIL_PATTERN.test(email))
       throw new Error('The public form fallback email is invalid.')
-    normalizedFallback = { email, phone }
+    normalizedFallback = { email, phone, instructions }
   }
 
   const id = boundedText(definition.id, 'Form ID', 100, true)
@@ -183,6 +195,19 @@ function validDate(value) {
   )
 }
 
+function districtToday() {
+  const parts = new Intl.DateTimeFormat('en-US', {
+    timeZone: 'America/Denver',
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+  }).formatToParts(new Date())
+  const values = Object.fromEntries(
+    parts.map(({ type, value }) => [type, value])
+  )
+  return `${values.year}-${values.month}-${values.day}`
+}
+
 export function validatePublicFormValues(definition, sourceValues = {}) {
   const errors = {}
   const values = {}
@@ -220,6 +245,14 @@ export function validatePublicFormValues(definition, sourceValues = {}) {
       if (value && field.type === 'date' && !validDate(value)) {
         fieldErrors.push(`Enter a valid ${field.label.toLowerCase()}.`)
       }
+      if (
+        value &&
+        field.type === 'date' &&
+        field.maxDate === 'today' &&
+        value > districtToday()
+      ) {
+        fieldErrors.push(`${field.label} cannot be in the future.`)
+      }
       if (value && ['select', 'radio'].includes(field.type)) {
         const allowedValues = new Set(
           (field.options || []).map(option => option.value)

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}`)
-  }
-}