Accessibility: We don't need to move hidden elements off screen when we set height, width and clip.

jaspermdegroot · jaspermdegroot · commit 963151cdc278 · 2013-07-18T11:26:02.000+02:00
We were combining two techniques here. Setting top and left will cause issues when we work on dir="rtl" support, so we use the other solution.
Also removed IE6/7 clip notation because IE7 is C-grade now as well.
diff --git a/css/structure/jquery.mobile.button.css b/css/structure/jquery.mobile.button.css
@@ -51,11 +51,8 @@ button.ui-btn-icon-notext {
 /* Fixes IE/WP filter alpha opacity bugs */
 .ui-input-btn.ui-state-disabled input {
 	position: absolute !important;
-	top: -9999px;
-	left: -9999px;
 	height: 1px;
 	width: 1px;
 	overflow: hidden;
-	clip: rect(1px 1px 1px 1px);
 	clip: rect(1px,1px,1px,1px);
 }
diff --git a/css/structure/jquery.mobile.collapsible.css b/css/structure/jquery.mobile.collapsible.css
@@ -33,12 +33,9 @@
 }
 .ui-collapsible-heading-status {
 	position: absolute !important;
-	top: -9999px;
-	left: -9999px;
 	height: 1px;
 	width: 1px;
 	overflow: hidden;
-	clip: rect(1px 1px 1px 1px);
 	clip: rect(1px,1px,1px,1px);
 }
 .ui-collapsible-content {
diff --git a/css/structure/jquery.mobile.controlgroup.css b/css/structure/jquery.mobile.controlgroup.css
@@ -114,11 +114,8 @@ fieldset.ui-controlgroup {
 }
 .ui-controlgroup-controls > label {
 	position: absolute !important;
-	top: -9999px;
-	left: -9999px;
 	height: 1px;
 	width: 1px;
 	overflow: hidden;
-	clip: rect(1px 1px 1px 1px);
 	clip: rect(1px,1px,1px,1px);
 }
diff --git a/css/structure/jquery.mobile.core.css b/css/structure/jquery.mobile.core.css
@@ -68,12 +68,9 @@ div.ui-mobile-viewport {
 /* Non-js content hiding */
 .ui-nojs {
 	position: absolute !important;
-	top: -9999px;
-	left: -9999px;
 	height: 1px;
 	width: 1px;
 	overflow: hidden;
-	clip: rect(1px 1px 1px 1px);
 	clip: rect(1px,1px,1px,1px);
 }
 
@@ -374,11 +371,8 @@ div.ui-mobile-viewport {
 .ui-hide-label .ui-rangeslider label,
 .ui-hidden-accessible {
 	position: absolute !important;
-	top: -9999px;
-	left: -9999px;
 	height: 1px;
 	width: 1px;
 	overflow: hidden;
-	clip: rect(1px 1px 1px 1px);
 	clip: rect(1px,1px,1px,1px);
 }
diff --git a/css/structure/jquery.mobile.fixedToolbar.css b/css/structure/jquery.mobile.fixedToolbar.css
@@ -52,12 +52,9 @@
 .ui-page-header-fullscreen .ui-fixed-hidden,
 .ui-page-footer-fullscreen .ui-fixed-hidden {
 	position: absolute !important;
-	top: -9999px;
-	left: -9999px;
 	height: 1px;
 	width: 1px;
 	overflow: hidden;
-	clip: rect(1px 1px 1px 1px);
 	clip: rect(1px,1px,1px,1px);
 }
 .ui-header-fixed .ui-btn,
diff --git a/css/structure/jquery.mobile.forms.checkboxradio.css b/css/structure/jquery.mobile.forms.checkboxradio.css
@@ -44,11 +44,9 @@
 }
 .ui-checkbox input:disabled,
 .ui-radio input:disabled {
-	top: -9999px;
-	left: -9999px;
+	position: absolute !important;
 	height: 1px;
 	width: 1px;
 	overflow: hidden;
-	clip: rect(1px 1px 1px 1px);
 	clip: rect(1px,1px,1px,1px);
 }
diff --git a/css/structure/jquery.mobile.forms.rangeslider.css b/css/structure/jquery.mobile.forms.rangeslider.css
@@ -50,12 +50,9 @@ html >/**/body .ui-rangeslider.ui-mini .ui-rangeslider-sliders .ui-slider-track:
 /* Hide the second label (the first is moved outside the div) */
 div.ui-rangeslider label {
 	position: absolute !important;
-	top: -9999px;
-	left: -9999px;
 	height: 1px;
 	width: 1px;
 	overflow: hidden;
-	clip: rect(1px 1px 1px 1px);
 	clip: rect(1px,1px,1px,1px);
 }
 .ui-field-contain .ui-rangeslider input.ui-slider-input,
diff --git a/css/structure/jquery.mobile.forms.select.css b/css/structure/jquery.mobile.forms.select.css
@@ -5,12 +5,9 @@
 }
 .ui-select > select {
 	position: absolute !important;
-	top: -9999px;
-	left: -9999px;
 	height: 1px;
 	width: 1px;
 	overflow: hidden;
-	clip: rect(1px 1px 1px 1px);
 	clip: rect(1px,1px,1px,1px);
 }
 .ui-select .ui-btn {
diff --git a/css/structure/jquery.mobile.forms.slider.css b/css/structure/jquery.mobile.forms.slider.css
@@ -75,12 +75,9 @@ input.ui-slider-input {
 }
 select.ui-slider-switch {
 	position: absolute !important;
-	top: -9999px;
-	left: -9999px;
 	height: 1px;
 	width: 1px;
 	overflow: hidden;
-	clip: rect(1px 1px 1px 1px);
 	clip: rect(1px,1px,1px,1px);
 }
 div.ui-slider-switch {
diff --git a/css/structure/jquery.mobile.popup.css b/css/structure/jquery.mobile.popup.css
@@ -37,12 +37,9 @@
 }
 .ui-popup-hidden {
 	position: absolute !important;
-	top: -9999px;
-	left: -9999px;
 	height: 1px;
 	width: 1px;
 	overflow: hidden;
-	clip: rect(1px 1px 1px 1px);
 	clip: rect(1px,1px,1px,1px);
 	visibility: hidden;
 }

Original file line number	Diff line number	Diff line change
`@@ -33,12 +33,9 @@`
`33`	`33`	`}`
`34`	`34`	`.ui-collapsible-heading-status {`
`35`	`35`	`position: absolute !important;`
`36`		`- top: -9999px;`
`37`		`- left: -9999px;`
`38`	`36`	`height: 1px;`
`39`	`37`	`width: 1px;`
`40`	`38`	`overflow: hidden;`
`41`		`- clip: rect(1px 1px 1px 1px);`
`42`	`39`	`clip: rect(1px,1px,1px,1px);`
`43`	`40`	`}`
`44`	`41`	`.ui-collapsible-content {`
Original file line number	Diff line number	Diff line change
`@@ -114,11 +114,8 @@ fieldset.ui-controlgroup {`
`114`	`114`	`}`
`115`	`115`	`.ui-controlgroup-controls > label {`
`116`	`116`	`position: absolute !important;`
`117`		`- top: -9999px;`
`118`		`- left: -9999px;`
`119`	`117`	`height: 1px;`
`120`	`118`	`width: 1px;`
`121`	`119`	`overflow: hidden;`
`122`		`- clip: rect(1px 1px 1px 1px);`
`123`	`120`	`clip: rect(1px,1px,1px,1px);`
`124`	`121`	`}`
Original file line number	Diff line number	Diff line change
`@@ -44,11 +44,9 @@`
`44`	`44`	`}`
`45`	`45`	`.ui-checkbox input:disabled,`
`46`	`46`	`.ui-radio input:disabled {`
`47`		`- top: -9999px;`
`48`		`- left: -9999px;`
	`47`	`+ position: absolute !important;`
`49`	`48`	`height: 1px;`
`50`	`49`	`width: 1px;`
`51`	`50`	`overflow: hidden;`
`52`		`- clip: rect(1px 1px 1px 1px);`
`53`	`51`	`clip: rect(1px,1px,1px,1px);`
`54`	`52`	`}`
Original file line number	Diff line number	Diff line change
`@@ -5,12 +5,9 @@`
`5`	`5`	`}`
`6`	`6`	`.ui-select > select {`
`7`	`7`	`position: absolute !important;`
`8`		`- top: -9999px;`
`9`		`- left: -9999px;`
`10`	`8`	`height: 1px;`
`11`	`9`	`width: 1px;`
`12`	`10`	`overflow: hidden;`
`13`		`- clip: rect(1px 1px 1px 1px);`
`14`	`11`	`clip: rect(1px,1px,1px,1px);`
`15`	`12`	`}`
`16`	`13`	`.ui-select .ui-btn {`
Original file line number	Diff line number	Diff line change
`@@ -75,12 +75,9 @@ input.ui-slider-input {`
`75`	`75`	`}`
`76`	`76`	`select.ui-slider-switch {`
`77`	`77`	`position: absolute !important;`
`78`		`- top: -9999px;`
`79`		`- left: -9999px;`
`80`	`78`	`height: 1px;`
`81`	`79`	`width: 1px;`
`82`	`80`	`overflow: hidden;`
`83`		`- clip: rect(1px 1px 1px 1px);`
`84`	`81`	`clip: rect(1px,1px,1px,1px);`
`85`	`82`	`}`
`86`	`83`	`div.ui-slider-switch {`
Original file line number	Diff line number	Diff line change
`@@ -37,12 +37,9 @@`
`37`	`37`	`}`
`38`	`38`	`.ui-popup-hidden {`
`39`	`39`	`position: absolute !important;`
`40`		`- top: -9999px;`
`41`		`- left: -9999px;`
`42`	`40`	`height: 1px;`
`43`	`41`	`width: 1px;`
`44`	`42`	`overflow: hidden;`
`45`		`- clip: rect(1px 1px 1px 1px);`
`46`	`43`	`clip: rect(1px,1px,1px,1px);`
`47`	`44`	`visibility: hidden;`
`48`	`45`	`}`