@m00rl0ck/a11y-widget 0.1.0 → 0.2.0

package/src/colorblind-adapt/index.js

@@ -0,0 +1,575 @@
+import { locales, detectLang } from './locales.js'
+import { questions, suggestType } from './quiz.js'
+import { injectStyles, removeStyles } from './styles.js'
+
+const storageKey = 'colorblind-adapt-settings'
+
+class ColorblindAdaptWidget extends HTMLElement {
+  static observedAttributes = ['lang']
+
+  constructor() {
+    super()
+    this.attachShadow({ mode: 'open' })
+    this._open = false
+    this._tab = 'test'
+    this._quizAnswers = {}
+    this._quizStep = 0
+    this._quizDone = false
+    this._quizResult = null
+    this._activeType = null
+    this._activeSeverity = 'moderate'
+  }
+
+  get lang() {
+    return this.getAttribute('lang') || detectLang()
+  }
+
+  t(key) {
+    return (locales[this.lang] || locales.en)[key] || key
+  }
+
+  connectedCallback() {
+    this._loadState()
+    this._render()
+    this._applyAdaptation()
+  }
+
+  attributeChangedCallback() {
+    if (this.shadowRoot.innerHTML) this._render()
+  }
+
+  _loadState() {
+    try {
+      const saved = JSON.parse(localStorage.getItem(storageKey))
+      if (saved && saved.type) {
+        this._activeType = saved.type
+        this._activeSeverity = saved.severity || 'moderate'
+      }
+    } catch {}
+  }
+
+  _saveState() {
+    if (this._activeType) {
+      localStorage.setItem(storageKey, JSON.stringify({
+        type: this._activeType,
+        severity: this._activeSeverity,
+      }))
+    } else {
+      localStorage.removeItem(storageKey)
+    }
+  }
+
+  _setOpen(val) {
+    this._open = val
+    this._render()
+  }
+
+  _switchTab(tab) {
+    this._tab = tab
+    if (tab === 'test') {
+      this._quizAnswers = {}
+      this._quizStep = 0
+      this._quizDone = false
+      this._quizResult = null
+    }
+    this._render()
+  }
+
+  _answerQuestion(value) {
+    const q = questions[this._quizStep]
+    if (!q) return
+    this._quizAnswers[q.id] = value
+    if (this._quizStep < questions.length - 1) {
+      this._quizStep++
+      this._render()
+    } else {
+      this._quizResult = suggestType(this._quizAnswers)
+      this._quizDone = true
+      this._activeType = this._quizResult.type
+      this._activeSeverity = this._quizResult.severity
+      this._saveState()
+      this._applyAdaptation()
+      this._render()
+    }
+  }
+
+  _selectType(type) {
+    this._activeType = type
+    this._saveState()
+    this._applyAdaptation()
+    this._render()
+  }
+
+  _setSeverity(sev) {
+    this._activeSeverity = sev
+    if (this._activeType) {
+      this._saveState()
+      this._applyAdaptation()
+    }
+    this._render()
+  }
+
+  _reset() {
+    this._activeType = null
+    this._activeSeverity = 'moderate'
+    this._quizAnswers = {}
+    this._quizStep = 0
+    this._quizDone = false
+    this._quizResult = null
+    this._tab = 'test'
+    localStorage.removeItem(storageKey)
+    removeStyles()
+    document.documentElement.removeAttribute('data-cba-active')
+    this._render()
+  }
+
+  _applyAdaptation() {
+    document.documentElement.removeAttribute('data-cba-active')
+    removeStyles()
+    if (this._activeType && this._activeType !== 'normal') {
+      document.documentElement.setAttribute('data-cba-active', this._activeType)
+      injectStyles(this._activeType, this._activeSeverity)
+    }
+  }
+
+  _render() {
+    const t = (k) => this.t(k)
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          position: fixed;
+          right: 20px;
+          bottom: 80px;
+          z-index: 99999;
+          font-family: Arial, Helvetica, sans-serif;
+        }
+        * { box-sizing: border-box; }
+        .widget {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-end;
+          gap: 10px;
+        }
+        .toggle {
+          display: inline-flex;
+          align-items: center;
+          gap: 8px;
+          border: 2px solid #111;
+          border-radius: 999px;
+          padding: 12px 16px;
+          background: #fff;
+          color: #111;
+          font-size: 15px;
+          font-weight: 700;
+          cursor: pointer;
+          box-shadow: 0 10px 30px rgba(0,0,0,.18);
+          transition: transform 160ms ease, box-shadow 160ms ease;
+        }
+        .toggle:hover {
+          transform: translateY(-1px);
+          box-shadow: 0 14px 34px rgba(0,0,0,.22);
+        }
+        .toggle:focus-visible,
+        .control:focus-visible,
+        .tab:focus-visible {
+          outline: 3px solid #ffcc00;
+          outline-offset: 3px;
+        }
+        .panel {
+          width: min(360px, calc(100vw - 32px));
+          padding: 18px;
+          border: 2px solid #111;
+          border-radius: 18px;
+          background: #fff;
+          color: #111;
+          box-shadow: 0 18px 50px rgba(0,0,0,.25);
+        }
+        .panel[hidden] { display: none; }
+        .header {
+          display: flex;
+          align-items: flex-start;
+          justify-content: space-between;
+          gap: 12px;
+          margin-bottom: 14px;
+        }
+        .title {
+          margin: 0;
+          font-size: 18px;
+          line-height: 1.25;
+          font-weight: 800;
+        }
+        .subtitle {
+          margin: 4px 0 0;
+          font-size: 13px;
+          line-height: 1.4;
+          color: #555;
+        }
+        .close {
+          width: 32px; height: 32px;
+          border: 1px solid #ddd;
+          border-radius: 50%;
+          background: #f7f7f7;
+          cursor: pointer;
+          font-size: 20px;
+          line-height: 1;
+        }
+        .tabs {
+          display: flex;
+          gap: 4px;
+          margin-bottom: 14px;
+          background: #f0f0f0;
+          border-radius: 10px;
+          padding: 3px;
+        }
+        .tab {
+          flex: 1;
+          padding: 8px;
+          border: none;
+          border-radius: 8px;
+          background: transparent;
+          color: #555;
+          font-size: 13px;
+          font-weight: 700;
+          cursor: pointer;
+          transition: background 140ms, color 140ms;
+        }
+        .tab.active {
+          background: #fff;
+          color: #111;
+          box-shadow: 0 1px 3px rgba(0,0,0,.1);
+        }
+        .option-grid {
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+        }
+        .option {
+          display: block;
+          width: 100%;
+          padding: 12px 14px;
+          border: 2px solid #d6d6d6;
+          border-radius: 12px;
+          background: #fafafa;
+          color: #111;
+          font-size: 14px;
+          font-weight: 700;
+          cursor: pointer;
+          text-align: left;
+          transition: border-color 140ms ease, background 140ms ease;
+        }
+        .option:hover {
+          border-color: #111;
+          background: #f0f0f0;
+        }
+        .option.active {
+          border-color: #111;
+          background: #111;
+          color: #fff;
+        }
+        .step-indicator {
+          font-size: 12px;
+          color: #888;
+          margin-bottom: 12px;
+        }
+        .result-card {
+          padding: 16px;
+          border: 2px solid #111;
+          border-radius: 12px;
+          background: #fafafa;
+          margin-bottom: 12px;
+        }
+        .result-title {
+          font-weight: 800;
+          font-size: 16px;
+          margin-bottom: 6px;
+        }
+        .result-desc {
+          font-size: 13px;
+          line-height: 1.5;
+          color: #333;
+        }
+        .result-type {
+          display: inline-block;
+          padding: 3px 10px;
+          border-radius: 999px;
+          background: #111;
+          color: #fff;
+          font-size: 12px;
+          font-weight: 700;
+          margin-top: 8px;
+        }
+        .select-group {
+          margin-bottom: 12px;
+        }
+        .select-label {
+          display: block;
+          font-weight: 700;
+          font-size: 13px;
+          margin-bottom: 6px;
+          color: #333;
+        }
+        .select-input {
+          width: 100%;
+          padding: 10px 12px;
+          border: 2px solid #d6d6d6;
+          border-radius: 10px;
+          font-size: 14px;
+          font-weight: 600;
+          background: #fafafa;
+          color: #111;
+          cursor: pointer;
+        }
+        .select-input:focus {
+          border-color: #111;
+          outline: none;
+        }
+        .severity-group {
+          display: flex;
+          gap: 6px;
+          margin-top: 8px;
+        }
+        .severity-btn {
+          flex: 1;
+          padding: 8px;
+          border: 2px solid #d6d6d6;
+          border-radius: 8px;
+          background: #fafafa;
+          color: #555;
+          font-size: 12px;
+          font-weight: 700;
+          cursor: pointer;
+          text-align: center;
+          transition: all 140ms;
+        }
+        .severity-btn.active {
+          border-color: #111;
+          background: #111;
+          color: #fff;
+        }
+        .action-row {
+          display: flex;
+          gap: 8px;
+          margin-top: 14px;
+        }
+        .btn-primary {
+          flex: 1;
+          padding: 10px;
+          border: 2px solid #111;
+          border-radius: 10px;
+          background: #111;
+          color: #fff;
+          font-weight: 700;
+          font-size: 13px;
+          cursor: pointer;
+        }
+        .btn-reset {
+          flex: 1;
+          padding: 10px;
+          border: 2px solid #f0b4b4;
+          border-radius: 10px;
+          background: #fff4f4;
+          color: #8a0000;
+          font-weight: 700;
+          font-size: 13px;
+          cursor: pointer;
+        }
+        .btn-reset:hover {
+          background: #ffe0e0;
+        }
+        .tag {
+          display: inline-block;
+          padding: 2px 8px;
+          border-radius: 6px;
+          font-size: 11px;
+          font-weight: 700;
+          margin-left: 8px;
+        }
+        .tag-active {
+          background: #111;
+          color: #fff;
+        }
+        @media (max-width: 520px) {
+          :host {
+            right: 12px !important;
+            bottom: 70px !important;
+          }
+          .toggle { padding: 11px 14px; font-size: 14px; }
+        }
+      </style>
+
+      <div class="widget">
+        <section class="panel" ${this._open ? '' : 'hidden'} aria-label="${t('panelTitle')}">
+          <div class="header">
+            <div>
+              <h2 class="title">
+                ${t('panelTitle')}
+                ${this._activeType && this._activeType !== 'normal' ? `<span class="tag tag-active">${this._activeType}</span>` : ''}
+              </h2>
+              <p class="subtitle">${t('panelSubtitle')}</p>
+            </div>
+            <button class="close" type="button" aria-label="${t('closeLabel')}">×</button>
+          </div>
+
+          ${this._renderBody()}
+
+          ${this._activeType && this._activeType !== 'normal' ? `
+            <div class="action-row">
+              <button class="btn-reset" type="button">${t('reset')}</button>
+            </div>
+          ` : ''}
+        </section>
+
+        <button
+          class="toggle"
+          type="button"
+          aria-expanded="${this._open ? 'true' : 'false'}"
+          aria-label="${t('toggleLabel')}"
+        >
+          <span class="icon" aria-hidden="true">🔵</span>
+          <span>${t('toggleText')}</span>
+          ${this._activeType && this._activeType !== 'normal' ? ` ✓` : ''}
+        </button>
+      </div>
+    `
+
+    this.shadowRoot.querySelector('.toggle').addEventListener('click', () => this._setOpen(!this._open))
+    this.shadowRoot.querySelector('.close').addEventListener('click', () => this._setOpen(false))
+
+    const panel = this.shadowRoot.querySelector('.panel')
+    if (panel) {
+      panel.querySelectorAll('button[data-answer]').forEach((btn) => {
+        btn.addEventListener('click', () => this._answerQuestion(btn.dataset.answer))
+      })
+    }
+
+    if (this._open && this._tab === 'test' && !this._quizDone) {
+      this.shadowRoot.querySelectorAll('.tab').forEach((el) => {
+        el.addEventListener('click', () => this._switchTab(el.dataset.tab))
+      })
+    }
+
+    if (this._open && this._tab === 'manual') {
+      const select = this.shadowRoot.querySelector('#cba-type-select')
+      if (select) {
+        select.addEventListener('change', () => this._selectType(select.value))
+
+        const severityBtns = this.shadowRoot.querySelectorAll('[data-severity]')
+        severityBtns.forEach((btn) => {
+          btn.addEventListener('click', () => this._setSeverity(btn.dataset.severity))
+        })
+      }
+
+      const resetBtn = this.shadowRoot.querySelector('.btn-reset')
+      if (resetBtn) resetBtn.addEventListener('click', () => this._reset())
+    }
+
+    if (this._open && this._quizDone) {
+      const retakeBtn = this.shadowRoot.querySelector('.btn-reset')
+      if (retakeBtn) retakeBtn.addEventListener('click', () => this._reset())
+    }
+  }
+
+  _renderBody() {
+    const t = (k) => this.t(k)
+
+    if (this._activeType && this._activeType !== 'normal') {
+      return this._renderActiveState(t)
+    }
+
+    if (this._quizDone) {
+      return this._renderResult(t)
+    }
+
+    return `
+      <div class="tabs">
+        <button class="tab ${this._tab === 'test' ? 'active' : ''}" data-tab="test" type="button">${t('testTab')}</button>
+        <button class="tab ${this._tab === 'manual' ? 'active' : ''}" data-tab="manual" type="button">${t('manualTab')}</button>
+      </div>
+      ${this._tab === 'test' ? this._renderQuiz(t) : this._renderManual(t)}
+    `
+  }
+
+  _renderQuiz(t) {
+    const q = questions[this._quizStep]
+    if (!q) return ''
+
+    return `
+      <div class="step-indicator">${t('question' + (this._quizStep + 1))} (${this._quizStep + 1}/${questions.length})</div>
+      <p style="font-weight:700;font-size:15px;margin:0 0 12px">${t(q.promptKey)}</p>
+      <div class="option-grid">
+        ${q.options.map((opt, i) => `
+          <button class="option" data-answer="${opt.value}" type="button">
+            ${t(opt.labelKey)}
+          </button>
+        `).join('')}
+      </div>
+    `
+  }
+
+  _renderManual(t) {
+    const types = ['deuteranopia', 'protanopia', 'tritanopia', 'monochromacy']
+    const severities = ['mild', 'moderate', 'severe']
+
+    return `
+      <div class="select-group">
+        <label class="select-label" for="cba-type-select">${t('selectType')}</label>
+        <select class="select-input" id="cba-type-select">
+          <option value="">— ${t('selectType')} —</option>
+          ${types.map((type) => `
+            <option value="${type}" ${this._activeType === type ? 'selected' : ''}>
+              ${t(type)}
+            </option>
+          `).join('')}
+        </select>
+      </div>
+      ${this._activeType ? `
+        <div class="select-group">
+          <label class="select-label">${t('severity')}</label>
+          <div class="severity-group">
+            ${severities.map((sev) => `
+              <button class="severity-btn ${this._activeSeverity === sev ? 'active' : ''}" data-severity="${sev}" type="button">
+                ${t(sev)}
+              </button>
+            `).join('')}
+          </div>
+        </div>
+      ` : ''}
+    `
+  }
+
+  _renderResult(t) {
+    const r = this._quizResult
+    if (!r) return ''
+
+    const typeKey = 'type' + r.type.charAt(0).toUpperCase() + r.type.slice(1)
+
+    return `
+      <div class="result-card">
+        <div class="result-title">${t('resultTitle')}</div>
+        <div class="result-desc">
+          ${t('resultDesc').replace('{type}', t(typeKey))}
+        </div>
+        <span class="result-type">${t(r.severity)} · ${t(typeKey)}</span>
+      </div>
+      <button class="btn-reset" type="button">${t('reset')}</button>
+    `
+  }
+
+  _renderActiveState(t) {
+    const r = this._quizResult
+    return `
+      <div class="result-card">
+        <div class="result-title">${t('resultTitle')}</div>
+        <span class="result-type">${this._activeType} · ${t(this._activeSeverity)}</span>
+      </div>
+    `
+  }
+}
+
+export { ColorblindAdaptWidget }
+export default ColorblindAdaptWidget
+
+if (!customElements.get('colorblind-adapt-widget')) {
+  customElements.define('colorblind-adapt-widget', ColorblindAdaptWidget)
+}

package/src/colorblind-adapt/locales.js

@@ -0,0 +1,131 @@
+export const locales = {
+  uk: {
+    toggleText: 'Дальтонізм',
+    toggleLabel: 'Налаштувати сайт для людей із дальтонізмом',
+    closeLabel: 'Закрити панель',
+    panelTitle: 'Налаштування для дальтонізму',
+    panelSubtitle: 'Пройдіть швидкий тест або оберіть свій тип зору.',
+    testTab: 'Тест',
+    manualTab: 'Вручну',
+    startTest: 'Розпочати тест',
+    nextQuestion: 'Далі',
+    question1: 'Який колір ви бачите в центрі?',
+    question2: 'Яке число бачите?',
+    question3: 'Який квадрат яскравіший?',
+    optRedGreen: 'Червоний / Зелений',
+    optBlueYellow: 'Синій / Жовтий',
+    optNone: 'Не бачу різниці',
+    optNumber74: '74',
+    optNumber21: '21',
+    optNoNumber: 'Не бачу числа',
+    optLeft: 'Лівий',
+    optRight: 'Правий',
+    optSame: 'Однакові',
+    resultTitle: 'Результат тесту',
+    resultDesc: 'Схоже, у вас {type}. Сайт підлаштовано.',
+    typeNormal: 'нормальний зір',
+    typeDeuteranopia: 'дальтонізм на зелений (deuteranopia)',
+    typeProtanopia: 'дальтонізм на червоний (protanopia)',
+    typeTritanopia: 'дальтонізм на синій (tritanopia)',
+    typeMonochromacy: 'повна відсутність кольорового зору (monochromacy)',
+    selectType: 'Оберіть ваш тип зору:',
+    deuteranopia: 'Не розрізняю зелений',
+    protanopia: 'Не розрізняю червоний',
+    tritanopia: 'Не розрізняю синій',
+    monochromacy: 'Чорно-білий зір',
+    apply: 'Застосувати',
+    reset: 'Скинути налаштування',
+    severity: 'Ступінь:',
+    mild: 'Легка',
+    moderate: 'Помірна',
+    severe: 'Сильна',
+  },
+  en: {
+    toggleText: 'Colorblind',
+    toggleLabel: 'Adapt website for colorblind users',
+    closeLabel: 'Close panel',
+    panelTitle: 'Colorblind Settings',
+    panelSubtitle: 'Take a quick test or select your vision type.',
+    testTab: 'Test',
+    manualTab: 'Manual',
+    startTest: 'Start test',
+    nextQuestion: 'Next',
+    question1: 'What color do you see in the center?',
+    question2: 'What number do you see?',
+    question3: 'Which square is brighter?',
+    optRedGreen: 'Red / Green',
+    optBlueYellow: 'Blue / Yellow',
+    optNone: 'No difference',
+    optNumber74: '74',
+    optNumber21: '21',
+    optNoNumber: 'No number',
+    optLeft: 'Left',
+    optRight: 'Right',
+    optSame: 'Same',
+    resultTitle: 'Test result',
+    resultDesc: 'It appears you have {type}. The site has been adapted.',
+    typeNormal: 'normal vision',
+    typeDeuteranopia: 'green-blindness (deuteranopia)',
+    typeProtanopia: 'red-blindness (protanopia)',
+    typeTritanopia: 'blue-blindness (tritanopia)',
+    typeMonochromacy: 'complete color blindness (monochromacy)',
+    selectType: 'Select your vision type:',
+    deuteranopia: 'Cannot distinguish green',
+    protanopia: 'Cannot distinguish red',
+    tritanopia: 'Cannot distinguish blue',
+    monochromacy: 'Black and white vision',
+    apply: 'Apply',
+    reset: 'Reset settings',
+    severity: 'Severity:',
+    mild: 'Mild',
+    moderate: 'Moderate',
+    severe: 'Severe',
+  },
+  de: {
+    toggleText: 'Farbenblindheit',
+    toggleLabel: 'Website für Farbenblinde anpassen',
+    closeLabel: 'Schließen',
+    panelTitle: 'Farbenblind-Einstellungen',
+    panelSubtitle: 'Machen Sie einen schnellen Test oder wählen Sie Ihren Sehtyp.',
+    testTab: 'Test',
+    manualTab: 'Manuell',
+    startTest: 'Test starten',
+    nextQuestion: 'Weiter',
+    question1: 'Welche Farbe sehen Sie in der Mitte?',
+    question2: 'Welche Zahl sehen Sie?',
+    question3: 'Welches Quadrat ist heller?',
+    optRedGreen: 'Rot / Grün',
+    optBlueYellow: 'Blau / Gelb',
+    optNone: 'Kein Unterschied',
+    optNumber74: '74',
+    optNumber21: '21',
+    optNoNumber: 'Keine Zahl',
+    optLeft: 'Links',
+    optRight: 'Rechts',
+    optSame: 'Gleich',
+    resultTitle: 'Testergebnis',
+    resultDesc: 'Sie haben wahrscheinlich {type}. Die Website wurde angepasst.',
+    typeNormal: 'normales Sehen',
+    typeDeuteranopia: 'Grünblindheit (Deuteranopie)',
+    typeProtanopia: 'Rotblindheit (Protanopie)',
+    typeTritanopia: 'Blaublindheit (Tritanopie)',
+    typeMonochromacy: 'vollständige Farbenblindheit (Monochromasie)',
+    selectType: 'Wählen Sie Ihren Sehtyp:',
+    deuteranopia: 'Kann Grün nicht unterscheiden',
+    protanopia: 'Kann Rot nicht unterscheiden',
+    tritanopia: 'Kann Blau nicht unterscheiden',
+    monochromacy: 'Schwarz-Weiß-Sehen',
+    apply: 'Anwenden',
+    reset: 'Zurücksetzen',
+    severity: 'Stärke:',
+    mild: 'Leicht',
+    moderate: 'Mäßig',
+    severe: 'Stark',
+  },
+}
+
+export function detectLang() {
+  const html = document.documentElement
+  const htmlLang = (html.lang || navigator.language || 'en').slice(0, 2).toLowerCase()
+  return htmlLang in locales ? htmlLang : 'en'
+}