Accessibility footer color color contrast ratio (github#24158)

* programmatically group breadcrumbs * forgot to commit li ' ' * adding inline-block * add emphasis color on border to meet accessibility color contrast ratio * update border for footer buttons to meet accessibility color contrast ratio * run prettier
fpehar · Jan 8, 2022 · e37fc2e · e37fc2e
1 parent 76b0b5a
commit e37fc2e
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/components/page-footer/Contribution.tsx b/components/page-footer/Contribution.tsx
@@ -14,7 +14,7 @@ export const Contribution = () => {
     <div className="f5 contribution">
       <h2 className="f4 mb-3">{t`title`}</h2>
       <p className="max-w-xs color-fg-muted mb-3">{t`body`}</p>
-      <a className="btn" href={contributionHref}>
+      <a className="btn color-border-accent-emphasis" href={contributionHref}>
         <GitPullRequestIcon size="small" className="octicon mr-1" />
         {t`button`}
       </a>

diff --git a/components/page-footer/Survey.tsx b/components/page-footer/Survey.tsx
@@ -79,7 +79,10 @@ export const Survey = () => {
             checked={state === ViewState.YES}
           />
           <label
-            className={cx('btn mr-1', state === ViewState.YES && 'color-bg-accent-emphasis')}
+            className={cx(
+              'btn mr-1 color-border-accent-emphasis',
+              state === ViewState.YES && 'color-bg-accent-emphasis'
+            )}
             htmlFor="survey-yes"
           >
             <ThumbsupIcon size={16} className={state === ViewState.YES ? '' : 'color-fg-muted'} />
@@ -95,7 +98,10 @@ export const Survey = () => {
             checked={state === ViewState.NO}
           />
           <label
-            className={cx('btn', state === ViewState.NO && 'color-bg-danger-emphasis')}
+            className={cx(
+              'btn color-border-accent-emphasis',
+              state === ViewState.NO && 'color-bg-danger-emphasis'
+            )}
             htmlFor="survey-no"
           >
             <ThumbsdownIcon size={16} className={state === ViewState.NO ? '' : 'color-fg-muted'} />
@@ -152,7 +158,11 @@ export const Survey = () => {
             >
               Cancel
             </button>
-            <button disabled={isEmailError} type="submit" className="btn btn-sm">
+            <button
+              disabled={isEmailError}
+              type="submit"
+              className="btn btn-sm color-border-accent-emphasis"
+            >
               {t`send`}
             </button>
           </div>