@casoon/dragonfly
Version:
Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.
142 lines (126 loc) • 3.93 kB
CSS
/*
* Accessibility - Keyboard Navigation
*
* Styles und Utilities für verbesserte Keyboard-Navigation und Fokus-Management.
* Diese Datei enthält Definitionen für konsistente Fokus-Ringe und Keyboard-Navigation.
*/
@layer accessibility {
/*
* Globale Fokus-Stile
*
* Diese Fokus-Stile werden auf alle fokussierbaren Elemente angewendet.
* Der Fokus-Ring ist nur sichtbar, wenn das Element per Tastatur fokussiert wird.
*/
/* Default-Fokus entfernen, um eigene Stile zu verwenden */
:focus {
outline: none;
}
/* Fokus-Ring nur anzeigen, wenn per Tastatur navigiert wird */
:focus-visible {
outline: var(--focus-ring);
outline-offset: var(--focus-ring-offset);
position: relative;
z-index: var(--z-index-2);
}
/*
* Visuelles Feedback optimieren
*
* Verbessert die Sichtbarkeit von fokussierten Elementen
* in verschiedenen Bereichen der Benutzeroberfläche.
*/
/* Angepasster Fokus-Ring für Formular-Elemente */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
border-color: var(--color-border-focus);
outline: var(--focus-ring);
outline-offset: var(--focus-ring-offset);
}
/* Angepasster Fokus-Ring für Links */
a:focus-visible {
outline: var(--focus-ring);
outline-offset: var(--focus-ring-offset);
text-decoration: underline;
}
/* Angepasster Fokus-Ring für interaktive Container */
[tabindex]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
[role="option"]:focus-visible {
outline: var(--focus-ring);
outline-offset: var(--focus-ring-offset);
}
/* Utility-Klassen für fokussierbare Elemente */
.focus-ring-inset {
--focus-ring-offset: -var(--border-width-thick);
}
.focus-ring-large {
--focus-ring: 0 0 0 var(--spacing-1) var(--color-focus-ring);
}
/*
* Skip-Links für Keyboard-Navigation
*
* Links, die es Tastatur-Benutzern ermöglichen, direkt zum Hauptinhalt zu springen.
* Normalerweise versteckt, aber sichtbar, wenn sie fokussiert werden.
*/
.skip-link {
clip: rect(0 0 0 0);
height: var(--border-width);
margin: calc(-1 * var(--border-width));
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: var(--border-width);
}
.skip-link:focus-visible {
background-color: var(--color-surface);
border: var(--border-width) solid var(--color-border);
border-radius: var(--border-radius-md);
box-shadow: var(--shadow-md);
clip: auto;
color: var(--color-text-primary);
font-weight: var(--font-weight-semibold);
height: auto;
left: var(--spacing-2);
padding: 1var(--border-width-thick) var(--spacing-4);
top: var(--spacing-2);
white-space: normal;
width: auto;
z-index: var(--z-index-toast);
}
/*
* Keyboard-Navigation-Helfer
*
* Helfer-Klassen zur Verbesserung der Tastatur-Navigation.
*/
/* Für Elemente, die nur visuell angeklickt werden können, aber per Tastatur fokussierbar sein sollten */
.keyboard-focusable {
cursor: pointer;
}
.keyboard-focusable:not([tabindex]) {
tabindex: "0";
}
/* Für Elemente, die per Tastatur nicht fokussierbar sein sollten */
.keyboard-no-focus {
tabindex: "-1";
}
/*
* Tastatur-Modifikator-Erkennung
*
* Diese Klasse wird automatisch vom Theme-Helper-Script zum <html>-Element hinzugefügt,
* wenn der Benutzer per Tastatur navigiert. Dies ermöglicht gezieltes Styling nur für
* Tastatur-Benutzer.
*/
.keyboard-user [tabindex]:focus,
.keyboard-user a:focus,
.keyboard-user button:focus,
.keyboard-user input:focus,
.keyboard-user select:focus,
.keyboard-user textarea:focus {
outline: var(--focus-ring);
outline-offset: var(--focus-ring-offset);
}
}