@asd20/ui-next 2.23.5 → 2.23.6

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # 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)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asd20/ui-next",
-  "version": "2.23.5",
+  "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/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}`)
   }
 }