added default labels from text, plus aria-checked

Author: sspickle

lib/glow/canvas.js

@@ -92,7 +92,7 @@
         canvas.selected = this
         canvas.hasmouse = null
 
-        this.__title_anchor = $("<div/>") // title anchor point
+        this.__title_anchor = $('<div aria-live="assertive"/>') // title anchor point
         this.__caption_anchor = $('<div aria-live="assertive"/>') // caption anchor point
         this.__titletext = ''
         this.__captiontext = ''

lib/glow/primitives.js

@@ -2902,11 +2902,12 @@
 		if (attrs.name !== null && (__radio_buttons[attrs.name] === undefined))
 			__radio_buttons[attrs.name] = null
 
-		attrs.jradio = $(`<input aria-label="${attrs.aria_label}" type="radio">`).css({width:'16px', height:'16px'}).appendTo(attrs.pos)
+		let aria_label = attrs.aria_label || attrs.text
+		attrs.jradio = $(`<input aria-label="${aria_label}" type="radio">`).css({width:'16px', height:'16px'}).appendTo(attrs.pos)
 		.click( function() {
 			if (attrs.name === null) {
 				attrs.checked = !attrs.checked
-				$(attrs.jradio).prop('checked', attrs.checked)
+				$(attrs.jradio).prop('checked', attrs.checked).attrs('aria-checked', attrs.checked)
 				attrs.bind(cradio) 
 			} else if (!attrs.checked) {
 				let name = attrs.name
@@ -2915,6 +2916,7 @@
 				rb[name] = cradio
 				attrs.checked = true
 				$(attrs.jradio).prop('checked', attrs.checked)
+				$(attrs.jradio).attr('aria-checked', attrs.checked)
 				attrs.bind(cradio)
 			}
 		} )
@@ -2951,7 +2953,7 @@
 					}
 				}
 				attrs.checked = value
-	            $(attrs.jradio).prop('checked', value)
+	            $(attrs.jradio).prop('checked', value).attr('aria-checked', value)
 	        },
 	        get text() {return attrs.text},
 	        set text(value) {
@@ -3013,10 +3015,12 @@
 		attrs.disabled = booleanize(attrs.disabled)
 		widgetid++
 		attrs._id = widgetid.toString()
-		attrs.jcheckbox = $(`<input aria-label="${attrs.aria_label}" type="checkbox"/>`).css({width:'16px', height:'16px'}).appendTo(attrs.pos)
+		let aria_label = attrs.aria_label || attrs.text
+		attrs.jcheckbox = $(`<input aria-checked="${attrs.checked}" aria-label="${aria_label}" type="checkbox"/>`).css({width:'16px', height:'16px'}).appendTo(attrs.pos)		
 		.click( function() {
 			attrs.checked = !attrs.checked
 			$(attrs.jcheckbox).prop("checked", attrs.checked)
+			$(attrs.jcheckbox).attr('aria-checked', attrs.checked)
 			attrs.bind(ccheckbox) 
 		} )
 		$('<span id='+attrs._id+'> '+attrs.text+'</span>').appendTo(attrs.pos)
@@ -3151,7 +3155,8 @@
 		widgetid++
 		attrs._id = widgetid.toString()
 		if (attrs.prompt != '') attrs.__wprompt = wtext({text:attrs.prompt+' ', pos:attrs.pos})
-                attrs.jwinput = $(`<input type="text" id="${attrs._id}" aria-label="${attrs.aria_label}"/>`).val(attrs.text).appendTo(attrs.pos)
+			let aria_label = attrs.aria_label || attrs.text
+            attrs.jwinput = $(`<input type="text" id="${attrs._id}" aria-label="${aria_label}"/>`).val(attrs.text).appendTo(attrs.pos)
 			.css({"width":attrs.width.toString()+'px', "height":attrs.height.toString()+'px',
 				"font-size":(attrs.height-5).toString()+"px", "font-family":"sans-serif"})
 			.keypress( function(k) {
@@ -3217,7 +3222,8 @@
 	    	}
 	    }
 	    attrs.disabled = booleanize(attrs.disabled)
-		attrs.jbutton = $(`<button aria-label:"${attrs.aria_label}"/>`).html(attrs.text).appendTo(attrs.pos)
+		let aria_label = attrs.aria_label || attrs.text
+		attrs.jbutton = $(`<button aria-label="${aria_label}"/>`).html(attrs.text).appendTo(attrs.pos)
     		.css({color:rgb_to_css(attrs.color), backgroundColor:rgb_to_css(attrs.background), "font-size":"15px"})
     		.click( function() { attrs.bind(cbutton) } )
 		attrs.prefix = wtext(' ')
@@ -3235,7 +3241,7 @@
 	        get text() {return attrs.text},
 	        set text(value) {
 	        	attrs.text = value
-	            $(attrs.jbutton).html(attrs.text)
+	            $(attrs.jbutton).html(attrs.text).attr('aria-label', value)
 	        },
 	        get textcolor() {return attrs.color}, // legacy name; no apparent reason why it was "textcolor" instead of "color"
 	        set textcolor(value) {
@@ -3342,8 +3348,9 @@
 	    // otherwise the slider value has been changed by program, in which case 
 	    // we do NOT call the bound function, as it makes it difficult to manage
 		// multiple sliders that interact, as in the RGB-HSV demo program.
-
-		$(`<span aria-label="${attrs.aria_label}" id="${attrs._id}"></span>`).css({float:attrs.align,
+		
+		$(`<span aria-role="slider" aria-label="${attrs.aria_label}" aria-valuemin="${attrs.min}" 
+			aria-valuemax="${attrs.max}" id="${attrs._id}"></span>`).css({float:attrs.align,
 				width:w, height:h, margin:m, display:"inline-block"}).appendTo(attrs.pos)
 		attrs.jslider = $( '#'+attrs._id ).slider({orientation:o, range:"min",
 			min:attrs.min, max:attrs.max, value:attrs.value, step:attrs.step,