That makes it easy to style in modern browsers (>IE6).
Simply add a couple of style rules (just an example):
[aria-required=true] { background-color: #ffe; }
[aria-invalid=true] { background-color: #fee; border-color: red; }Valid - required fields "highlighted"
Invalid
+1 to IBM for implementing :)
Share and enjoy!
6 comments:
great find, Tommy!
Great tip and great timing. It answers a query I had from a customer yesterday
- dojo uses this; I surmise that's the source of it, but IBM could be mimicking dojo because it's integrated with XPages.
Thanks :)
@David: It's a W3C standard that has nothing to do with Dojo. The WAI-ARIA standard is used for accessibility. E.g. for screen readers.
I think it's great that IBM has implemented this. Too bad IBM has so little documentation when it comes to features. I bet there are more "hidden" gems that might never be used because so few people know about them.
Cool stuff !
I tried adding an "invalid" image next to input fields that didn't pass validation using the :after CSS pseudo selector but that didn't work. Using dojo however that's easy to do:
<script type="text/javascript">
dojo.addOnLoad( function() {
dojo.query("[aria-invalid=true]").forEach(function(input){
//dojo.create( "img", {src : "/icons/vwicn150.gif", style : "padding-left: 3px;", alt : "Required field", title : "Required field"}, input, "after");
dojo.create( "span", { innerHTML : "!", style : "padding-left:3px; font-weight: bold; color:red"}, input, "after");
});
});
</script>
It looks like Opera might be the only one that (partially) supports :before/:after on inputs.
You could put the ! inside the field/add padding (so that value doesn't cover the icon) like Dojo does on their validation. E.g.
[aria-invalid="true"] {
background: url("/icons/vwicn150.gif") no-repeat 100% 50%;
border: 1px solid red;
padding-right: 14px;
}
Post a Comment