Utilizzo di Axe DevTools Linter per React Native

Siamo entusiasti di annunciare il supporto per React Native in Axe DevTools Linter!

La funzionalità attualmente include 6 regole che vengono eseguite sui file React Native (.js, .jsx, .ts e .tsx). Si prega di vedere i seguenti link per saperne di più su cosa ogni regola testa e come correggere i problemi rilevati:

• has-valid-accessibility-actions
• has-valid-accessibility-role
• has-valid-accessibility-state
• has-valid-accessibility-value
• image-has-accessibility-label
• has-accessibility-role

Configurazione

La versione software-as-a-service di Axe DevTools Linter non richiede alcuna installazione per essere utilizzata. Sarà sufficiente seguire la guida per ottenere una chiave API e poi si potrà iniziare ad usare il servizio immediatamente. Si veda la sezione utilizzare Axe DevTools Linter per istruzioni sui vari modi in cui il server può controllare i file di codice per problemi di accessibilità, inclusi tramite GitHub Action e uno strumento da riga di comando chiamato Connettore Axe DevTools Linter. Si può anche interagire direttamente con il server usando il suo REST API.

Per i metodi che si basano su un file axe-linter.yml per la configurazione, come il GitHub Action e il Connettore, aggiungere '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 alla REST API, includere quanto segue per abilitare il linting per React Native:

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

Linting di Componenti Personalizzati

La funzionalità React Native supporta anche il linting dei componenti personalizzati che funzionano in modo simile a questa funzionalità per il linting HTML. Tuttavia, attualmente è disponibile solo per la regola image-has-accessibility-label. Si prega di consultare la guida per linting dei componenti personalizzati, che è specifica per HTML, ma il concetto a livello alto è 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 costruito un componente personalizzato Image chiamato MyImage che accetta le proprietà isAccessible e accessibleLabel. Queste proprietà controllano le proprietà di accessibilità predefinite per Image, che sono accessible e accessibilityLabel. Per rendere Axe DevTools Linter consapevole di questa mappatura personalizzata, dovrebbe essere inclusa la seguente configurazione:

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

Con questa configurazione in atto, Axe DevTools Linter segnalerà problemi se trova qualsiasi istanza di <MyImage/> che non include entrambe le proprietà isAccessible e accessibleLabel.