Una guida pratica allo sviluppo di un componente Toggle Button accessibile in React

1. Utilizza gli attributi ARIA: utilizza gli attributi ARIA (Accessible Rich Internet Applications) per fornire informazioni aggiuntive agli utenti di tecnologie assistive. Ad esempio, aria-pressed=”true” può essere utilizzato per indicare che il pulsante è attualmente in uno stato “on” [1]. Il W3C fornisce una guida dettagliata sugli attributi ARIA nella sua documentazione [2].
2. Fornire feedback visivo: fornire un chiaro feedback visivo quando il pulsante è in uno stato "on" o "off". Ad esempio, modificare il colore di sfondo, aggiungere un segno di spunta o un'icona "X" oppure modificare il testo del pulsante.
3. Usa testo descrittivo: usa un testo descrittivo per l'etichetta del pulsante che indichi chiaramente la funzione del pulsante. Ad esempio, "Attiva/disattiva modalità oscura" o "Attiva/disattiva menu di navigazione".
4. Fornisci il supporto della tastiera: assicurati che il pulsante di attivazione/disattivazione possa essere facilmente attivato utilizzando una tastiera. Questo può essere fatto aggiungendo un attributo tabindex all'elemento button e usando il tasto Invio per attivare il pulsante.
5. Test con tecnologia assistiva: prova il pulsante di attivazione/disattivazione con lettori di schermo e altre tecnologie assistive per assicurarti che sia completamente accessibile e utilizzabile per tutti gli utenti.

1. Crea un nuovo file chiamato Switch.tsx (o qualsiasi altro nome tu preferisca) nella directory dei componenti del tuo progetto React.
2. Quando si lavora su un progetto React che prevede l'uso di nomi di classi, è importante importare le dipendenze necessarie prima di iniziare a scrivere il codice. Classnames è una libreria di utilità che consente di applicare condizionalmente le classi CSS agli elementi in base a determinate condizioni. Questo è spesso usato insieme ai componenti React per modellarli dinamicamente in base al loro stato.

import React, { useRef } from ‘react’
import cn from ‘classnames’
import classes from ‘./Switch.module.scss’
import { variantType, labelPositionType } from ‘../../../constants’

export const labelPositionType: LabelPositionType =
 { left: ‘left’, right: ‘right’ }

export const variantType: VariantType =
 { default: ‘default’, error: ‘error’, disabled: ‘disabled’ }

• id (obbligatorio): una stringa che rappresenta l'id dell'elemento di input.
• label (facoltativo): una stringa che rappresenta l'etichetta per il componente switch.
• isChecked (facoltativo): un valore booleano che indica se l'opzione è selezionata o meno.
• onChange (obbligatorio): una funzione che viene chiamata quando cambia il valore dell'opzione.
• variant (facoltativo): una stringa che rappresenta la variante del componente switch. Il valore predefinito è "predefinito".
• disabled (facoltativo): un valore booleano che indica se l'opzione è disabilitata o meno. Il valore predefinito è falso.
• labelPosition (facoltativo): una stringa che rappresenta la posizione dell'etichetta. Il valore predefinito è "right".

interface IProps {
 id: string
 label?: string
 isChecked: boolean
 onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
 variant?: string
 disabled?: boolean
 labelPosition?: string
}

const Switch: React.FC<IProps> = ({
 isChecked,
 id,
 label,
 onChange,
 variant = variantType.default,
 disabled = false,
 labelPosition = labelPositionType.right,
}) => { }

const inputRef = useRef<HTMLInputElement>(null)

const handleClick = () => {
 if (inputRef.current) {
 inputRef.current.click()
 inputRef.current.focus()
 }
 }

const handleKeyDown = (event: React.KeyboardEvent<HTMLLabelElement>) => {
 if (event.key === ‘Enter’ || event.key === ‘ ‘) {
 handleClick()
 }

• Aggiungi l'elemento label con l'attributo htmlFor impostato su id prop. Questo associa l'etichetta e gli elementi di input e li rende accessibili agli screen reader. Etichette descrittive o istruzioni che forniscono contesto e significato agli utenti di screen reader. Questo può aiutarli a capire lo scopo del pulsante e come interagire con esso utilizzando la loro tecnologia assistiva.
• Aggiungere l'attributo role con un valore di "switch" per fornire informazioni semantiche alle tecnologie assistive.
• Impostare l'attributo tabIndex su 0 per rendere accessibile la tastiera del commutatore. Ciò consente agli utenti di navigare e attivare l'interruttore utilizzando l'input da tastiera.
• Aggiungere il gestore dell'evento onClick all'elemento label e il gestore dell'evento onKeyDown per fornire interattività. Ciò consente agli utenti di attivare o disattivare l'interruttore utilizzando sia gli input del mouse che della tastiera.
• Aggiungi gli attributichecked, id, type, value, onChange, ref e aria-label all'elemento di input per l'accessibilità. Questi attributi assicurano che lo switch sia correttamente etichettato e funzionale per gli utenti con disabilità.

return (
 <label
 className={cn(classes.switch, classes[`${variant}`], {
 disabled: disabled,
 })}
 htmlFor={id} 
 role=”switch”
 tabIndex={0}
 onKeyDown={handleKeyDown}
 >
 {label && labelPosition === labelPositionType.left && (
 <span className={cn(classes.label, classes.labelLeft)}>{label}</span>
 )}
 <input
 className={cn(classes.input)}
 checked={isChecked}
 id={id}
 type=”checkbox”
 value={label}
 onChange={onChange}
 ref={inputRef}
 aria-label={label}
 />
 <span className={cn(classes.slider)}></span>
 {label && labelPosition === labelPositionType.right && (
 <span className={cn(classes.label, classes.labelRight)}>{label}</span>
 )}
 </label>
 )

export default Switch

@import “../../../styles/variables.scss”;

$base-font-size: 16px;
.switch {
 margin: 0 0.75rem;
 font-family: Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 font-style: normal;
 font-weight: 400;
&.default {
 display: flex;
 align-items: center;
input {
 appearance: none;
 min-width: 3rem;
 min-height: 1.5rem;
 margin: 0.625rem;
 position: relative;
 background-color: #ffffff;
 border-radius: 1rem;
 border: 0.0625rem solid $Neutral-lightGrey;
 cursor: pointer;
 user-select: none;
 transition: background-color 0.3s, border-color 0.3s;
 &:checked {
 background-color: $Primary-M_Blue;
 border: 0.0625rem solid $Primary-M_Blue;
&::before {
 transform: translateX(1.5625rem);
 background-color: white;
 }
&:hover {
 background-color: $Primary-Navy;
 border-color: 0.0625rem solid $Primary-Navy;
 }
 }
&:focus::after {
 background-color: white;
 border: 0.125rem solid $Neutral-darkBlack;
 }
&::before {
 content: ‘’;
 position: absolute;
 height: 1rem;
 width: 1rem;
 top: 0.1875rem;
 left: 0.1875rem;
 bottom: 0.1875rem;
 background-color: $Neutral-lightGrey;
 transition: all 0.3s;
 border-radius: 50%;
 cursor: pointer;
 z-index: 1;
 }
&:hover {
 background-color: white;
 border: 0.0625rem solid $Primary-Navy;
 }
&:focus::after {
 background-color: $Neutral-darkBlack;
 border: 0.125rem solid $Neutral-darkBlack;
 }
 }
 }
&.disabled {
 input {
 appearance: none;
 min-width: 3rem;
 min-height: 1.5rem;
 margin: 0;
 position: relative;
 background-color: $Primary-L_Blue;
 border-radius: 1rem;
 border: 0.0625rem solid $Primary-L_Blue;
 cursor: not-allowed;
 user-select: none;
 transition: background-color 0.1s, border-color 0.1s;
&:checked {
 background-color: $Primary-L_Blue;
 border: 0.0625rem solid $Primary-L_Blue;
&::before {
 transform: translateX(1.5625rem);
 background-color: $Neutral-Grey-blue;
 }
 }
&::before {
 content: ‘’;
 position: absolute;
 height: 1rem;
 width: 1rem;
 top: 0.1875rem;
 left: 0.1875rem;
 bottom: 0.1875rem;
 background-color: $Neutral-Grey-blue;
 transition: all 0.3s;
 border-radius: 50px;
 cursor: not-allowed;
 z-index: 1;
 }
 }
 }
}

1. https://www.w3.org/TR/WCAG21/
2. https://www.w3.org/TR/wai-aria-1.1/
3. https://reactjs.org/docs/accessibility.html
4. https://www.typescriptlang.org/docs/
5. https://developer.mozilla.org/en-US/docs/Web/Accessibility
6. https://m2.material.io/design/usability/accessibility.html#understanding-accessibility