@m00rl0ck/a11y-widget 0.1.0 → 0.2.0

package/src/colorblind-adapt/quiz.js

@@ -0,0 +1,78 @@
+export const questions = [
+  {
+    id: 'q1',
+    promptKey: 'question1',
+    options: [
+      { labelKey: 'optRedGreen', value: 'red-green' },
+      { labelKey: 'optBlueYellow', value: 'blue-yellow' },
+      { labelKey: 'optNone', value: 'none' },
+    ],
+  },
+  {
+    id: 'q2',
+    promptKey: 'question2',
+    options: [
+      { labelKey: 'optNumber74', value: 'number' },
+      { labelKey: 'optNumber21', value: 'number' },
+      { labelKey: 'optNoNumber', value: 'none' },
+    ],
+  },
+  {
+    id: 'q3',
+    promptKey: 'question3',
+    options: [
+      { labelKey: 'optLeft', value: 'left' },
+      { labelKey: 'optRight', value: 'right' },
+      { labelKey: 'optSame', value: 'same' },
+    ],
+  },
+]
+
+export function suggestType(answers) {
+  let deutScore = 0
+  let protScore = 0
+  let tritScore = 0
+  let monoScore = 0
+
+  if (answers.q1 === 'red-green') {
+    protScore += 3
+    deutScore += 3
+  } else if (answers.q1 === 'none') {
+    monoScore += 2
+  }
+
+  if (answers.q2 === 'none') {
+    deutScore += 3
+    protScore += 2
+    monoScore += 2
+  }
+
+  if (answers.q3 === 'same') {
+    monoScore += 3
+    deutScore += 1
+    protScore += 1
+  }
+
+  const scores = [
+    { type: 'monochromacy', score: monoScore },
+    { type: 'deuteranopia', score: deutScore },
+    { type: 'protanopia', score: protScore },
+    { type: 'tritanopia', score: tritScore },
+  ]
+
+  scores.sort((a, b) => b.score - a.score)
+
+  if (scores[0].score === 0) {
+    return { type: 'normal', severity: 'none' }
+  }
+
+  const maxScore = scores[0].score
+  const secondScore = scores[1].score
+  const ratio = secondScore > 0 ? maxScore / secondScore : 99
+
+  let severity = 'mild'
+  if (maxScore >= 7) severity = 'severe'
+  else if (maxScore >= 4) severity = 'moderate'
+
+  return { type: scores[0].type, severity }
+}

package/src/colorblind-adapt/styles.js

@@ -0,0 +1,175 @@
+const styleId = 'colorblind-adapt-styles'
+
+export function injectStyles(type, severity) {
+  removeStyles()
+
+  if (type === 'normal' || !type) return
+
+  const sheet = document.createElement('style')
+  sheet.id = styleId
+  sheet.textContent = buildCSS(type, severity || 'moderate')
+  document.head.appendChild(sheet)
+}
+
+export function removeStyles() {
+  document.getElementById(styleId)?.remove()
+}
+
+function buildCSS(type, severity) {
+  const intensity = severity === 'severe' ? 1 : severity === 'moderate' ? 0.6 : 0.3
+
+  const blocks = [baseOverrides(type, intensity)]
+  return blocks.join('\n')
+}
+
+function baseOverrides(type, intensity) {
+  switch (type) {
+    case 'deuteranopia':
+      return deuteranopiaCSS(intensity)
+    case 'protanopia':
+      return protanopiaCSS(intensity)
+    case 'tritanopia':
+      return tritanopiaCSS(intensity)
+    case 'monochromacy':
+      return monochromacyCSS(intensity)
+    default:
+      return ''
+  }
+}
+
+function deuteranopiaCSS(i) {
+  return `
+    html[data-cba-active] * {
+      --cba-green: hsl(140, ${30 * i}%, 50%);
+      --cba-red: hsl(0, 100%, 40%);
+      --cba-bg: hsl(220, ${5 * i}%, 97%);
+    }
+    html[data-cba-active] a,
+    html[data-cba-active] a:visited {
+      text-decoration: underline;
+      text-decoration-thickness: 2px;
+    }
+    html[data-cba-active] .success,
+    html[data-cba-active] [class*="success"],
+    html[data-cba-active] [class*="valid"],
+    html[data-cba-active] [class*="positive"] {
+      color: #0055aa !important;
+      border-color: #0055aa !important;
+    }
+    html[data-cba-active] .error,
+    html[data-cba-active] [class*="error"],
+    html[data-cba-active] [class*="invalid"],
+    html[data-cba-active] [class*="danger"],
+    html[data-cba-active] [class*="negative"] {
+      color: #cc4400 !important;
+      border-color: #cc4400 !important;
+    }
+    html[data-cba-active] button:not([class*="active"]):not([class*="selected"]):not([class*="primary"]) {
+      border: 2px solid currentColor;
+    }
+  `
+}
+
+function protanopiaCSS(i) {
+  return `
+    html[data-cba-active] * {
+      --cba-red: hsl(10, ${80 * i}%, 40%);
+      --cba-green: hsl(140, ${60 * i}%, 40%);
+      --cba-bg: hsl(220, ${5 * i}%, 97%);
+    }
+    html[data-cba-active] a,
+    html[data-cba-active] a:visited {
+      text-decoration: underline;
+      text-decoration-thickness: 2px;
+    }
+    html[data-cba-active] .success,
+    html[data-cba-active] [class*="success"],
+    html[data-cba-active] [class*="valid"],
+    html[data-cba-active] [class*="positive"] {
+      color: #007744 !important;
+      border-color: #007744 !important;
+    }
+    html[data-cba-active] .error,
+    html[data-cba-active] [class*="error"],
+    html[data-cba-active] [class*="invalid"],
+    html[data-cba-active] [class*="danger"],
+    html[data-cba-active] [class*="negative"] {
+      color: #cc0033 !important;
+      border-color: #cc0033 !important;
+    }
+    html[data-cba-active] button:not([class*="active"]):not([class*="selected"]):not([class*="primary"]) {
+      border: 2px solid currentColor;
+    }
+  `
+}
+
+function tritanopiaCSS(i) {
+  return `
+    html[data-cba-active] * {
+      --cba-blue: hsl(200, ${80 * i}%, 45%);
+      --cba-yellow: hsl(40, ${80 * i}%, 50%);
+      --cba-bg: hsl(220, ${5 * i}%, 97%);
+    }
+    html[data-cba-active] a,
+    html[data-cba-active] a:visited {
+      text-decoration: underline;
+      text-decoration-style: dotted;
+      text-decoration-thickness: 2px;
+    }
+    html[data-cba-active] [class*="blue"],
+    html[data-cba-active] [class*="info"],
+    html[data-cba-active] [class*="primary"] {
+      color: #0066aa !important;
+      border-color: #0066aa !important;
+    }
+    html[data-cba-active] [class*="yellow"],
+    html[data-cba-active] [class*="warning"] {
+      color: #885500 !important;
+      border-color: #885500 !important;
+    }
+    html[data-cba-active] button:not([class*="active"]):not([class*="selected"]):not([class*="primary"]) {
+      border: 2px solid currentColor;
+    }
+  `
+}
+
+function monochromacyCSS(i) {
+  return `
+    html[data-cba-active] {
+      filter: grayscale(${i});
+    }
+    html[data-cba-active] img,
+    html[data-cba-active] video,
+    html[data-cba-active] canvas {
+      filter: grayscale(${i});
+    }
+    html[data-cba-active] a {
+      text-decoration: underline;
+      text-decoration-thickness: 2px;
+      font-weight: 700;
+    }
+    html[data-cba-active] [class*="error"],
+    html[data-cba-active] [class*="danger"],
+    html[data-cba-active] [class*="negative"],
+    html[data-cba-active] [class*="invalid"] {
+      border-left: 4px solid #666 !important;
+      padding-left: 8px !important;
+    }
+    html[data-cba-active] [class*="success"],
+    html[data-cba-active] [class*="valid"],
+    html[data-cba-active] [class*="positive"] {
+      border-left: 4px solid #999 !important;
+      padding-left: 8px !important;
+    }
+    html[data-cba-active] button,
+    html[data-cba-active] .btn,
+    html[data-cba-active] [role="button"] {
+      border: 2px solid currentColor;
+    }
+    html[data-cba-active] button:hover,
+    html[data-cba-active] .btn:hover {
+      outline: 3px solid #ffcc00;
+      outline-offset: 2px;
+    }
+  `
+}

package/src/index.js

@@ -1 +1,3 @@
 export { VisionAccessibilityWidget, default as VisionA11y } from './vision-a11y/index.js'
+
+export { ColorblindAdaptWidget, default as ColorblindAdapt } from './colorblind-adapt/index.js'