@asd20/ui-next 2.23.4 → 2.23.6

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [2.23.6](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.23.5...ui-next-v2.23.6) (2026-09-16)
+
+
+### Bug Fixes
+
+* restore/harden accessibility issue form ([d7ef90c](https://github.com/academydistrict20/asd20-ui-next/commit/d7ef90c76f1675e53528374cf226d05d38af1929))
+
+## [2.23.5](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.23.4...ui-next-v2.23.5) (2026-09-11)
+
+
+### Bug Fixes
+
+* explain directory email validation errors ([#1](https://github.com/academydistrict20/asd20-ui-next/issues/1)) ([070c408](https://github.com/academydistrict20/asd20-ui-next/commit/070c40854c1ec4f8790abfc4077da9c0aa7b44e6))
+
 ## [2.23.4](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.23.3...ui-next-v2.23.4) (2026-09-10)
 
 

package/package.json

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

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

@@ -11,6 +11,8 @@
       <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.
@@ -60,6 +62,7 @@
           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>
@@ -69,18 +72,55 @@
           :validator="validateIssue"
           @validated="validationErrors.issue = $event"
         />
-        <asd20-button
-          label="Submit Issue"
-          :disabled="!isValid || sending"
-          horizontal
-          centered
-          bordered
-          @click="sendAccessibilityIssue"
-        />
-        <asd20-spinner
-          v-if="sending"
-          size="sm"
-        />
+        <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>
@@ -93,8 +133,10 @@ import Asd20TextAreaInput from '../../molecules/Asd20TextAreaInput'
 import Asd20Viewport from '../../atoms/Asd20Viewport'
 import Asd20Spinner from '../../atoms/Asd20Spinner'
 import Asd20Button from '../../atoms/Asd20Button'
-
-// import sendAccessibilityIssue from '../../../helpers/sendAccessibilityIssue.js'
+import Recaptcha from '../../utils/Recaptcha'
+import sendAccessibilityIssue, {
+  resolveAccessibilityIssueEndpoint,
+} from '../../../helpers/sendAccessibilityIssue.js'
 
 export default {
   name: 'Asd20AccessibilityIssueModal',
@@ -105,6 +147,7 @@ export default {
     Asd20Viewport,
     Asd20Spinner,
     Asd20Button,
+    Recaptcha,
   },
   props: {
     open: { type: Boolean, default: false },
@@ -113,6 +156,8 @@ export default {
     return {
       sending: false,
       submissionSuccess: false,
+      feedbackMessage: '',
+      feedbackRole: 'alert',
       form: {
         firstName: '',
         lastName: '',
@@ -121,6 +166,7 @@ export default {
         address: '',
         organization: '',
         issue: '',
+        website: '',
       },
       validationErrors: {
         firstName: [],
@@ -135,13 +181,20 @@ export default {
       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')
       }
-      console.log('Email validation errors:', validationErrors)
       return validationErrors
     },
     validateIssue({ value, validationErrors }) {
@@ -155,25 +208,116 @@ export default {
       }
       return validationErrors
     },
-    async sendAccessibilityIssue() {
-      if (!this.isValid) return
+    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 {
-        // console.log('Sending accessibility issue:', this.form)
-        await this.$sendAccessibilityIssue(this.form)
+        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)
-        alert(
-          'Something went wrong while submitting the form. Please try again later.'
-        )
+        this.showFeedback(this.getServerFailureMessage(e))
       } finally {
         this.sending = false
       }
@@ -193,6 +337,27 @@ export default {
     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) {

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

@@ -12,6 +12,7 @@
       <asd20-text-input
         id="senderName"
         v-model="emailMessage.senderName"
+        :validator="validateSenderName"
         label="Your Full Name"
         required
         @validated="validationErrors.senderName = $event"
@@ -28,6 +29,7 @@
       <asd20-text-input
         id="subject"
         v-model="emailMessage.subject"
+        :validator="validateSubject"
         label="Subject"
         maxlength="200"
         required
@@ -36,8 +38,10 @@
       <asd20-text-area-input
         id="messageBody"
         v-model="emailMessage.messageBody"
+        :validator="validateMessageBody"
         label="Message"
         maxlength="8000"
+        help-text="Please enter at least 5 characters."
         required
         @validated="validationErrors.messageBody = $event"
       />
@@ -46,18 +50,18 @@
         aria-live="polite"
       >
         <Recaptcha
-          v-if="!sending && !sendSucceeded && !sendRejected"
+          v-if="!sending && !sendSucceeded"
           sitekey="6LfidKoUAAAAAFqr3QEbia3jIkecsZyxBYlMvWrX"
           :load-recaptcha-script="true"
           size="invisible"
           @verify="captchaVerified"
         >
           <asd20-button
-            :disabled="!isValid"
             label="Send"
             horizontal
             centered
             bordered
+            @click="validateBeforeSend"
           />
         </Recaptcha>
         <asd20-spinner
@@ -73,6 +77,40 @@
         </p>
       </div>
     </Asd20Viewport>
+
+    <asd20-modal
+      :open="feedbackModalOpen"
+      :title="feedbackTitle"
+      icon="alert"
+      dismissable
+      windowed
+      class="asd20-compose-email-modal__feedback-modal"
+      @dismiss="dismissFeedbackModal"
+    >
+      <div
+        class="asd20-compose-email-modal__feedback"
+        role="alert"
+      >
+        <p>{{ feedbackIntroduction }}</p>
+        <ul v-if="feedbackMessages.length">
+          <li
+            v-for="message in feedbackMessages"
+            :key="message"
+          >
+            {{ message }}
+          </li>
+        </ul>
+      </div>
+      <template #footer>
+        <asd20-button
+          label="Return to form"
+          horizontal
+          centered
+          bordered
+          @click="dismissFeedbackModal"
+        />
+      </template>
+    </asd20-modal>
   </asd20-modal>
 </template>
 
@@ -111,7 +149,10 @@ export default {
     composing: false,
     sending: false,
     sendSucceeded: false,
-    sendRejected: false,
+    feedbackModalOpen: false,
+    feedbackTitle: '',
+    feedbackIntroduction: '',
+    feedbackMessages: [],
     emailMessage: {
       senderName: '',
       senderEmail: '',
@@ -124,16 +165,11 @@ export default {
       return 'Send an Email'
     },
     sendStatusMessage() {
-      return this.sendRejected
-        ? "Your message couldn't be sent via this form."
-        : 'Your message was sent.'
+      return 'Your message was sent.'
     },
     isValid() {
       return (
-        Boolean(this.emailMessage.senderName) &&
-        Boolean(this.emailMessage.senderEmail) &&
-        Boolean(this.emailMessage.subject) &&
-        Boolean(this.emailMessage.messageBody) &&
+        this.getFormValidationMessages().length === 0 &&
         this.validationErrors.senderName.length === 0 &&
         this.validationErrors.senderEmail.length === 0 &&
         this.validationErrors.subject.length === 0 &&
@@ -176,10 +212,57 @@ export default {
       const pattern =
         /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
       const regex = RegExp(pattern)
-      if (!regex.test(value))
+      if (!regex.test(String(value || '').trim()))
         validationErrors.push('A valid email address is required')
       return validationErrors
     },
+    validateSenderName({ value, validationErrors }) {
+      if (!String(value || '').trim())
+        validationErrors.push('Your full name is required.')
+      return validationErrors
+    },
+    validateSubject({ value, validationErrors }) {
+      if (!String(value || '').trim())
+        validationErrors.push('A subject is required.')
+      return validationErrors
+    },
+    validateMessageBody({ value, validationErrors }) {
+      const message = String(value || '').trim()
+      if (message && message.length < 5)
+        validationErrors.push('The message must be at least 5 characters.')
+      return validationErrors
+    },
+    getFormValidationMessages() {
+      const messages = []
+      const senderName = String(this.emailMessage.senderName || '').trim()
+      const senderEmail = String(this.emailMessage.senderEmail || '').trim()
+      const subject = String(this.emailMessage.subject || '').trim()
+      const messageBody = String(this.emailMessage.messageBody || '').trim()
+      const emailPattern =
+        /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
+
+      if (!senderName) messages.push('Your full name is required.')
+      if (!senderEmail) messages.push('Your email address is required.')
+      else if (!emailPattern.test(senderEmail))
+        messages.push('Enter a valid email address.')
+      if (!subject) messages.push('A subject is required.')
+      if (!messageBody) messages.push('A message is required.')
+      else if (messageBody.length < 5)
+        messages.push('The message must be at least 5 characters.')
+
+      return messages
+    },
+    validateBeforeSend(event) {
+      const messages = this.getFormValidationMessages()
+      if (!messages.length) return
+
+      event?.preventDefault?.()
+      this.showFeedback(
+        'Please check your message',
+        'Correct the following fields before sending:',
+        messages
+      )
+    },
     composeEmail() {
       if (!this.recipientId) return
       this.emailMessage = {
@@ -198,7 +281,16 @@ export default {
     resetSendState() {
       this.sending = false
       this.sendSucceeded = false
-      this.sendRejected = false
+      this.dismissFeedbackModal()
+    },
+    dismissFeedbackModal() {
+      this.feedbackModalOpen = false
+    },
+    showFeedback(title, introduction, messages = []) {
+      this.feedbackTitle = title
+      this.feedbackIntroduction = introduction
+      this.feedbackMessages = messages
+      this.feedbackModalOpen = true
     },
     waitForSuccessMessage() {
       return new Promise(resolve => {
@@ -237,8 +329,64 @@ export default {
         this.getSendEmailResponseData(error)?.code === 'moderation_rejected'
       )
     },
+    getServerValidationMessages(error) {
+      if (this.getSendEmailErrorStatus(error) !== 400) return []
+
+      const errorMessage = this.getSendEmailResponseData(error)?.error
+      const messages = {
+        'senderName is required.': 'Your full name is required.',
+        'senderEmail must be a valid email address.':
+          'Enter a valid email address.',
+        'messageBody is required.': 'A message is required.',
+        'messageBody is too short.':
+          'The message must be at least 5 characters.',
+        'messageBody is too long.':
+          'The message must be 8,000 characters or fewer.',
+        'Recipient was not found or does not have a public email address.':
+          'The selected recipient is no longer available for public email.',
+      }
+
+      return [
+        messages[errorMessage] ||
+          'Some information was not accepted. Review each field and try again.',
+      ]
+    },
+    showSendFailure(error) {
+      const validationMessages = this.getServerValidationMessages(error)
+      if (validationMessages.length) {
+        this.showFeedback(
+          'Please check your message',
+          'Correct the following fields before sending:',
+          validationMessages
+        )
+        return
+      }
+
+      if (this.isModerationRejection(error)) {
+        this.showFeedback(
+          'Message not sent',
+          "Your message couldn't be sent through this form.",
+          []
+        )
+        return
+      }
+
+      this.showFeedback(
+        'Email not sent',
+        this.getSendEmailFailureMessage(error),
+        []
+      )
+    },
     async sendEmail(captchaToken = '') {
-      if (!this.isValid) return
+      const validationMessages = this.getFormValidationMessages()
+      if (validationMessages.length) {
+        this.showFeedback(
+          'Please check your message',
+          'Correct the following fields before sending:',
+          validationMessages
+        )
+        return
+      }
 
       const endpoint = this.resolveSendEmailEndpoint()
       const sendEmailClient =
@@ -247,8 +395,10 @@ export default {
 
       if (!sendEmailClient) {
         console.error('Send email endpoint is not configured.')
-        alert(
-          'Email sending is not configured for this environment. Please try again later.'
+        this.showFeedback(
+          'Email not sent',
+          'Email sending is not configured for this environment. Please try again later.',
+          []
         )
         return
       }
@@ -269,14 +419,7 @@ export default {
       } catch (error) {
         this.sendSucceeded = false
         console.error('Email send failed:', error?.message || error)
-        if (this.isModerationRejection(error)) {
-          this.sending = false
-          this.sendRejected = true
-          await this.waitForSuccessMessage()
-          this.$emit('dismiss')
-          return
-        }
-        alert(this.getSendEmailFailureMessage(error))
+        this.showSendFailure(error)
       } finally {
         this.sending = false
       }
@@ -305,6 +448,22 @@ export default {
     margin: 0;
     text-align: center;
   }
+
+  &__feedback {
+    padding: space(1);
+
+    p {
+      margin-top: 0;
+    }
+
+    ul {
+      margin-bottom: 0;
+    }
+  }
+
+  &__feedback-modal :deep(.asd20-modal__footer) {
+    padding: space(0.5);
+  }
 }
 
 @media (min-width: 1024px) {

package/src/components/utils/Recaptcha.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="asd20-recaptcha"
-    @click.capture="handleClick"
+    @click="handleClick"
   >
     <slot />
     <div

package/src/helpers/sendAccessibilityIssue.js

@@ -1,71 +1,64 @@
 import axios from 'axios'
 
-import { resolveRuntimeConfigValue } from './runtimeConfig'
+import { normalizeBaseUrl, resolveRuntimeConfigValue } from './runtimeConfig'
+
+const ACCESSIBILITY_ISSUE_ROUTE = '/api/accessibility/issues'
 
 function issueIsValid(issue) {
-  return !!issue.firstName && !!issue.lastName && !!issue.email && !!issue.issue
+  return Boolean(
+    issue &&
+      String(issue.firstName || '').trim() &&
+      String(issue.lastName || '').trim() &&
+      String(issue.email || '').trim() &&
+      String(issue.issue || '').trim()
+  )
 }
 
-export default async function sendAccessibilityIssue(
-  issue,
-  endpoint,
-  apiKey,
-  authCode,
-  options = {}
-) {
-  if (!issueIsValid(issue)) {
-    throw new Error('The issue object is incomplete or invalid.')
-  }
+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 resolvedOptions =
-    options && typeof options === 'object' && !Array.isArray(options)
-      ? options
-      : {
-          categoryId: options,
-        }
-  const categoryId = resolveRuntimeConfigValue({
-    explicitValue: resolvedOptions.categoryId,
-    runtimeConfig: resolvedOptions.runtimeConfig,
-    runtimeConfigKeys: ['happyFoxCategoryId'],
-    envKeys: ['HAPPYFOX_CATEGORY_ID'],
+  const functionsEndpoint = resolveRuntimeConfigValue({
+    runtimeConfig,
+    runtimeConfigKeys: ['functionsEndpoint'],
+    envKeys: ['FUNCTIONS_ENDPOINT'],
   })
-  if (!categoryId) {
-    throw new Error('happyFoxCategoryId is required to send an accessibility issue.')
+  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.')
   }
 
-  const payload = {
-    name: `${issue.firstName} ${issue.lastName}`,
-    email: issue.email,
-    phone: issue.phone || '',
-    subject: 'Accessibility Issue Reported via External ASD20 Website',
-    html: `
-      <p><strong>Issue Details:</strong></p>
-      <p>${issue.issue}</p>
-      <p><strong>Mailing Address:</strong> ${issue.address || 'Not provided'}</p>
-      <p><strong>Organization:</strong> ${issue.organization || 'Not provided'}</p>
-    `,
-    category: Number(categoryId),
+  if (!endpoint) {
+    throw new Error('The accessibility issue endpoint is not configured.')
   }
 
   try {
-    const response = await axios.post(endpoint, payload, {
-      headers: {
-        Authorization: `Basic ${btoa(`${apiKey}:${authCode}`)}`,
-        'Content-Type': 'application/json',
-        Accept: 'application/json'
-      }
-    })
-
+    const response = await axios.post(endpoint, issue)
     return response.data
   } catch (error) {
     if (error.response) {
-      throw new Error(
-        `HappyFox error ${error.response.status}: ${JSON.stringify(
+      const submissionError = new Error(
+        `Accessibility submission error ${error.response.status}: ${JSON.stringify(
           error.response.data
         )}`
       )
-    } else {
-      throw new Error(`Request error: ${error.message}`)
+      submissionError.response = error.response
+      throw submissionError
     }
+
+    throw new Error(`Accessibility submission request error: ${error.message}`)
   }
 }