Używam paska narzędzi Chrome od http://wave.webaim.org/extension/ do sprawdzenia zgodności ADA mojej aplikacji React-Bootstrap.Aplikacja React-Bootstrap Popover nie jest zgodna z ADA
Kiedy używam popover obrębie OverlayTrigger bez ID, ostrzega mnie w konsoli:
Ostrzeżenie: Nie propType: centr „id” jest wymagane, aby „Popover” dostępne dla użytkowników korzystających technologie wspomagające, takie jak czytniki ekranu
problem jest, kiedy dodać identyfikator do popover, I wtedy pojawia się następujący błąd na moim skanu Dostępność:
Brok en ARIA reference: element ma wartość aria-labelledby lub aria -przez wartość, która nie jest zgodna z wartością atrybutu id innego elementu na stronie.
Zgaduję, że tak się dzieje, ponieważ element o tym identyfikatorze nie istnieje, dopóki przycisk nie zostanie kliknięty. Czy czegoś brakuje, czy ten element nie jest zgodny z ADA? Czy jest to tylko problem ze skanowaniem i istnieje lepsze narzędzie, którego powinienem używać, aby udowodnić, że moja strona jest zgodna?
Oto kod przykładowej strony, która demonstruje problem. Mam rzucone go w Fiddle, ale to nie będzie pan wiele dobrego, ponieważ jeśli uruchomić narzędzie dostępności na ten temat, to daje błędy JSFiddle raczej niż te, dla odpowiedniego kodu:
<!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>
'Jestem zgadywania to się dzieje, ponieważ element o takim identyfikatorze nie istnieje, dopóki przycisk jest clicked' myślę, że to, co się dzieje. Sprawdziłem renderowany 'html' komponentu' button' i 'popover', oba mają taką samą wartość' aria-labelledby' i 'id'. Może rozszerzenie nie uwzględnia utworzonego DOM? – oobgam