a11ybookmarklets/revealARIA.js at master · Section508Coordinators/a11ybookmarklets · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288

function start(myDocument){

  //Instead of window. for global
  //we use aA. so that we don't have
  //variables that might get mixed in
  //with site-level js

  var aA=new Array();

  // counting
  aA.foundCount = 0;

  //for id of added spans
  //so we can removed them
  aA.idi=0;

  //for frames outside domain
  //so we can report them
  aA.framemsg='';
  aA.fi=0;

  //recursive through frames
  aA = checkFrames(myDocument,aA);

  //reporting
  provideMessage(aA);
  //open results page
  //resultsPage(myDocument, aA);
}


function checkFrames(myDocument,aA){

    //run revealAria check for current document which might
    //have frames or aria or both

    aA = revealAria(myDocument,aA);

    //run checkFrames for each frame's document if there
    //are any frames
    var frametypes=new Array('frame','iframe','ilayer');
    for (var x=0;x<frametypes.length;x++) {
        var myframes=myDocument.getElementsByTagName(frametypes[x]);
        for (var y=0;y<myframes.length;y++) {
            try {
                 //alert('in try');
                 checkFrames(myframes[y].contentWindow.document,aA);
            } catch(e) {
                 //errors are stored in aA too
                 aA.framemsg=aA.framemsg + '\n' + myframes[y].src;
                 aA.fi=aA.fi + 1;
            }
        }
    }
    return aA;
}

function provideMessage(aA) {

    if(aA.foundCount!=1){var pl="s",pl1="are indicated by",pl2="were"}else{var pl="",pl1="is indicated by an",pl2="was"};

    if(aA.foundCount==0) {
         alertmessage = "No ARIA attributes were found."
    } else {
         alertmessage = aA.foundCount + " element" + pl + " with ARIA " +  pl2 + " found.";
    }

   alert(alertmessage);

}

function inArray(arr, obj) {
    for(var i=0; i<arr.length; i++) {
        if (arr[i] == obj) return true;
    }
    return false;
}

function resultsPage(myDocument, aA) {

    try {

        var lw = window.open('','lw');

        if (lw != null) {

            if (lw.opener == null) {
                lw.opener = window;
            }

            // IE has no interface for DOM additions to pages
            // that were created using DOM, but we still use
            // DOM for most things and convert back to a string
            // here using innerHTML
            lw.document.open();
            lw.document.write("<html><head><title>Aria Results</title>");
            lw.document.write('<link rel="Stylesheet" href="scripts/css/generic.css" type="text/css"></head>');
            //lw.document.write('<link rel="Stylesheet" http://section508testing.org/tools/beta/favelets/css/generic.css" type="text/css"></head>');
            lw.document.write('<body><a href="javascript:window.close();">[close window]</a>');
            lw.document.write("<h1>Aria information for \'" + myDocument.title + "\'</h1><hr/>");

            //put page specific code here

            lw.document.write("</body></html>");
            lw.document.close();
            lw.focus();

        } else {
            alert('Popup windows for frame report blocked.');
        }

    } catch(err) {
        alert('Window is not available: ' + '\nBe sure to close the frame report window each time it opens.');
        return false;
    }
}

function revealAria(mydocument,aA){

     //create object just to check length of the properties array
     var jt_generic_obj = mydocument.createElement("var");
     var ie7 = false;
     if (jt_generic_obj.attributes.length > 0) {
         ie7 = true;
     }

     //changes as we add things
     if (mydocument.all) {
         // ie
         var eLive = mydocument.all;
         // .attributes does not work til 2
     } else {
         var eLive = mydocument.getElementsByTagName("*");
     }

     //static (e won't change - don't use eLive while editing page)
     var e = new Array();
     for (var i=0; i<eLive.length;i++) {
         e[i] = eLive[i];
     }

     for (var i = 0; i < e.length; i++) {
     // EACH OBJECT

        //remove anything added last time favelet ran
        var myExpress1 = /ariastAdded.*/;
        if (((ie7 && e[i].attributes && e[i].attributes.id.specified) || (!(ie7) && e[i].hasAttribute('id'))) && myExpress1.test(e[i].getAttribute('id'))) {
            e[i].parentNode.removeChild(e[i]);
            continue;
        }

        //original favelet code from revealARIA
        var myText = "";

        // Check for role
        // ie7 cannot do this
        if  ((!(ie7) && e[i].hasAttribute('role'))) {
            myRole=e[i].getAttribute('role');
            myText = 'role="' + myRole + '" ';
        }

        //Check for aria- attributes
        if (e[i].attributes) {
            for (var x = 0; x < e[i].attributes.length; x++) {
                var myA = e[i].attributes[x].nodeName.toLowerCase();
                //alert(myA + " is " + e[i].getAttribute(myA));
                var myExpress = /aria.*/;
                // ie7 if below is only needed when
                // ie8 immitates ie7 - as then the aria attributes are in
                // the ie7-style list of empty attributes
                if ((!ie7 || (ie7 && e[i].attributes[x].specified)) &&
                    ((myExpress.test(myA) && e[i].getAttribute(myA)!=null) ||
                    (myA=="tabindex" && e[i].getAttribute(myA)=="-1") || (myA=="role" && e[i].getAttribute(myA)!=null))) {

                    myText = myA + '="' + e[i].getAttribute(myA) + '"';

                    //check for items with ids
                    var value_is_id_attributes = new Array('aria-controls','aria-describedby','aria-flowto','aria-labelledby','aria-labeledby','aria-owns','aria-activedescendant');
                    // all can have a list of ids, except aria-activedescendant

                    if (inArray(value_is_id_attributes,myA)) {

                      //report on the attribute

                      //get array of ids
                      var id_array = e[i].getAttribute(myA).split(" ");

                      for (var mapi=0;mapi<id_array.length;mapi++) {
                          //var myAid=e[i].getAttribute(myA);
                          var myAid=id_array[mapi];

                          //alert(mydocument.getElementById(myAid));
                          if (mydocument.getElementById(myAid) != undefined && mydocument.getElementById(myAid) != null) {
                              //get object
                              var myIdTarget=mydocument.getElementById(myAid);
                              //myIdTarget.style.padding = "2px";
                              myIdTarget.style.border="2px dotted navy";
                              myIdTarget.style.backgroundColor="#ffffff";

                              //myTextNode2 = mydocument.createTextNode('<'+myIdTarget.tagName.toLowerCase()+' id="'+myAid+'">');
                              myTextNode2 = mydocument.createTextNode('id="'+myAid+'"');

                              //create message
                              var mySpan2 = mydocument.createElement('span');
                              mySpan2.setAttribute("id", ("ariastAddedid" + i));

                              //style message
                              mySpan2.style.color='navy';
                              mySpan2.style.fontSize="small";
                              mySpan2.style.fontWeight="bold";
                              mySpan2.style.backgroundColor="#ffff33";
                              mySpan2.style.border="1px solid #000000";
                              mySpan2.style.padding="2px";
                              mySpan2.style.marginRight="3px";

                              //append attribute info
                              mySpan2.appendChild(myTextNode2);

                              //place message for id's object
                              var firstthing = myIdTarget.childNodes[0];
                              if (firstthing == undefined) {firstthing = null};
                              myIdTarget.insertBefore(mySpan2,firstthing);

                          } else {

                              if (myText == "") {
                                myText  = ' [NO ID MATCH] ';
                              } else {
                                myText += ' [NO ID MATCH] ';
                              }

                          }
                      }
                  }
                }
            }
        }

        //Results per element
        if (myText != "") {

          aA.foundCount++;

          //outline html element
          if (e[i].tagName == 'FORM') {
            e[i].style.border="2px dotted navy";
            e[i].style.padding="5px";
          } else {
            e[i].style.border="1px solid #000000";
            e[i].style.padding="2px";
          }

          //create message
          var mySpan = document.createElement('span');
          mySpan.setAttribute("id", ("ariastAdded" + i));
          myTextNode = document.createTextNode(myText);
          mySpan.appendChild(myTextNode);

          //style message
          mySpan.style.color="navy";
          mySpan.style.fontSize="small";
          mySpan.style.fontWeight="bold";
          mySpan.style.backgroundColor="#f5deb3";
          mySpan.style.border="1px solid #000000";
          mySpan.style.padding="2px";
          mySpan.style.marginRight="3px";

          // place message just before element it is about
          e[i].parentNode.insertBefore(mySpan,e[i]);

        }

     }
    // close going through each object

    //Return argument array
    return aA;
}


start(document);

//Feb 21, 2013
//the main code from the quick and dirty favelet that used
//to be revealARIA.js has been copied into the framework of
//the Landmarks favelet, so it can go through frames & reuse other features
//Marks targets of every WAI-ARIA id reference, even when they are in lists