Utilizzo di axe DevTools Linter per React Native

Siamo entusiasti di offrire il supporto per React Native a axe DevTools Linter!

La funzionalità include attualmente 6 regole che vengono eseguite sui file React Native (.js, .jsx, .ts e .tsx). Per saperne di più sui test eseguiti da ciascuna regola e su come risolvere i problemi da esse rilevati, consultare i seguenti link:

• ha-azioni-di-accessibilità-valide
• ha-un-ruolo-di-accessibilità-valido
• ha-stato-di-accessibilità-valido
• ha-un-valore-di-accessibilità-valido
• immagine-ha-etichetta-di-accessibilità
• ha-ruolo-di-accessibilità

Configurazione

La versione software-as-a-service di axe DevTools Linter non richiede alcuna installazione per essere utilizzata. Ti basterà seguire la guida per ottenere una chiave API e potrai iniziare a utilizzare il servizio immediatamente. Consultare la sezione su utilizzo del axe DevTools Linter per istruzioni sui vari modi in cui il server può controllare i file di codice per problemi di accessibilità, tra cui tramite una GitHub Action e uno strumento da riga di comando chiamato axe DevTools Linter Connector. È anche possibile interagire direttamente con il server utilizzando la sua API REST.

Per i metodi che si basano su un axe-linter.yml file per la configurazione, come GitHub Action e Connector, aggiungi 'react-native' come libreria globale per abilitare il linting per React Native:

global-libraries:
  - react-native

Per i metodi che accettano la configurazione in formato JSON, come la chiamata diretta all'API REST, includere quanto segue per abilitare il linting di React Native:

{
  "config": {
    "global-libraries": ["react-native"]
  }
}

Linting dei componenti personalizzati

La funzionalità React Native supporta anche il linting di componenti personalizzati che funzionano in modo simile a questa funzionalità per il linting HTML. Tuttavia, al momento è disponibile solo per la regola image-has-accessibility-label . Consulta la guida su linting di componenti personalizzati che è specifica per HTML, ma il concetto di alto livello è valido anche per React Native. Ecco un esempio di utilizzo del linting dei componenti personalizzati con la regola image-has-accessibility-label per React Native:

Supponiamo di aver creato un componente personalizzato Image chiamato MyImage che accetta le proprietà isAccessible e accessibleLabel. Tali proprietà controllano le proprietà di accessibilità predefinite per Image che sono accessible e accessibilityLabel. Per rendere axe DevTools Linter consapevole di questa mappatura personalizzata, è necessario includere quanto segue nella configurazione:

global-components:
  MyImage:
    element: Image
    attributes:
      - isAccessible: accessible
      - accessibleLabel: accessibilityLabel

Con questa configurazione in atto, axe DevTools Linter segnalerà problemi se rileva istanze di <MyImage/> che non includono le proprietà isAccessible e accessibleLabel .