Linting dei componenti personalizzati
Introduzione all'utilizzo di axe DevTools Linter per il linting di componenti personalizzati
Questo articolo fornisce una panoramica sull'utilizzo di axe DevTools Linter per effettuare il lint dei componenti personalizzati.
Come funziona
Il linting dei componenti personalizzati mappa un componente personalizzato in un elemento esistente. Ad esempio, supponiamo di avere un <custom-image> componente che restituisce un <img> elemento HTML. Puoi creare una mappatura tra custom-image e img nella tua configurazione che indica ad axe DevTools Linter di eseguire il lint del tuo componente personalizzato come se fosse un elemento img . In tal caso, può rilevare, ad esempio, un attributo alt mancante e segnalarlo come errore di accessibilità.
È possibile creare una configurazione per mappare:
- Il tuo componente personalizzato a un altro elemento
- Gli attributi del tuo componente personalizzato agli attributi dell'altro elemento
- Un attributo nel tuo componente personalizzato per il contenuto di testo di un elemento (che è il contenuto di testo presente nell'elemento, come il testo all'interno dei tag button : <button> contenuto del testo </button>)
- WAI-ARIA attributi dal componente personalizzato utilizzando un attributo jolly (aria-*) anziché specificare singolarmente ogni attributo ARIA.
Prossimi passi
Per aiutarti a iniziare a eseguire il linting dei tuoi componenti personalizzati, sono disponibili due procedure dettagliate.
- Se si utilizza axe Accessibility Linter per VS Code o il plugin JetBrains, vedere Linting di componenti personalizzati con l'estensione axe Accessibility Linter per VS Code o il plugin JetBrains.
- Se si utilizza l'endpoint REST di axe DevTools Linter, vedere Linting di componenti personalizzati con l'endpoint REST di axe DevTools Linter.
Per informazioni sul linting dei file React Native e sui componenti personalizzati React Native, vedere Utilizzo di axe DevTools Linter per React Native.
Per informazioni sul supporto di axe DevTools Linter per alcune librerie di componenti personalizzate diffuse, vedere Librerie di componenti preconfigurate.
Vedere anche
Per informazioni sulle configurazioni utilizzate da axe Accessibility Linter per VS Code, dal plugin JetBrains e dall'endpoint REST, vedere [Configuring axe DevTools Linter].(axe-linter-configuration)