neofonie/a11y

a little helper with big impact

a11y's Issues

Playwright Tests aufsetzen

https://www.npmjs.com/package/playwright
https://xebia.com/switzerland-de/kopf-an-kopf-playwright-cypress-und-selenium/

Datums anzeige Dynamisch aber SSR Statisch

src/routes/+page.svelte

Doing:

• html in komponente extrahieren
• die komponente zeigt das letzte gebaute datum an

Codebeispiele zu den Checkboxen

Aktuell gibt es nur simple Checkboxen und es fehlt die Option Codebeispiele zuhinterlegen.
Auch ein Playground mit Codepen (oder ähnliches) wäre dufte

playground auf pr geht nicht mit node_modules

Lokal gehts

aber auf pr

<svelte:head>
    <!-- TODO: https://www.npmjs.com/package/playground-elements?activeTab=readme#other -->
    <script type="module" src="/node_modules/playground-elements/playground-ide.js"></script>
</svelte:head>

https://www.npmjs.com/package/playground-elements?activeTab=readme#other

Mehr Checkboxen einfügen + Checkbox umbauen in eigene Svelte Komponente

Aktuell ist eine Checkbox in /src/routes/+page.svelte https://github.com/Neofonie/a11y/blob/main/src/routes/%2Bpage.svelte
ein normales label
<label><input type="checkbox">Alle automatischen Accessibility-Tests laufen durch</label> <br />

Soll:
Baue daraus eine Checkbox Komponente Importiere diese und befülle mit Props
<Checkbox label="Alle automatischen Accessibility-Tests laufen durch">Code Beispiel</Checkbox>

globales css in extra datei anstatt in page.svelte

deploy folder wird immer voller

das deploy script könnte den ordner leeren anstatt immer nur hochzuladen
scripts/deploy.ts

Crawling der Haupt Url mit Tiefenangabe

Am Ende möchte man vielleicht nicht nur eine Seite sondern auch Unterseiten abtesten lassen
Dafür brauchen wir einen Crawler ob in svelte oder im Proxy

Codepen aka Playground integration

Github Badge einbauen

https://github.com/dutscher/7vswild/blob/master/src/comps/Github.svelte

Spinner für a11y Inspektor

wenn der proxy angefragt wird dann wird ein ui feedback gebraucht

page.svelte splitten

unsere page wird immer größer :D

aufsplitten in unter seiten

eventuell mit paging/routing?

Darkmode

siehe hier
https://github.com/dutscher/bbx/blob/master/src/comps/Features/DarkmodeButton.svelte

<script>(() => {
        if (localStorage.getItem('theme') === 'dark' || window.matchMedia('(prefers-color-scheme: dark)').matches) {
            //document.body.classList.add('is-dark')
        }
    })()</script>

Tailwind für schönes Aussehen

Damit es hier auch schön aussieht brauchen wir ein CSS-Framework

Research & Rechtsschreibung

contributor avatare

für alle die mitgewirkt haben solls avatare geben und mit auf die seite

siehe: https://github.com/ferdium/ferdium-app?tab=readme-ov-file#contributors-

https://github.com/ferdium/ferdium-app/pull/1582/files

Favicon einbinden

Prettier.rc einbinden

Für gemeinsames codeformatting.
4 indents
Single quotes
200 linebreak

https://github.com/sveltejs/prettier-plugin-svelte

Iframe integration wo man einen URL detecten kann

Der Iframe lädt eine Url und dann werden bestimmte A11y Regeln ausgeführt und es gibt am Ende eine Summary

Localstorage integration um States des Checkboxen beizuhalten

Aktuell verliert die Seite ihren Zustand bei einem Reload

editable drop-down for proxy-url

As user i want to have an editable drop-down rather then an input, to either enter my URL by myself or to select a predefined URL.

AC:

• Instead of an input-field there should be a select
• Select should be editable
• Predefined values should be:
• http://localhost:8080/
• https://a11y.neofonie.de:8443/

Optional:
maybe the selected value could be stored in localStorage for convenience

preview deploy für feature branches

aktuell baut nur der main wir könnten aber auch eine infrastruktur für features bauen

ein commit auf einen feature branch löst eine github action aus.
diese action baut dann mit svelte-kit unter dem pfad a11y.neofonie.de/preview/pr-38/index.html
nach erfolgreichem build könnte die action einen link als kommentar in den pullrequest schreiben

show code in tooltip oder modal

proxy auf pr zum laufen bekommen

http://a11y.neofonie.de:8443/https://google.com/

geht aktuell.

aber es soll auch :
https://a11y.neofonie.de:8443/https://google.com/

nvm + node 20 ✅
npm init + npm install ✅
npm run start ✅

cd /etc/nginx/sites-available
nano default

map $query_string $proxy_host {
   "~^url=(.*)" $1;
   default $query_string;
}

server {

        listen 443 ssl;
        server_name a11y.neofonie.de;

        root /var/www/html;
        index index.html;

        ssl_certificate /etc/ssl/neofonie/fullchain.pem;
        ssl_certificate_key /etc/ssl/neofonie/privkey.pem;

        # a11y.neofonie.de/cors-hirse?url=google.com

        location /cors-ng {
          rewrite ^/cors-ng(.*) /$1 break;
          resolver 8.8.8.8 valid=1h;
          proxy_pass https://$proxy_host;
        }

        location /cors-js {
          rewrite ^/cors-js(.*) /$1 break;
          proxy_pass_request_headers on;
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header X-Forwarded-Proto $scheme;
          proxy_pass http://a11y.neofonie.de:8443/https://$proxy_host;
        }

        location /cors {
           proxy_pass http://a11y.neofonie.de:8443;
        }
}

Chromium liefert Screenshot von der Seite die aufgerufen wurde

Um solche Probleme mit dem Iframe zuumgehen könnte man anstelle des Iframes eine Bild darstellen welches der Chromium beim öffnen der Seite macht.