Skip to content

Commit ada3329

Browse files
sspicklesspickle
committed
first pass at accessibility changes
1 parent cd93c84 commit ada3329

File tree

3 files changed

+23
-15
lines changed

3 files changed

+23
-15
lines changed

‎css/redmond/2.1/jquery-ui.custom.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1223,3 +1223,11 @@ body .ui-tooltip {
12231223
filter: Alpha(Opacity=30);
12241224
border-radius: 8px;
12251225
}
1226+
1227+
.ui-widget-header.ui-slider-range {
1228+
background: #000000;
1229+
}
1230+
1231+
.ui-state-default.ui-slider-handle {
1232+
background: #006CFA;
1233+
}

‎lib/glow/canvas.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@
9393
canvas.hasmouse = null
9494

9595
this.__title_anchor = $("<div/>") // title anchor point
96-
this.__caption_anchor = $("<div/>") // caption anchor point
96+
this.__caption_anchor = $('<div aria-live="assertive"/>') // caption anchor point
9797
this.__titletext = ''
9898
this.__captiontext = ''
9999

‎lib/glow/primitives.js

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2882,7 +2882,7 @@
28822882
function radio(args) { // a radio button
28832883
if (!(this instanceof radio)) return new radio(args) // so radio() is like new radio()
28842884
var cvs = canvas.get_selected()
2885-
var attrs = {pos:cvs.caption_anchor, checked:false, text:'', disabled:false, name:null}
2885+
var attrs = {pos:cvs.caption_anchor, aria_label:"", checked:false, text:'', disabled:false, name:null}
28862886
if (args.bind !== undefined) {
28872887
attrs.bind = args.bind
28882888
delete args.bind
@@ -2902,7 +2902,7 @@
29022902
if (attrs.name !== null && (__radio_buttons[attrs.name] === undefined))
29032903
__radio_buttons[attrs.name] = null
29042904

2905-
attrs.jradio = $('<input type="radio"/>').css({width:'16px', height:'16px'}).appendTo(attrs.pos)
2905+
attrs.jradio = $(`<input aria-label="${attrs.aria_label}" type="radio">`).css({width:'16px', height:'16px'}).appendTo(attrs.pos)
29062906
.click( function() {
29072907
if (attrs.name === null) {
29082908
attrs.checked = !attrs.checked
@@ -2919,7 +2919,7 @@
29192919
}
29202920
} )
29212921

2922-
$('<span id='+attrs._id+'> '+attrs.text+'</span>').appendTo(attrs.pos)
2922+
$(`<span id="${attrs._id}">${attrs.text}</span>`).appendTo(attrs.pos)
29232923

29242924
var cradio = { // this structure implements a JavaScript "closure", essential for radio to work
29252925
get disabled() {return attrs.disabled},
@@ -2999,7 +2999,7 @@
29992999
function checkbox(args) { // a checkbox
30003000
if (!(this instanceof checkbox)) return new checkbox(args) // so checkbox() is like new checkbox()
30013001
var cvs = canvas.get_selected()
3002-
var attrs = {pos:cvs.caption_anchor, checked:false, text:'', disabled:false}
3002+
var attrs = {pos:cvs.caption_anchor, aria_label:"", checked:false, text:'', disabled:false}
30033003
if (args.bind !== undefined) {
30043004
attrs.bind = args.bind
30053005
delete args.bind
@@ -3013,7 +3013,7 @@
30133013
attrs.disabled = booleanize(attrs.disabled)
30143014
widgetid++
30153015
attrs._id = widgetid.toString()
3016-
attrs.jcheckbox = $('<input type="checkbox"/>').css({width:'16px', height:'16px'}).appendTo(attrs.pos)
3016+
attrs.jcheckbox = $(`<input aria-label="${attrs.aria_label}" type="checkbox"/>`).css({width:'16px', height:'16px'}).appendTo(attrs.pos)
30173017
.click( function() {
30183018
attrs.checked = !attrs.checked
30193019
$(attrs.jcheckbox).prop("checked", attrs.checked)
@@ -3091,7 +3091,7 @@
30913091
// Would like to implement scrolling number: https://github.com/juancgarcia/dragIt, which was inspired by an idea of Bret Victor
30923092
args = args || {}
30933093
var cvs = canvas.get_selected()
3094-
var attrs = {pos:cvs.caption_anchor, text:'', prompt:'', width:100, height:20, type:'numeric', number:null, disabled:false}
3094+
var attrs = {pos:cvs.caption_anchor, aria_label:'', text:'', prompt:'', width:100, height:20, type:'numeric', number:null, disabled:false}
30953095
for (var a in attrs) {
30963096
if (args[a] !== undefined) {
30973097
attrs[a] = args[a]
@@ -3151,7 +3151,7 @@
31513151
widgetid++
31523152
attrs._id = widgetid.toString()
31533153
if (attrs.prompt != '') attrs.__wprompt = wtext({text:attrs.prompt+' ', pos:attrs.pos})
3154-
attrs.jwinput = $('<input type="text" id="'+attrs._id+'"/>').val(attrs.text).appendTo(attrs.pos)
3154+
attrs.jwinput = $(`<input type="text" id="${attrs._id}" aria-label="${attrs.aria_label}"/>`).val(attrs.text).appendTo(attrs.pos)
31553155
.css({"width":attrs.width.toString()+'px', "height":attrs.height.toString()+'px',
31563156
"font-size":(attrs.height-5).toString()+"px", "font-family":"sans-serif"})
31573157
.keypress( function(k) {
@@ -3205,7 +3205,7 @@
32053205
function button(args) {
32063206
if (!(this instanceof button)) return new button(args) // so button() is like new button()
32073207
var cvs = canvas.get_selected()
3208-
var attrs = {pos:cvs.caption_anchor, text:' ', color:vec(0,0,0), background:vec(1,1,1), disabled:false}
3208+
var attrs = {pos:cvs.caption_anchor, aria_label:"", text:' ', color:vec(0,0,0), background:vec(1,1,1), disabled:false}
32093209
if (args.bind !== undefined) {
32103210
attrs.bind = args.bind
32113211
delete args.bind
@@ -3217,7 +3217,7 @@
32173217
}
32183218
}
32193219
attrs.disabled = booleanize(attrs.disabled)
3220-
attrs.jbutton = $('<button/>').html(attrs.text).appendTo(attrs.pos)
3220+
attrs.jbutton = $(`<button aria-label:"${attrs.aria_label}"/>`).html(attrs.text).appendTo(attrs.pos)
32213221
.css({color:rgb_to_css(attrs.color), backgroundColor:rgb_to_css(attrs.background), "font-size":"15px"})
32223222
.click( function() { attrs.bind(cbutton) } )
32233223
attrs.prefix = wtext(' ')
@@ -3272,7 +3272,7 @@
32723272
if (!(this instanceof slider)) return new slider(args) // so slider() is like new slider()
32733273
var margin = 12 // minimum margin to ensure that drag element doesn't intrude on neighboring text
32743274
var cvs = canvas.get_selected()
3275-
var attrs = {pos:cvs.caption_anchor, length:400, width:10, vertical:false, disabled:false,
3275+
var attrs = {pos:cvs.caption_anchor, aria_label:"", length:400, width:10, vertical:false, disabled:false,
32763276
min:0, max:1, align:'none', top:0, right:0, bottom:0, left:0}
32773277
if (args.bind !== undefined) {
32783278
attrs.bind = args.bind
@@ -3343,7 +3343,7 @@
33433343
// we do NOT call the bound function, as it makes it difficult to manage
33443344
// multiple sliders that interact, as in the RGB-HSV demo program.
33453345

3346-
$("<span id="+attrs._id+"></span>").css({float:attrs.align,
3346+
$(`<span aria-label="${attrs.aria_label}" id="${attrs._id}"></span>`).css({float:attrs.align,
33473347
width:w, height:h, margin:m, display:"inline-block"}).appendTo(attrs.pos)
33483348
attrs.jslider = $( '#'+attrs._id ).slider({orientation:o, range:"min",
33493349
min:attrs.min, max:attrs.max, value:attrs.value, step:attrs.step,
@@ -3389,7 +3389,7 @@
33893389
function menu(args) {
33903390
if (!(this instanceof menu)) return new menu(args) // so menu() is like new menu()
33913391
var cvs = canvas.get_selected()
3392-
var attrs = {pos:cvs.caption_anchor, selected:null, disabled:false}
3392+
var attrs = {pos:cvs.caption_anchor, aria_label:"", selected:null, disabled:false}
33933393
if (args.bind !== undefined) {
33943394
attrs.bind = args.bind
33953395
delete args.bind
@@ -3413,7 +3413,7 @@
34133413
else s += '<option>' + cc + '</option>\n'
34143414
}
34153415
attrs.disabled = booleanize(attrs.disabled)
3416-
attrs.jmenu = $('<select>'+s+'</select>').css("font-size","15px").change(function () {
3416+
attrs.jmenu = $(`<select aria-label="${attrs.aria_label}">${s}</select>`).css("font-size","15px").change(function () {
34173417
attrs.bind(cmenu)
34183418
}).appendTo(attrs.pos)
34193419
attrs.postfix = wtext(' ')
@@ -3498,4 +3498,4 @@
34983498
}
34993499

35003500
Export(exports)
3501-
})()
3501+
})()

0 commit comments

Comments
 (0)