acessibility

This commit is contained in:
sameeranageshwar
2026-04-11 20:06:06 -04:00
parent f7dbfc5251
commit 1f99b1278c
5 changed files with 128 additions and 11 deletions
@@ -1,15 +1,17 @@
<script lang="ts">
import { mapState, UMD_LOCATIONS } from '$lib/states/map.svelte';
import { themeState } from '$lib/states/theme.svelte';
let { showDropdown = true } = $props<{ showDropdown?: boolean }>();
const legendItems = [
{ label: 'Harmful (80+ dB)', color: '#f38ba8' },
{ label: 'Disruptive (65-79 dB)', color: '#fab387' },
{ label: 'Manageable (55-64 dB)', color: '#f9e2af' },
{ label: 'Great (40-54 dB)', color: '#94e2d5' },
{ label: 'Ideal (0-39 dB)', color: '#89b4fa' }
];
const legendItems = $derived([
{ label: 'Harmful (80+ dB)', color: themeState.isColorBlindFriendly ? '#e66100' : '#f38ba8' },
{ label: 'Disruptive (65-79 dB)', color: themeState.isColorBlindFriendly ? '#ffb000' : '#fab387' },
{ label: 'Manageable (55-64 dB)', color: themeState.isColorBlindFriendly ? '#f0e442' : '#f9e2af' },
{ label: 'Great (40-54 dB)', color: themeState.isColorBlindFriendly ? '#56b4e9' : '#94e2d5' },
{ label: 'Ideal (0-39 dB)', color: themeState.isColorBlindFriendly ? '#0072b2' : '#89b4fa' }
]);
</script>
<div class="absolute top-6 right-6 md:right-8 z-20 flex flex-col gap-3 items-end">
+1 -1
View File
@@ -12,7 +12,7 @@ export const UMD_LOCATIONS: StudyLocation[] = [
{ id: 'mckeldin', name: 'McKeldin Library', hasFloors: true, floors: ['Floor 1', 'Floor 2', 'Floor 3', 'Floor 4', 'Floor 5', 'Floor 6', 'Floor 7'], lng: -76.94494907523277, lat: 38.986021017749366 },
{ id: 'hornbake', name: 'Hornbake Library', hasFloors: false, lng: -76.94161787005467, lat: 38.988233373664826 },
{ id: 'stem', name: 'STEM Library', hasFloors: false, lng: -76.93942003731279, lat: 38.988991437126195 },
{ id: 'clarice', name: 'Clarice Library', hasFloors: false, lng: -76.94967344225785, lat: 38.99029330703877 },
{ id: 'clarice', name: 'Clarice Library', hasFloors: false, lng: -76.9500912552473, lat: 38.990547823732285 },
{ id: 'yahentamitsi', name: 'Yahentamitsi', hasFloors: false, lng: -76.9448027183373, lat: 38.99108961575231 },
{ id: 'iribe', name: 'Iribe', hasFloors: false, lng: -76.93643838603555, lat: 38.98933701397555 },
{ id: 'reckord', name: 'Reckord Armory', hasFloors: false, lng: -76.93897470250619, lat: 38.98609556181066 },
+46
View File
@@ -2,15 +2,61 @@ import { browser } from '$app/environment';
class ThemeState {
isLight = $state(false);
isHighContrast = $state(false);
isColorBlindFriendly = $state(false);
constructor() {
if (browser) {
this.isLight = localStorage.getItem('theme') === 'light';
this.isHighContrast = localStorage.getItem('highContrast') === 'true';
this.isColorBlindFriendly = localStorage.getItem('colorBlind') === 'true';
this.updateDOM();
}
}
toggle() {
this.isLight = !this.isLight;
if (browser) {
localStorage.setItem('theme', this.isLight ? 'light' : 'dark');
this.updateDOM();
}
}
toggleHighContrast() {
this.isHighContrast = !this.isHighContrast;
if (browser) {
localStorage.setItem('highContrast', this.isHighContrast ? 'true' : 'false');
this.updateDOM();
}
}
toggleColorBlind() {
this.isColorBlindFriendly = !this.isColorBlindFriendly;
if (browser) {
localStorage.setItem('colorBlind', this.isColorBlindFriendly ? 'true' : 'false');
this.updateDOM();
}
}
private updateDOM() {
if (browser) {
if (this.isLight) {
document.documentElement.classList.add('light-theme');
} else {
document.documentElement.classList.remove('light-theme');
}
if (this.isHighContrast) {
document.documentElement.classList.add('high-contrast');
} else {
document.documentElement.classList.remove('high-contrast');
}
if (this.isColorBlindFriendly) {
document.documentElement.classList.add('color-blind');
} else {
document.documentElement.classList.remove('color-blind');
}
}
}
}