A11y 2024 survey (#52012)

github · Aug 15, 2024 · bd25429 · bd25429
1 parent 36316dc
commit bd25429
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 37 deletions.
diff --git a/data/ui.yml b/data/ui.yml
@@ -63,7 +63,6 @@ survey:
   additional_feedback: Can you tell us more about your rating? (Optional)
   optional: Optional
   required: Required
-  email_placeholder: 'Example: [email protected]'
   email_label: Leave your email if we can contact you. (Optional)
   email_validation: Please enter a valid email address
   send: Send

diff --git a/src/events/components/Survey.module.scss b/src/events/components/Survey.module.scss
@@ -3,13 +3,8 @@
   margin: -0.4em;
 }
 
-.customRadio + label:before {
-  content: "X";
-  color: transparent;
-  margin: 0px -33px 0px -17px;
-  padding: 7px 20px 7px 20px;
-}
-
-.customRadio:focus + label:before {
-  outline: 1px auto -webkit-focus-ring-color;
+.customRadio:focus + label {
+  outline: 2px auto Highlight; // for firefox
+  outline: 2px auto -webkit-focus-ring-color;
+  // var(--fgColor-accent, var(--color-accent-fg))
 }
diff --git a/src/events/components/Survey.tsx b/src/events/components/Survey.tsx
@@ -70,7 +70,7 @@ export const Survey = () => {
   // readers won't read the error message) so we need to do manual validation
   // ourselves.
   useEffect(() => {
-    const emailRegex = /[^@\s.][^@\s]*@\[?[a-z0-9.-]+\]?/i
+    const emailRegex = /[^@\s.][^@\s]*@\[?[a-z0-9.-]+\]?\.\[?[a-z0-9.-]+\]?/i
     if (!email.trim() || emailRegex.test(email)) {
       setIsEmailError(false)
     } else {
@@ -120,8 +120,8 @@ export const Survey = () => {
         onChange={(event) => setToken(event.target.value)}
       />
 
-      {voteState === null && (
-        <div className="radio-group mb-2" role="radiogroup" aria-labelledby="survey-title">
+      {state !== ViewState.END && (
+        <div className="mb-2" role="radiogroup" aria-labelledby="survey-title">
           <input
             className={cx(styles.visuallyHidden, styles.customRadio)}
             id="survey-yes"
@@ -134,16 +134,16 @@ export const Survey = () => {
           />
           <label
             className={cx(
-              'btn mr-1 color-border-accent-emphasis',
-              voteState === VoteState.YES && 'color-bg-accent-emphasis',
+              'btn mr-1',
+              voteState === VoteState.YES && 'color-fg-on-emphasis color-bg-success-emphasis',
             )}
             htmlFor="survey-yes"
           >
-            <span className="mr-2">{t`yes`}</span>
             <ThumbsupIcon
               size={16}
-              className={voteState === VoteState.YES ? '' : 'color-fg-muted'}
-            />
+              className={voteState === VoteState.YES ? 'color-fg-on-emphasis' : 'color-fg-muted'}
+            />{' '}
+            {t`yes`}
           </label>
           <input
             className={cx(styles.visuallyHidden, styles.customRadio)}
@@ -157,16 +157,16 @@ export const Survey = () => {
           />
           <label
             className={cx(
-              'btn color-border-accent-emphasis',
-              voteState === VoteState.NO && 'color-bg-danger-emphasis',
+              'btn',
+              voteState === VoteState.NO && 'color-fg-on-emphasis color-bg-danger-emphasis',
             )}
             htmlFor="survey-no"
           >
-            <span className="mr-2">{t`no`}</span>
             <ThumbsdownIcon
               size={16}
-              className={voteState === VoteState.NO ? '' : 'color-fg-muted'}
-            />
+              className={voteState === VoteState.NO ? 'color-fg-on-emphasis' : 'color-fg-muted'}
+            />{' '}
+            {t`no`}
           </label>
         </div>
       )}
@@ -194,23 +194,21 @@ export const Survey = () => {
             ></textarea>
           </p>
 
-          <div className={cx('form-group', isEmailError ? 'warn' : '')}>
+          <div className={cx('form-group', isEmailError && email.trim().length > 3 ? 'warn' : '')}>
             <label className="d-block mb-1 f6" htmlFor="survey-email">
               {t`email_label`}
-              {/* <p className="text-normal color-fg-muted">{t`email_placeholder`}</p> */}
             </label>
             <input
               type="email"
               className="form-control input-sm width-full"
               name="survey-email"
               id="survey-email"
-              placeholder={t`email_placeholder`}
               value={email}
               onChange={(event) => setEmail(event.target.value)}
               aria-invalid={isEmailError}
               {...(isEmailError ? { 'aria-describedby': 'email-input-validation' } : {})}
             />
-            {isEmailError && (
+            {isEmailError && email.trim().length > 3 && (
               <p className="note warning" id="email-input-validation">
                 {t`email_validation`}
               </p>
@@ -231,11 +229,7 @@ export const Survey = () => {
             >
               {t`cancel`}
             </button>
-            <button
-              disabled={isEmailError}
-              type="submit"
-              className="btn btn-sm color-border-accent-emphasis"
-            >
+            <button disabled={isEmailError} type="submit" className="btn btn-sm">
               {t`send`}
             </button>
           </div>

diff --git a/src/fixtures/fixtures/data/ui.yml b/src/fixtures/fixtures/data/ui.yml
@@ -63,7 +63,6 @@ survey:
   additional_feedback: Can you tell us more about your rating? (Optional)
   optional: Optional
   required: Required
-  email_placeholder: 'Example: [email protected]'
   email_label: Leave your email if we can contact you. (Optional)
   email_validation: Please enter a valid email address
   send: Send

diff --git a/src/fixtures/fixtures/translations/ja-jp/data/ui.yml b/src/fixtures/fixtures/translations/ja-jp/data/ui.yml
@@ -55,7 +55,6 @@ survey:
   comment_no_label: 改善の方法をお知らせください
   optional: オプション
   required: 必須
-  email_placeholder: [email protected]
   email_label: さらにお尋ねするためにご連絡してもよろしければ、メール アドレスを入力してください
   email_validation: 有効な電子メール アドレスを入力してください
   send: Send

diff --git a/src/fixtures/tests/playwright-rendering.spec.ts b/src/fixtures/tests/playwright-rendering.spec.ts
@@ -523,8 +523,8 @@ test.describe('survey', () => {
 
     await page.locator('[for=survey-comment]').click()
     await page.locator('[for=survey-comment]').fill('This is a comment')
-    await page.getByPlaceholder('email@example.com').click()
-    await page.getByPlaceholder('email@example.com').fill('[email protected]')
+    await page.locator('[name=survey-email]').click()
+    await page.locator('[name=survey-email]').fill('[email protected]')
     await page.getByRole('button', { name: 'Send' }).click()
     // One for the page view event, one for the thumbs up click, one for
     // the submission.

diff --git a/src/frame/components/page-footer/Contribution.tsx b/src/frame/components/page-footer/Contribution.tsx
@@ -15,7 +15,7 @@ export const Contribution = () => {
     <div className="f5 contribution">
       <h3 className="f4 mb-3">{t`title`}</h3>
       <p className="max-w-xs color-fg-muted mb-3">{t`body`}</p>
-      <a className="btn color-border-accent-emphasis" href={contributionHref}>
+      <a className="btn" href={contributionHref}>
         <GitPullRequestIcon size="small" className="octicon mr-1" />
         {t`button`}
       </a>