Styling and accessibility
The --geo-* tokens, the host's semantic tokens, dark mode, and what the map does for keyboard and screen-reader users.
@workspace/active-geo 0.4.0Developmentunreleased, in development in Foundationbaseline ce081dc3
Tokens#
One stylesheet, imported by the entry, every rule under .active-geo. Colours are tokens:
--geo-sequential-1 to 7 and --geo-category-1 to 8 for classes, the diverging set, the
no-data hatch, the area stroke, the point core and its halo, focus and selection. The tooltip,
menu, legend, controls and table read the host's semantic tokens (--popover, --border,
--muted-foreground, --card, --input, --radius, …) with package defaults. The font is
--geo-font-family, else the host's --font-sans.
On this site those semantic tokens are active-ui's, so a map matches the components around it, in light and dark, without a mapping of its own.
Accessibility#
- Keyboard: the map is one tab stop with
aria-activedescendantover the drawn objects (also canvas points). Arrow keys move, Home and End go to the first and last object, Space selects when selection is on, Enter activates, Shift+F10 opens the menu, and the zoom shortcuts work on a focused map. Focus is a dashed 2 px line over a halo, visible on any fill. - Screen readers: every object has a name and its values in words; the hidden data alternative and the visible table read the same rows; a withheld value is announced as withheld.
- Colour: every cue that must show on an arbitrary fill pairs two tones; forced-colours mode maps strokes, selection and focus to system colours.
A host that sets its own --geo-point, --geo-selected or --geo-focus keeps these pairs and
should give --geo-halo the opposite tone.