Browse Source

Use <button type='button'> instead of <a href='#'> for accessibility issues

pull/228/head
Corinne Schillinger 11 years ago
parent
commit
4a3298d2db
  1. 45
      demo/demo.css
  2. 6
      demo/demo.html
  3. 10
      responsiveslides.js
  4. 8
      responsiveslides.min.js

45
demo/demo.css

@ -29,6 +29,19 @@ h2 {
margin-bottom: 40px;
}
button {
border: 0;
font-size: inherit;
font-family: inherit;
cursor: pointer;
background: transparent;
}
button::-moz-focus-inner {
border: 0;
padding: 0;
}
#wrapper {
padding: 20px;
}
@ -62,7 +75,6 @@ p,h3,h4,pre {
list-style: none;
margin: 0 auto 50px;
max-width: 540px;
padding: 10px 0;
text-align: center;
width: 100%;
}
@ -73,22 +85,18 @@ p,h3,h4,pre {
margin-right: 1px;
}
.rslides_tabs a {
width: auto;
line-height: 20px;
.rslides_tabs button {
padding: 9px 20px;
height: auto;
background: transparent;
display: inline;
line-height: 20px;
color: #fff;
}
.rslides_tabs li:first-child {
margin-left: 0;
}
.rslides_tabs .rslides_here a {
.rslides_tabs .rslides_here button {
background: rgba(255,255,255,.1);
color: #fff;
font-weight: bold;
}
@ -207,21 +215,26 @@ h3 {
right: 0;
}
#slider3-pager a {
display: inline-block;
#slider3-pager {
padding: 9px;
}
#slider3-pager img {
float: left;
#slider3-pager li {
display: inline;
padding: 0 6px;
}
#slider3-pager .rslides_here a {
#slider3-pager button {
padding: 0;
}
#slider3-pager .rslides_here button {
background: transparent;
box-shadow: 0 0 0 2px #666;
}
#slider3-pager a {
padding: 0;
#slider3-pager img {
vertical-align: bottom;
}
@media screen and (max-width: 600px) {

6
demo/demo.html

@ -84,9 +84,9 @@
<!-- Slideshow 3 Pager -->
<ul id="slider3-pager">
<li><a href="#"><img src="images/1_thumb.jpg" alt=""></a></li>
<li><a href="#"><img src="images/2_thumb.jpg" alt=""></a></li>
<li><a href="#"><img src="images/3_thumb.jpg" alt=""></a></li>
<li><button type="button"><img src="images/1_thumb.jpg" alt=""></button></li>
<li><button type="button"><img src="images/2_thumb.jpg" alt=""></button></li>
<li><button type="button"><img src="images/3_thumb.jpg" alt=""></button></li>
</ul>

10
responsiveslides.js

@ -185,7 +185,7 @@
var n = i + 1;
tabMarkup +=
"<li>" +
"<a href='#' class='" + slideClassPrefix + n + "'>" + n + "</a>" +
"<button type='button' class='" + slideClassPrefix + n + "'>" + n + "</button>" +
"</li>";
});
$pager.append(tabMarkup);
@ -213,7 +213,7 @@
// If we have a pager, we need to set up the selectTab function
if (settings.pager || settings.manualControls) {
$tabs = $pager.find('a');
$tabs = $pager.find('button');
// Select pager item
selectTab = function (idx) {
@ -271,7 +271,6 @@
// Pager click event handler
if (settings.pager || settings.manualControls) {
$tabs.bind("click", function (e) {
e.preventDefault();
if (!settings.pauseControls) {
restartCycle();
@ -308,8 +307,8 @@
// Navigation
if (settings.nav) {
var navMarkup =
"<a href='#' class='" + navClass + " prev'>" + settings.prevText + "</a>" +
"<a href='#' class='" + navClass + " next'>" + settings.nextText + "</a>";
"<button type='button' class='" + navClass + " prev'>" + settings.prevText + "</button>" +
"<button type='button' class='" + navClass + " next'>" + settings.nextText + "</button>";
// Inject navigation
if (options.navContainer) {
@ -323,7 +322,6 @@
// Click event handler
$trigger.bind("click", function (e) {
e.preventDefault();
var $visibleClass = $("." + visibleClass);

8
responsiveslides.min.js vendored

@ -1,8 +1,2 @@
/*! http://responsiveslides.com v1.54 by @viljamis */
(function(c,I,B){c.fn.responsiveSlides=function(l){var a=c.extend({auto:!0,speed:500,timeout:4E3,pager:!1,nav:!1,random:!1,pause:!1,pauseControls:!0,prevText:"Previous",nextText:"Next",maxwidth:"",navContainer:"",manualControls:"",namespace:"rslides",before:c.noop,after:c.noop},l);return this.each(function(){B++;var f=c(this),s,r,t,m,p,q,n=0,e=f.children(),C=e.size(),h=parseFloat(a.speed),D=parseFloat(a.timeout),u=parseFloat(a.maxwidth),g=a.namespace,d=g+B,E=g+"_nav "+d+"_nav",v=g+"_here",j=d+"_on",
w=d+"_s",k=c("<ul class='"+g+"_tabs "+d+"_tabs' />"),x={"float":"left",position:"relative",opacity:1,zIndex:2},y={"float":"none",position:"absolute",opacity:0,zIndex:1},F=function(){var b=(document.body||document.documentElement).style,a="transition";if("string"===typeof b[a])return!0;s=["Moz","Webkit","Khtml","O","ms"];var a=a.charAt(0).toUpperCase()+a.substr(1),c;for(c=0;c<s.length;c++)if("string"===typeof b[s[c]+a])return!0;return!1}(),z=function(b){a.before(b);F?(e.removeClass(j).css(y).eq(b).addClass(j).css(x),
n=b,setTimeout(function(){a.after(b)},h)):e.stop().fadeOut(h,function(){c(this).removeClass(j).css(y).css("opacity",1)}).eq(b).fadeIn(h,function(){c(this).addClass(j).css(x);a.after(b);n=b})};a.random&&(e.sort(function(){return Math.round(Math.random())-0.5}),f.empty().append(e));e.each(function(a){this.id=w+a});f.addClass(g+" "+d);l&&l.maxwidth&&f.css("max-width",u);e.hide().css(y).eq(0).addClass(j).css(x).show();F&&e.show().css({"-webkit-transition":"opacity "+h+"ms ease-in-out","-moz-transition":"opacity "+
h+"ms ease-in-out","-o-transition":"opacity "+h+"ms ease-in-out",transition:"opacity "+h+"ms ease-in-out"});if(1<e.size()){if(D<h+100)return;if(a.pager&&!a.manualControls){var A=[];e.each(function(a){a+=1;A+="<li><a href='#' class='"+w+a+"'>"+a+"</a></li>"});k.append(A);l.navContainer?c(a.navContainer).append(k):f.after(k)}a.manualControls&&(k=c(a.manualControls),k.addClass(g+"_tabs "+d+"_tabs"));(a.pager||a.manualControls)&&k.find("li").each(function(a){c(this).addClass(w+(a+1))});if(a.pager||a.manualControls)q=
k.find("a"),r=function(a){q.closest("li").removeClass(v).eq(a).addClass(v)};a.auto&&(t=function(){p=setInterval(function(){e.stop(!0,!0);var b=n+1<C?n+1:0;(a.pager||a.manualControls)&&r(b);z(b)},D)},t());m=function(){a.auto&&(clearInterval(p),t())};a.pause&&f.hover(function(){clearInterval(p)},function(){m()});if(a.pager||a.manualControls)q.bind("click",function(b){b.preventDefault();a.pauseControls||m();b=q.index(this);n===b||c("."+j).queue("fx").length||(r(b),z(b))}).eq(0).closest("li").addClass(v),
a.pauseControls&&q.hover(function(){clearInterval(p)},function(){m()});if(a.nav){g="<a href='#' class='"+E+" prev'>"+a.prevText+"</a><a href='#' class='"+E+" next'>"+a.nextText+"</a>";l.navContainer?c(a.navContainer).append(g):f.after(g);var d=c("."+d+"_nav"),G=d.filter(".prev");d.bind("click",function(b){b.preventDefault();b=c("."+j);if(!b.queue("fx").length){var d=e.index(b);b=d-1;d=d+1<C?n+1:0;z(c(this)[0]===G[0]?b:d);if(a.pager||a.manualControls)r(c(this)[0]===G[0]?b:d);a.pauseControls||m()}});
a.pauseControls&&d.hover(function(){clearInterval(p)},function(){m()})}}if("undefined"===typeof document.body.style.maxWidth&&l.maxwidth){var H=function(){f.css("width","100%");f.width()>u&&f.css("width",u)};H();c(I).bind("resize",function(){H()})}})}})(jQuery,this,0);
(function(c,J,C){c.fn.responsiveSlides=function(m){var a=c.extend({auto:!0,speed:500,timeout:4E3,pager:!1,nav:!1,random:!1,pause:!1,pauseControls:!0,prevText:"Previous",nextText:"Next",maxwidth:"",navContainer:"",manualControls:"",namespace:"rslides",before:c.noop,after:c.noop},m);return this.each(function(){C++;var f=c(this),t,s,u,n,q,r,p=0,e=f.children(),D=e.size(),h=parseFloat(a.speed),E=parseFloat(a.timeout),v=parseFloat(a.maxwidth),g=a.namespace,d=g+C,F=g+"_nav "+d+"_nav",w=g+"_here",k=d+"_on", x=d+"_s",l=c("<ul class='"+g+"_tabs "+d+"_tabs' />"),y={"float":"left",position:"relative",opacity:1,zIndex:2},z={"float":"none",position:"absolute",opacity:0,zIndex:1},G=function(){var b=(document.body||document.documentElement).style,a="transition";if("string"===typeof b[a])return!0;t=["Moz","Webkit","Khtml","O","ms"];var a=a.charAt(0).toUpperCase()+a.substr(1),c;for(c=0;c<t.length;c++)if("string"===typeof b[t[c]+a])return!0;return!1}(),A=function(b){a.before(b);G?(e.removeClass(k).css(z).eq(b).addClass(k).css(y), p=b,setTimeout(function(){a.after(b)},h)):e.stop().fadeOut(h,function(){c(this).removeClass(k).css(z).css("opacity",1)}).eq(b).fadeIn(h,function(){c(this).addClass(k).css(y);a.after(b);p=b})};a.random&&(e.sort(function(){return Math.round(Math.random())-0.5}),f.empty().append(e));e.each(function(a){this.id=x+a});f.addClass(g+" "+d);m&&m.maxwidth&&f.css("max-width",v);e.hide().css(z).eq(0).addClass(k).css(y).show();G&&e.show().css({"-webkit-transition":"opacity "+h+"ms ease-in-out","-moz-transition":"opacity "+ h+"ms ease-in-out","-o-transition":"opacity "+h+"ms ease-in-out",transition:"opacity "+h+"ms ease-in-out"});if(1<e.size()){if(E<h+100)return;if(a.pager&&!a.manualControls){var B=[];e.each(function(a){a+=1;B+="<li><button type='button' class='"+x+a+"'>"+a+"</button></li>"});l.append(B);m.navContainer?c(a.navContainer).append(l):f.after(l)}a.manualControls&&(l=c(a.manualControls),l.addClass(g+"_tabs "+d+"_tabs"));(a.pager||a.manualControls)&&l.find("li").each(function(a){c(this).addClass(x+(a+1))}); if(a.pager||a.manualControls)r=l.find("button"),s=function(a){r.closest("li").removeClass(w).eq(a).addClass(w)};a.auto&&(u=function(){q=setInterval(function(){e.stop(!0,!0);var b=p+1<D?p+1:0;(a.pager||a.manualControls)&&s(b);A(b)},E)},u());n=function(){a.auto&&(clearInterval(q),u())};a.pause&&f.hover(function(){clearInterval(q)},function(){n()});if(a.pager||a.manualControls)r.bind("click",function(b){a.pauseControls||n();b=r.index(this);p===b||c("."+k).queue("fx").length||(s(b),A(b))}).eq(0).closest("li").addClass(w), a.pauseControls&&r.hover(function(){clearInterval(q)},function(){n()});if(a.nav){g="<button type='button' class='"+F+" prev'>"+a.prevText+"</button><button type='button' class='"+F+" next'>"+a.nextText+"</button>";m.navContainer?c(a.navContainer).append(g):f.after(g);var d=c("."+d+"_nav"),H=d.filter(".prev");d.bind("click",function(b){b=c("."+k);if(!b.queue("fx").length){var d=e.index(b);b=d-1;d=d+1<D?p+1:0;A(c(this)[0]===H[0]?b:d);(a.pager||a.manualControls)&&s(c(this)[0]===H[0]?b:d);a.pauseControls|| n()}});a.pauseControls&&d.hover(function(){clearInterval(q)},function(){n()})}}if("undefined"===typeof document.body.style.maxWidth&&m.maxwidth){var I=function(){f.css("width","100%");f.width()>v&&f.css("width",v)};I();c(J).bind("resize",function(){I()})}})}})(jQuery,this,0);

Loading…
Cancel
Save