openclaw/oikos
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

a11y: aria-hidden auf allen Icons + aria-label auf icon-only Buttons (Redesign Phase F)

Browse Source 
- Alle data-lucide Icons: aria-hidden="true" (dekorativ)
- Icon-only Buttons/Links: title→aria-label (Screenreader-zugänglich)
- Betrifft: modal.js, contacts, meals, budget, calendar, notes, tasks,
  shopping, dashboard

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
ulsklyc
2026-03-26 13:48:23 +01:00
parent 152246185e
commit d5a0e701b0
9 changed files with 80 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/pages/notes.js
+7 -7
View File
@@ -49,13 +49,13 @@ export async function render(container, { user }) {
<div class="notes-toolbar">
<h1 class="notes-toolbar__title">Pinnwand</h1>
<button class="btn btn--primary" id="notes-add-btn">
<i data-lucide="plus" style="width:16px;height:16px;margin-right:4px;"></i>
<i data-lucide="plus" style="width:16px;height:16px;margin-right:4px;" aria-hidden="true"></i>
Neue Notiz
</button>
</div>
<div id="notes-grid" class="notes-grid"></div>
<button class="page-fab" id="fab-new-note" aria-label="Neue Notiz">
<i data-lucide="plus" style="width:24px;height:24px"></i>
<i data-lucide="plus" style="width:24px;height:24px" aria-hidden="true"></i>
</button>
</div>
`;
@@ -88,7 +88,7 @@ function renderGrid() {
if (!state.notes.length) {
grid.innerHTML = `
<div class="notes-empty">
<i data-lucide="sticky-note" class="notes-empty__icon"></i>
<i data-lucide="sticky-note" class="notes-empty__icon" aria-hidden="true"></i>
<div style="font-size:var(--text-lg);font-weight:600;margin-bottom:var(--space-2);">Noch keine Notizen</div>
<div style="font-size:var(--text-sm);">Klicke auf „Neue Notiz" um loszulegen.</div>
</div>
@@ -130,8 +130,8 @@ function renderNoteCard(note) {
data-id="${note.id}"
style="background-color:${escHtml(note.color)};color:${textColor};">
<button class="note-card__pin" data-action="pin" data-id="${note.id}"
title="${note.pinned ? 'Anpinnen aufheben' : 'Anpinnen'}">
<i data-lucide="${note.pinned ? 'pin-off' : 'pin'}" style="width:12px;height:12px;"></i>
aria-label="${note.pinned ? 'Anpinnen aufheben' : 'Anpinnen'}">
<i data-lucide="${note.pinned ? 'pin-off' : 'pin'}" style="width:12px;height:12px;" aria-hidden="true"></i>
</button>
${note.title ? `<div class="note-card__title">${escHtml(note.title)}</div>` : ''}
<div class="note-card__content">${renderMarkdownLight(note.content)}</div>
@@ -141,8 +141,8 @@ function renderNoteCard(note) {
style="background-color:${escHtml(note.creator_color || '#8E8E93')}">${initials}</span>
<span>${escHtml(note.creator_name || '')}</span>
</div>
<button class="note-card__delete" data-action="delete" data-id="${note.id}" title="Löschen">
<i data-lucide="trash-2" style="width:12px;height:12px;"></i>
<button class="note-card__delete" data-action="delete" data-id="${note.id}" aria-label="Notiz löschen">
<i data-lucide="trash-2" style="width:12px;height:12px;" aria-hidden="true"></i>
</button>
</div>
</div>