Oma Reacti kalendri komponendi juurdepääsetavaks muutmine ARIA siltidega
Juurdepääsetavus on kaasaegse veebiarenduse oluline aspekt, mis tagab, et rakendused on kaasavad kõigile kasutajatele. Reacti projektides kasutatakse selliseid komponente nagu Päevavalija kalendri kuvamise kasutajaliidesed võivad kujutada endast ainulaadseid väljakutseid, kui proovite muuta need ekraanilugejatele juurdepääsetavaks.
Hiljuti töötasin ühe projekti kallal, kus oli vaja dünaamiliselt lisada ARIA sildid üksikutele päevaelementidele a Päevavalija komponent. Eesmärk oli pakkuda kasutajatele iga päeva oleku põhjal sisukat teavet, näiteks „Valitud kuupäev: 1. jaanuar 2024” või „Kuupäev pole saadaval: 2. jaanuar 2024”.
Algul proovisin standardlahendusi nagu ariaLabelFormatter või renderdamise päev, kuid mõistsin kiiresti, et reageerida päevavalija raamatukogul puudus selliste rekvisiitide jaoks sisseehitatud tugi. Minu järgmine instinkt oli manipuleerida DOM-i järelrenderduse abil useRef ja useEffect. Kuigi see lähenemisviis oli funktsionaalne, tundus see habras ja sõltus suuresti klassinimedest. 😕
See artikkel tutvustab teile tõhusamat lahendust ARIA siltide dünaamiliseks lisamiseks Päevavalija päevadel. Olenemata sellest, kas tegemist on valitud, keelatud või kättesaamatud olekutega, tagame, et teie kalender jääb juurdepääsetavaks ja ekraanilugejasõbralikuks. Sukeldume sisse! 🚀
Käsk | Kasutusnäide |
---|---|
useRef | const kalenderRef = useRef(null); Loob muutuva viiteobjekti, et pääseda otse DayPickeri komponendi DOM-i ja sellega manipuleerida. |
querySelectorAll | calendarRef.current.querySelectorAll(.rdp-day"); Otsib kõik elemendid, mis vastavad rdp-päev klass DayPickeri komponendis edasiseks manipuleerimiseks. |
setAttribute | day.setAttribute("aria-label", ariaLabel); Lisab või muudab dünaamiliselt aaria-silt atribuut, et pakkuda ekraanilugejatele juurdepääsetavust. |
components | komponentid={{ Päev: renderdamise päev }} Sisestab kohandatud funktsiooni, mis asendab iga päeva vaikerenderduse, võimaldades ARIA siltide kohandamist. |
modifiers | modifiers={{ piiratud: calendarDates.limited }} Määrab DayPickeris konkreetsed päevaolekud (nt piiratud, pole saadaval), et eristada päevi visuaalselt ja funktsionaalselt. |
aria-label | Lisab päevadele semantilise kirjelduse, muutes need abitehnoloogiate (nt ekraanilugejad) jaoks arusaadavaks ja navigeeritavaks. |
getByLabelText | screen.getByLabelText("Valitud kuupäev: 1. jaanuar"); Ühikutestides küsib see elemente nende järgi aaria-silt atribuut, et tagada juurdepääsetavuse siltide õige rakendamine. |
useEffect | useEffect(() => {...}, [calendarDates]); Käivitab loogika pärast DayPickeri renderdamist, tagades, et kalendri oleku muutumisel lisatakse ARIA sildid dünaamiliselt. |
modifiersStyles | modifiersStyles={{ piiratud: limitedStyle }} Rakendab kohandatud stiili konkreetsetele päevamuutjatele, muutes nende olekud kasutajate jaoks visuaalselt eristatavaks. |
generateAriaLabel | generAriaLabel(päev, modifikaatorid) Utiliit, mis genereerib päeva oleku alusel dünaamiliselt kontekstipõhiseid ARIA-silte. |
Dünaamilised ARIA-sildid DayPickerile: põhjalik juhend
Ehitades a kalendri komponent rakenduses React, kasutades DayPickeri teeki, võib ekraanilugejatele juurdepääsetavuse tagamine olla keeruline. Peamine väljakutse seisneb dünaamilises lisamises ARIA sildid igapäevastele elementidele, nii et nad edastavad olekuid, nagu „valitud”, „puuetega” või „pole saadaval”. Selle lahendamiseks kasutasime kahte lähenemisviisi: renderdamisjärgne DOM-i manipuleerimine ja kohandatud renderdusfunktsioon. Teeme lahti nende lahenduste toimimise ja juurdepääsetavuse saavutamiseks kasutatavad põhikomponendid. 🗓️
Esimene lahendus tugineb renderdamisjärgne DOM-i manipuleerimine kasutades Reacti useRef ja useEffect. Luues viite DayPickeri komponendile käsuga "useRef", pääseme juurde renderdatud DOM-i sõlmedele. Konksu "useEffect" raames esitame päringu kogu päeva elementidele (".rdp-day"), kasutades funktsiooni "querySelectorAll". Iga päeva kohta kontrollime selle klassi nimesid, et määrata selle olek. Kui päeval on klass „rdp-day_selected”, lisame ARIA sildi, näiteks „Valitud kuupäev: 1. jaanuar 2024”. See meetod tagab, et ARIA-silte värskendatakse dünaamiliselt, kui kalendri olek muutub.
Teine lahendus on puhtam ja reageerimissõbralikum, määratledes a kohandatud renderdusfunktsioon. DayPickeris kasutame kohandatud komponenti rekvisiidi „Components” kaudu, et alistada päevaelementide renderdamine. Kohandatud funktsioon võtab parameetritena vastu iga päeva ja selle olekumuutujad. Abifunktsiooni abil genereerime dünaamiliselt ARIA silte iga päeva oleku alusel (nt valitud, keelatud). Näiteks „Pole saadaval kuupäev: 2. jaanuar 2024” on määratud päevadele, mis on märgitud keelatuks. See lähenemine väldib DOM-i manipuleerimist ja hoiab lahenduse paremini hooldatavana.
Mõlemal meetodil on oma plussid ja miinused. Kuigi renderdamisjärgne DOM-i manipuleerimine annab meile renderdatud väljundi üle kontrolli, sõltub see suuresti klasside nimedest, mis võivad muutuda koos teegi värskendustega. Teisest küljest sobib komponentide kasutamine paremini Reacti deklaratiivse paradigmaga, muutes koodi puhtamaks ja hõlpsamini silutavaks. Lõppkokkuvõttes sõltub nende lähenemisviiside valik teie projekti nõuetest ja raamatukogu piirangutest. Mõlemal juhul tagab lõpptulemus, et kalender on juurdepääsetav kasutajatele, kes tuginevad ekraanilugejatele, parandades kasutatavust kõigi jaoks. 🌟
Kuidas dünaamiliselt lisada ARIA-silte React DayPickeri komponendile
Dünaamiline ARIA sildihaldus, kasutades Reacti, JavaScripti ja optimeeritud meetodeid
// Solution 1: Adding ARIA labels with post-render DOM Manipulation
import React, { useEffect, useRef } from "react";
import { DayPicker } from "react-day-picker";
import "react-day-picker/dist/style.css";
const AccessibleDayPicker = ({ calendarDates, startDate, endDate }) => {
const calendarRef = useRef(null);
useEffect(() => {
if (calendarRef.current) {
const days = calendarRef.current.querySelectorAll(".rdp-day");
days.forEach((day) => {
const date = day.getAttribute("aria-label");
let ariaLabel = date;
if (day.classList.contains("rdp-day_selected")) {
ariaLabel = `Selected date: ${date}`;
} else if (day.classList.contains("rdp-day_disabled")) {
ariaLabel = `${date} is not available for selection.`;
}
day.setAttribute("aria-label", ariaLabel || date);
});
}
}, [calendarDates]);
return (
<div ref={calendarRef}>
<DayPicker
mode="single"
selected={calendarDates.selected}
onDayClick={() => {}}
showOutsideDays
disabled={{ before: startDate, after: endDate }}
modifiers={{
limited: calendarDates.limited,
unavailable: calendarDates.unavailable,
}}
/>
</div>
);
};
export default AccessibleDayPicker;
ARIA siltide kohandatud ümbrise rakendamine rakenduses DayPicker
Reaktsioonipõhine ARIA sildi kohandamine funktsionaalsete komponentide abil
// Solution 2: Using a Custom Wrapper to Assign ARIA Labels
import React from "react";
import { DayPicker } from "react-day-picker";
const CustomDayPicker = ({ calendarDates, startDate, endDate }) => {
const generateAriaLabel = (date, modifiers) => {
if (modifiers.selected) return `Selected date: ${date.toDateString()}`;
if (modifiers.disabled) return `${date.toDateString()} is not available.`;
return date.toDateString();
};
const renderDay = (day, modifiers) => (
<div aria-label={generateAriaLabel(day, modifiers)}>
{day.getDate()}
</div>
);
return (
<DayPicker
mode="single"
selected={calendarDates.selected}
disabled={{ before: startDate, after: endDate }}
modifiers={{
limited: calendarDates.limited,
unavailable: calendarDates.unavailable,
}}
components={{ Day: renderDay }}
/>
);
};
export default CustomDayPicker;
ARIA märgistuse määramise ühikutestid
Testimisraamatukogu nalja ja reageerimisega, et tagada ARIA sildi terviklikkus
// Solution 3: Unit tests to validate ARIA label assignment
import React from "react";
import { render, screen } from "@testing-library/react";
import AccessibleDayPicker from "./AccessibleDayPicker";
import "@testing-library/jest-dom";
describe("AccessibleDayPicker ARIA labels", () => {
test("adds ARIA labels for selected and disabled days", () => {
const calendarDates = {
selected: new Date(2024, 0, 1),
unavailable: [new Date(2024, 0, 2)],
};
render(<AccessibleDayPicker calendarDates={calendarDates} />);
const selectedDay = screen.getByLabelText("Selected date: Monday, January 1, 2024");
expect(selectedDay).toBeInTheDocument();
const unavailableDay = screen.getByLabelText("Monday, January 2, 2024 is not available.");
expect(unavailableDay).toBeInTheDocument();
});
});
Ekraanilugeri juurdepääsetavuse tagamine rakenduses React DayPicker
Lisamine ARIA sildid dünaamiline on juurdepääsetavuse jaoks ülioluline, kuid React DayPickeris on kõikehõlmava kogemuse loomine palju enamat. Üks tähelepanuta jäetud aspekt on tagamine klaviatuuriga navigeerimine ja fookuse juhtimine. Ekraanilugeja kasutajad sõltuvad interaktiivsete komponentide, näiteks kalendrite, läbimiseks suuresti klaviatuuri sisenditest. DayPicker, mis on kasutusel, toetab põhilist klaviatuuriga navigeerimist, kuid selle kohandamine koos ARIA siltidega võib muuta selle intuitiivsemaks.
Teine valdkond, mida uurida, on rahvusvahelistumise (i18n) tugi. Kui teie projekt sihib kasutajaid erinevatest piirkondadest, peavad ARIA sildid kajastama lokaliseeritud kuupäevavorminguid ja keelt. Näiteks peaks prantsuse kasutaja kuulma sõna „1. jaanuar 2024” asemel sõna „1. jaanuar 2024”. Teegid, nagu „react-intl” või natiivne JavaScript „Intl.DateTimeFormat”, võivad aidata neid silte dünaamiliselt vormindada ekraanilugejate jaoks erinevates lokaatides.
Lõpuks saate juurdepääsetavust veelgi parandada, näidates visuaalselt päeva praegust fookust või olekut. Kombineerides CSS-i klassid ARIA atribuutidega nagu `aria-current="date"` tagab nii visuaalse kui semantilise ligipääsetavuse. Näiteks võite tänase kuupäeva visuaalselt esile tõsta, pakkudes samal ajal ekraanilugejatele konteksti. See lihvimise tase tagab, et teie DayPicker mitte ainult ei tööta, vaid on suurepärane ka kõigi kasutajate jaoks. 🎯
Korduma kippuvad küsimused ARIA siltide kohta rakenduses DayPicker
- Mis on ARIA labels mida kasutatakse DayPickeris?
- ARIA sildid pakuvad ekraanilugejatele juurdepääsetavaid kirjeldusi, mis aitavad kasutajatel mõista päevaolekuid, nagu „Valitud” või „Keelatud”.
- Kuidas dünaamiliselt lisada ARIA attributes ilma DOM-i manipuleerimist kasutamata?
- DayPickeri kasutamine components prop, saate kohandada päeva renderdamist ja lisada ARIA silte otse.
- Kas ma saan lokaliseerida ARIA labels rahvusvahelistele kasutajatele?
- Jah, saate kuupäevi vormindada kasutades Intl.DateTimeFormat tagamaks, et ARIA sildid kajastavad lokaliseeritud kuupäevavorminguid.
- Kuidas parandada keyboard navigation ARIA siltide kõrval?
- DayPicker toetab natiivselt klaviatuuril navigeerimist, kuid lisab kohandatud focus styles parandab nii kasutatavust kui ka juurdepääsetavust.
- Kas dünaamika lisamisel tekib jõudluskulu ARIA attributes?
- ARIA atribuutide nõuetekohane rakendamine Reacti oleku ja rekvisiitide abil tagab minimaalse jõudluse üldkulud.
Juurdepääsetavuse parandamine dünaamiliste ARIA siltidega
Lisamine ARIA sildid DayPickerile parandab juurdepääsetavust, kirjeldades abitehnoloogiate üksikute päevaelementide olekut. See loob ekraanilugejatele tuginevatele kasutajatele sujuva kasutuskogemuse, tagades, et põhiolekud, nagu „valitud” või „pole saadaval”, on selged. ✅
Kombineerides Reacti konksud ja kohandatud renderdamisviisid, saavutame lahenduse, mis on nii tõhus kui ka hooldatav. Kas otsese DOM-i manipuleerimise või deklaratiivsete rekvisiitide kaudu keskendutakse jätkuvalt kõigile kasutajatele juurdepääsetava kaasava kalendriliidese pakkumisele. 🌟
React DayPickeris juurdepääsetavate ARIA siltide allikad ja viited
- Täpsustab ametnikku Reageeri-päevavalija teegi dokumentatsioon komponentide funktsioonide ja modifikaatorite uurimiseks. Lisateavet leiate aadressilt Reageerimispäeva valija dokumentatsioon .
- Viitab juurdepääsetavuse tähtsusele ja ARIA parimatele tavadele MDN-i veebidokumendid. Üksikasjalikud juhised ARIA atribuutide kohta on saadaval aadressil MDN ARIA dokumentatsioon .
- Uurib jagatud kontseptsioone veebi juurdepääsetavuse ja ekraanilugeja ühilduvuse parandamiseks WebAIM, mille leiate aadressilt WebAIM: veebi juurdepääsetavust silmas pidades .