Code explainers tagged #accessibility

import { useEffect, useState } from "react";
 
interface Section {
  id: string;

import { Directive, Input, HostBinding, HostListener } from '@angular/core';
import { NG_VALIDATORS, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
 
@Directive({

import { useCallback, useId, useRef, useState, type KeyboardEvent } from 'react';
 
interface Tab {
  id: string;

import { useState } from 'react';
 
function TreeNode({ node, depth = 0 }) {
  const [expanded, setExpanded] = useState(depth === 0);

class Carousel {
  constructor(root, { interval = 5000 } = {}) {
    this.root = root;
    this.track = root.querySelector('.carousel__track');

import { useState, useEffect, useRef, useCallback } from 'react';
 
export default function Carousel({ images }) {
  const [index, setIndex] = useState(0);

const progressBar = document.getElementById('reading-progress');
const article = document.querySelector('article');
 
function updateProgress() {

import { useState } from 'react';
 
function StarRating({ value = 0, max = 5, onChange, size = 24 }) {
  const [hovered, setHovered] = useState(null);

import { Component, HostBinding, Input } from '@angular/core';
 
type ProgressVariant = 'success' | 'warning' | 'danger';
 

import { Component } from '@angular/core';
import { RouterLink, RouterLinkActive } from '@angular/router';
import { NgFor } from '@angular/common';
 

const FOCUSABLE = [
  'a[href]',
  'button:not([disabled])',
  'input:not([disabled])',

function initCharacterCounter(textarea, options = {}) {
  const maxLength = options.maxLength ?? 280;
  const warnThreshold = options.warnThreshold ?? 0.9;
 

const zxcvbn = require('zxcvbn');
 
const STRENGTH_LABELS = ['Very weak', 'Weak', 'Fair', 'Strong', 'Very strong'];
const STRENGTH_COLORS = ['#d64545', '#e0803c', '#d9c94c', '#5aa84f', '#2f8f3a'];

type RGB = { r: number; g: number; b: number };
 
type WCAGLevel = "AA" | "AAA";
type TextSize = "normal" | "large";

import { useEffect, useRef } from "react";
import { useLocation } from "react-router-dom";
 
export function RouteFocus({ title, children }) {

const STORAGE_KEY = "theme-preference";
 
function getSystemTheme() {
  return window.matchMedia("(prefers-color-scheme: dark)").matches

import { useState, useRef, useCallback } from "react";
 
export function MultiSelect({ options, value, onChange, placeholder = "Select…" }) {
  const [open, setOpen] = useState(false);

class StarRating {
  constructor(container, { max = 5, value = 0, onChange } = {}) {
    this.container = container;
    this.max = max;