fix(a11y): Calendar's days from other months and today's date pass contrast in Accessibility Mode (#33131)

This commit is contained in:
G30 2026-10-24 23:16:19 -04:00 • committed by GitHub
parent be0177f1e7
commit 62084e1eb4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 16 additions and 4 deletions

View file

@ -1,5 +1,6 @@
<script lang="ts">
import { getContext } from 'svelte';
import { settings } from '$lib/stores';
import type { CalendarModel } from '$lib/apis/calendar';
import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
@ -162,7 +163,11 @@
<button
class="w-6 h-6 flex items-center justify-center rounded-full transition
{day.getMonth() !== miniMonth ? 'text-gray-300 dark:text-gray-600' : ''}
{isToday(day) ? 'bg-blue-500 text-white' : ''}
{isToday(day)
? ($settings?.highContrastMode ?? false)
? 'bg-blue-600 text-white'
: 'bg-blue-500 text-white'
: ''}
{day.toDateString() === currentDate.toDateString() && !isToday(day)
? 'bg-gray-200 dark:bg-gray-700'
: ''}

View file

@ -1,5 +1,6 @@
<script lang="ts">
import { createEventDispatcher, getContext } from 'svelte';
import { settings } from '$lib/stores';
import type { CalendarEventModel, CalendarModel } from '$lib/apis/calendar';
import CalendarEventChip from './CalendarEventChip.svelte';
@ -172,7 +173,7 @@
{@const row = Math.floor(i / 7)}
<button
class="p-1 min-h-0 text-left overflow-hidden transition cursor-pointer flex flex-col
{isCurrentMonth(day) ? '' : 'opacity-40'}
{isCurrentMonth(day) ? '' : ($settings?.highContrastMode ?? false) ? 'opacity-80' : 'opacity-40'}
hover:bg-gray-50/80 dark:hover:bg-gray-850/30
{col > 0 ? 'border-l border-gray-100/20 dark:border-gray-850/20' : ''}
{row > 0 ? 'border-t border-gray-100/20 dark:border-gray-850/20' : ''}"
@ -181,7 +182,11 @@
<div class="flex justify-start px-0.5 mb-0.5">
<span
class="text-xs w-6 h-6 flex items-center justify-center rounded-full
{isToday(day) ? 'bg-blue-500 text-white' : 'text-gray-500 dark:text-gray-400'}"
{isToday(day)
? ($settings?.highContrastMode ?? false)
? 'bg-blue-600 text-white'
: 'bg-blue-500 text-white'
: 'text-gray-500 dark:text-gray-400'}"
>
{day.getDate()}
</span>
@ -234,7 +239,9 @@
class="text-sm mt-0.5 w-7 h-7 flex items-center justify-center mx-auto rounded-full {isToday(
day
)
? 'bg-blue-500 text-white'
? ($settings?.highContrastMode ?? false)
? 'bg-blue-600 text-white'
: 'bg-blue-500 text-white'
: ''}"
>
{day.getDate()}