till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-16 00:59:40 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

fix(calendar): resolve a11y errors in calendar views

Browse source 
- Fix button nested inside button in TodoSidebarSection (converts outer
  button to div with separate toggle button)
- Replace role="slider" with role="separator" on resize handles in
  DayView, WeekView, and MultiDayView to avoid missing aria-valuenow
  requirement

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Wuesteon 2025-12-10 22:00:53 +01:00
parent 15a29aae5e
commit a069670a18
4 changed files with 42 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

8
apps/calendar/apps/web/src/lib/components/calendar/DayView.svelte
View file

@ -472,9 +472,9 @@
<div
class="resize-handle top"
onpointerdown={(e) => startResize(event, 'top', e)}
role="slider"
role="separator"
aria-orientation="horizontal"
aria-label="Startzeit ändern"
tabindex="-1"
></div>
<span class="event-time">
@ -496,9 +496,9 @@
<div
class="resize-handle bottom"
onpointerdown={(e) => startResize(event, 'bottom', e)}
role="slider"
role="separator"
aria-orientation="horizontal"
aria-label="Endzeit ändern"
tabindex="-1"
></div>
</div>
{/each}

8
apps/calendar/apps/web/src/lib/components/calendar/MultiDayView.svelte
View file

@ -564,9 +564,9 @@
<div
class="resize-handle top"
onpointerdown={(e) => startResize(event, 'top', e)}
role="slider"
role="separator"
aria-orientation="horizontal"
aria-label="Startzeit ändern"
tabindex="-1"
></div>
{#if columnClass !== 'very-compact'}
@ -580,9 +580,9 @@
<div
class="resize-handle bottom"
onpointerdown={(e) => startResize(event, 'bottom', e)}
role="slider"
role="separator"
aria-orientation="horizontal"
aria-label="Endzeit ändern"
tabindex="-1"
></div>
</div>
{/each}

51
apps/calendar/apps/web/src/lib/components/calendar/TodoSidebarSection.svelte
View file

@ -61,24 +61,26 @@
<div class="todo-sidebar-section">
<!-- Header -->
<button type="button" class="section-header" onclick={toggleExpanded}>
<div class="header-left">
{#if isExpanded}
<ChevronDown size={16} />
{:else}
<ChevronRight size={16} />
{/if}
<CheckSquare size={16} class="section-icon" />
<span class="section-title">Aufgaben</span>
{#if totalActiveCount > 0}
<span class="count-badge">{totalActiveCount}</span>
{/if}
{#if overdueCount > 0}
<span class="overdue-badge" title="{overdueCount} überfällig">
<AlertTriangle size={12} />
</span>
{/if}
</div>
<div class="section-header">
<button type="button" class="header-toggle" onclick={toggleExpanded}>
<div class="header-left">
{#if isExpanded}
<ChevronDown size={16} />
{:else}
<ChevronRight size={16} />
{/if}
<CheckSquare size={16} class="section-icon" />
<span class="section-title">Aufgaben</span>
{#if totalActiveCount > 0}
<span class="count-badge">{totalActiveCount}</span>
{/if}
{#if overdueCount > 0}
<span class="overdue-badge" title="{overdueCount} überfällig">
<AlertTriangle size={12} />
</span>
{/if}
</div>
</button>
<button
type="button"
class="add-button"
@ -87,7 +89,7 @@
>
<Plus size={16} />
</button>
</button>
</div>
<!-- Content -->
{#if isExpanded}
@ -160,14 +162,21 @@
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0.75rem 1rem;
padding: 0 1rem 0 0;
}
.header-toggle {
flex: 1;
display: flex;
align-items: center;
padding: 0.75rem 0 0.75rem 1rem;
border: none;
background: transparent;
cursor: pointer;
transition: background 150ms ease;
}
.section-header:hover {
.header-toggle:hover {
background: hsl(var(--color-muted) / 0.3);
}

8
apps/calendar/apps/web/src/lib/components/calendar/WeekView.svelte
View file

@ -584,9 +584,9 @@
<div
class="resize-handle top"
onpointerdown={(e) => startResize(event, 'top', e)}
role="slider"
role="separator"
aria-orientation="horizontal"
aria-label="Startzeit ändern"
tabindex="-1"
></div>
<span class="event-time">
@ -598,9 +598,9 @@
<div
class="resize-handle bottom"
onpointerdown={(e) => startResize(event, 'bottom', e)}
role="slider"
role="separator"
aria-orientation="horizontal"
aria-label="Endzeit ändern"
tabindex="-1"
></div>
</div>
{/each}