Ticket #5233: high_contrast_support.txt

File high_contrast_support.txt, 4.4 KB (added by hhillen, 12 years ago)
Line 
1Index: themes/base/jquery.ui.core.css
2===================================================================
3--- themes/base/jquery.ui.core.css      (revision 3841)
4+++ themes/base/jquery.ui.core.css      (working copy)
5@@ -32,6 +32,31 @@
6 
7 /* Misc visuals
8 ----------------------------------*/
9+#jqueryui-a11yTestNode { border: 1px solid; border-color: red green; position: absolute; height: 5px; top: -999px; background-image: url("images/ui-bg_glass_65_ffffff_1x400.png"); }
10 
11 /* Overlays */
12 .ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
13+
14+/* High contrast compatibility
15+----------------------------------*/
16+.high-contrast .ui-icon,
17+.high-contrast .ui-dialog .ui-dialog-titlebar-close,
18+.high-contrast .ui-datepicker .ui-datepicker-next,
19+.high-contrast .ui-datepicker .ui-datepicker-prev
20+{ width: auto; text-indent: 0; }
21+
22+/* Focus highlight for tabs */
23+.high-contrast .ui-tabs.ui-widget-content .ui-state-focus { border-width: 3px; }
24+
25+/* Focus highlight for accordion (also out of high contrast, maybe that needs to go somewhere else? */
26+.ui-accordion-header.ui-state-focus { border-width: 2px; }
27+.high-contrast .ui-accordion-header.ui-state-focus { border-width: 4px; }
28+
29+/* Fancy positioning for datepicker buttons: */
30+.high-contrast .ui-datepicker .ui-datepicker-next span { position: static; margin: 3px; }
31+.high-contrast .ui-datepicker .ui-datepicker-prev span { position: static; margin: 3px; }
32+
33+/* Value for progress bar */
34+
35+.ui-progressbar-valuetext { display: none; }
36+.high-contrast .ui-progressbar-valuetext { display: block; position: relative; margin: 0; margin-top: 3px; top: -100%; width: 100%; text-align: center; }
37\ No newline at end of file
38Index: ui/jquery.ui.core.js
39===================================================================
40--- ui/jquery.ui.core.js        (revision 3841)
41+++ ui/jquery.ui.core.js        (working copy)
42@@ -14,7 +14,36 @@
43 //Helper functions and ui object
44 $.ui = {
45        version: "@VERSION",
46+       
47+       highContrastMode: function() {
48+               // Cache:
49+               if ("_highContrastMode" in this) { return this._highContrastMode; }
50 
51+               // Detect high contrast mode:
52+               // create div for testing if high contrast mode is on or images are turned off
53+               var div = document.createElement("div");
54+               div.id = "jqueryui-a11yTestNode";
55+               document.body.appendChild(div);
56+
57+               // test it
58+               var cs = document.defaultView
59+                       ? document.defaultView.getComputedStyle(div, null)
60+                       : (div.currentStyle ? div.currentStyle : null);
61+               if (cs) {
62+                       var bkImg = cs.backgroundImage;
63+                       this._highContrastMode = (cs.borderTopColor == cs.borderRightColor) || (bkImg != null && (bkImg == "none" || bkImg == "url(invalid-url:)"));
64+                       if (jQuery.browser.msie) {
65+                               div.outerHTML = "";             // prevent mixed-content warning, see http://support.microsoft.com/kb/925014
66+                       } else {
67+                               document.body.removeChild(div);
68+                       }
69+                       if (this._highContrastMode) {
70+                               $("body").addClass("high-contrast");
71+                       }
72+               }
73+               return this._highContrastMode;
74+       },
75+
76        // $.ui.plugin is deprecated.  Use the proxy pattern instead.
77        plugin: {
78                add: function(module, option, set) {
79@@ -202,4 +231,7 @@
80        }
81 });
82 
83+// Initialize high-contrast mode check:
84+$(document).ready($.ui.highContrastMode);
85+
86 })(jQuery);
87Index: ui/jquery.ui.progressbar.js
88===================================================================
89--- ui/jquery.ui.progressbar.js (revision 3841)
90+++ ui/jquery.ui.progressbar.js (working copy)
91@@ -29,6 +29,9 @@
92 
93                this.valueDiv = $( "<div class='ui-progressbar-value ui-widget-header ui-corner-left'></div>" )
94                        .appendTo( this.element );
95+               
96+               this.valueTextDiv = $( "<div class='ui-progressbar-valuetext'>" + this._value() + "</div>")
97+                       .appendTo( this.element );
98 
99                this._refreshValue();
100        },
101@@ -97,6 +100,7 @@
102                        [ value === this._valueMax() ? "addClass" : "removeClass"]( "ui-corner-right" )
103                        .width( value + "%" );
104                this.element.attr( "aria-valuenow", value );
105+               this.valueTextDiv.text(value + "%");
106        }
107 });
108 
109Index: ui/jquery.ui.button.js
110===================================================================
111--- ui/jquery.ui.button.js      (revision 3841)
112+++ ui/jquery.ui.button.js      (working copy)
113@@ -210,7 +210,7 @@
114 
115                var icons = this.options.icons,
116                        multipleIcons = icons.primary && icons.secondary;
117-               if ( icons.primary || icons.secondary ) {
118+               if ( !jQuery.ui.highContrastMode() && ( icons.primary || icons.secondary ) ) {
119                        buttonElement.addClass( "ui-button-text-icon" +
120                                ( multipleIcons ? "s" : "" ) );
121                        if ( icons.primary ) {