Sto utilizzando la barra degli strumenti di Chrome da http://wave.webaim.org/extension/ per verificare la conformità ADA della mia app React-Bootstrap.React-Bootstrap Popover non conforme ADA
Quando uso una Popover all'interno di un OverlayTrigger senza un ID, mi avverte nella console:
Avviso: impossibile PropType: La prop 'id' è tenuto a fare 'Popover' accessibile per gli utenti che utilizzano tecnologie assistive come gli screen reader
il problema è che, quando aggiungo un ID al Popover, allora ottengo il seguente errore sul mio scansione accessibilità:
Brok it Riferimento ARIA: un elemento ha un valore aria-labelledby o aria-definedby che non corrisponde al valore dell'attributo id di un altro elemento nella pagina.
Sto supponendo che stia accadendo perché l'elemento con quell'ID non esiste finché non si fa clic sul pulsante. Mi manca qualcosa o questo elemento non è compatibile con ADA? Oppure, questo è solo un problema con la scansione, e c'è uno strumento migliore che dovrei usare per dimostrare che il mio sito è conforme?
Ecco il codice per un sito di esempio che dimostra il problema. Ho gettato in un Fiddle, ma non lo farà molto bene, perché se si esegue lo strumento di accessibilità su questo, vi darà gli errori di JSFiddle piuttosto che quelli per il relativo codice:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>React-Bootstrap Popover Accessibility</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.5/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.5/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.28.1/react-bootstrap.js"></script>
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
var Button = ReactBootstrap.Button;
var OverlayTrigger = ReactBootstrap.OverlayTrigger;
var Popover = ReactBootstrap.Popover;
var Overlay = React.createClass({
render: function() {
return (
<OverlayTrigger trigger="click" placement="right" overlay={
<Popover title="Popover" id="popover-id">Here's the contents of the popover</Popover>
}>
<Button bsStyle="primary">Click to see Popover</Button>
</OverlayTrigger>
);
}
});
ReactDOM.render(
<Overlay />,
document.getElementById('container')
);
</script>
</body>
</html>
'Sto indovinando che sta accadendo, perché l'elemento con tale ID non esiste finché il pulsante è clicked' Credo che questo sia ciò che sta accadendo. Ho controllato il rendering 'html' dei componenti' button' e 'popover', entrambi hanno lo stesso valore di' aria-labelledby' e 'id'. Forse l'estensione non tiene conto del DOM creato? – oobgam