MrGrigri

Roving Tab Index

These utilities are available to help maintain a roving tab index. This conforms to the Aria Authoring Practices

Keyboard interactions using KeyboardEvent: key property:

Key	Orientation	Effect
ArrowUp	horizontal	No effect
ArrowUp	vertical	Moves to the previous element

MrGrigri

@layer utils {
	:is(.sr-only, .sr-only-focusable:not(:focus, :focus-within)) {
		border: 0 !important;
		clip-path: inset(50%) !important;
		height: 1px !important;
		margin: -1px !important;
		overflow: hidden !important;
		padding: 0 !important;
		width: 1px !important;
		white-space: nowrap !important;

MrGrigri

@property --min-inline-size {
  syntax: "<length>";
  inherits: false;
  initial-value: 100px;
}

.container {
  display: grid;
  grid-template-rows: var(--min-inline-size);
  grid-auto-rows: var(--min-inline-size);

MrGrigri

import { isPlatformBrowser } from '@angular/common';
import {
  EventEmitter,
  inject,
  Injectable,
  Output,
  PLATFORM_ID,
} from '@angular/core';

@Injectable({ providedIn: 'root' })

MrGrigri

Basic Light and Dark color scheme/palette

These colors are based on the Atlasian's design system.

This can be paired with my other animated-outline.css Gist

MrGrigri

@layer reset {
  :root {
    --_body-font-family: var(--reset-body-font-family, sans-serif);
    --_heading-font-family: var(--reset-heading-font-family, serif);
    --_code-font-family: var(--reset-code-font-family, monospace);

    --_text-max-width: var(--reset-text-max-width, 65ch);

    --_details-duration: var(--reset-details-duration, 175ms);
    --_details-timing: var(--reset-details-timing, ease-out);

MrGrigri

Simple vanilla JavaScript router

This is a very minimal router to be used in a vanilla JavaScript project. There are only two exposed functions and one options object.

I have used this with a simple ViteJs web server.

Functions

initializeRoutes(routes, options): This function will initialize the routing. A routes object must be passed as well as an optional options object. goToRoute(route): This function is to be called in JavaScript and will navigate to the route.

MrGrigri

:root {
  --outline-color: #346ebd;
  --outline: 2px solid var(--outline-color);
}

* {
  outline-offset: -2px;
}

*:not(:active):focus-visible {

MrGrigri

<datalist id="us_states">
  <option value="al" label="Alabama">Alabama</option>
  <option value="ak" label="Alaska">Alaska</option>
  <option value="az" label="Arizona">Arizona</option>
  <option value="ar" label="Arkansas">Arkansas</option>
  <option value="ca" label="California">California</option>
  <option value="co" label="Colorado">Colorado</option>
  <option value="ct" label="Connecticut">Connecticut</option>
  <option value="de" label="Delaware">Delaware</option>
  <option value="fl" label="Florida">Florida</option>

MrGrigri

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class IdService {
  public ids: string[] = [];

  constructor() {}