Skip to content

Commit

Permalink
Full keyboard accessibility
Browse files Browse the repository at this point in the history 
ARIA labeling
  • Loading branch information
@NickPiscitelli
NickPiscitelli committed Nov 17, 2018
1 parent dd02c8d commit cbd191b
Show file tree
Hide file tree
Showing 7 changed files with 85 additions and 65 deletions.
34 changes: 19 additions & 15 deletions docs/assets/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1829,7 +1829,6 @@ input, select, textarea {
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
-moz-appearance: none;
-webkit-appearance: none;
Expand Down Expand Up @@ -1898,8 +1897,6 @@ input, select, textarea {
input[type="reset"]:disabled,
input[type="button"].disabled,
input[type="button"]:disabled,
button.disabled,
button:disabled,
.button.disabled,
.button:disabled {
pointer-events: none;
Expand All @@ -1911,7 +1908,6 @@ input, select, textarea {
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
min-width: 0;
}
Expand All @@ -1921,7 +1917,6 @@ input, select, textarea {
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
background-color: transparent;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
Expand All @@ -1931,15 +1926,13 @@ input, select, textarea {
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover,
.button:hover {
background-color: rgba(255, 255, 255, 0.075);
}

input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active,
button:active,
.button:active {
background-color: rgba(255, 255, 255, 0.2);
}
Expand Down Expand Up @@ -3354,7 +3347,6 @@ input, select, textarea {
#main input[type="submit"],
#main input[type="reset"],
#main input[type="button"],
#main button,
#main .button {
background-color: transparent;
box-shadow: inset 0 0 0 1px #dddddd;
Expand All @@ -3364,15 +3356,13 @@ input, select, textarea {
#main input[type="submit"]:hover,
#main input[type="reset"]:hover,
#main input[type="button"]:hover,
#main button:hover,
#main .button:hover {
background-color: rgba(222, 222, 222, 0.25);
}

#main input[type="submit"]:active,
#main input[type="reset"]:active,
#main input[type="button"]:active,
#main button:active,
#main .button:active {
background-color: rgba(222, 222, 222, 0.5);
}
Expand Down Expand Up @@ -3777,8 +3767,12 @@ input, select, textarea {
height: 0;
}
.glider-prev, .glider-next {
user-select: none;
position: absolute;
outline: none;
position: absolute;
width: 10px;
background: none;
width: 51px;
z-index: 2;
font-size: 40px;
text-decoration: none;
Expand All @@ -3792,22 +3786,23 @@ input, select, textarea {
transition: opacity .25s cubic-bezier(.17,.67,.83,.67),
color .5s cubic-bezier(.17,.67,.83,.67);
}
#main .glider-prev:hover, #main .glider-next:hover {
#main .glider-prev:hover, #main .glider-next:hover,
#main .glider-prev:focus, #main .glider-next:focus {
color: #8cc9f0;
}
.multiple .glider-prev, .multiple .glider-next {
font-size: 20px;
top: 37%;
}
.glider-next {
right: -23px;
right: -45px;
left: auto;
}
.multiple .glider-next {
right: -18px;
right: -42px;
}
.multiple .glider-prev {
left: -22px;
left: -42px;
}
.glider-next.disabled,
.glider-prev.disabled {
Expand All @@ -3832,6 +3827,10 @@ input, select, textarea {
padding: 0;
}
.glider-dot {
background: none;
border: 0;
padding: 0;
outline: none;
display: block;
cursor: pointer;
color: #ccc;
Expand All @@ -3840,6 +3839,11 @@ input, select, textarea {
width: 12px;
height: 12px;
margin: 7px;
padding: 0;
border: 0;
}
.glider-dot:hover, .glider-dot:focus {
background: #8cc9f0;
}
.glider-dot.active {
background: #a89cc8;
Expand Down
11 changes: 6 additions & 5 deletions docs/assets/js/glider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,13 +159,14 @@
_.dots.className = 'glider-dots';

for (var i = 0; i < Math.ceil(_.slides.length / _.opt.slidesToShow); ++i){
var li = document.createElement(_.opt.dotTag || 'i');
li.setAttribute('data-index', i);
li.className = 'glider-dot '+(i ? '' : 'active');
_.event(li, 'add', {
var dot = document.createElement('button');
dot.dataset.index = i;
dot.setAttribute('aria-label', 'Page '+(i+1));
dot.className = 'glider-dot '+(i ? '' : 'active');
_.event(dot, 'add', {
click: _.scrollItem.bind(_, i, true)
})
_.dots.appendChild(li);
_.dots.appendChild(dot);
}
}

Expand Down
45 changes: 22 additions & 23 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,14 +98,12 @@ <h2>Features</h2>
<li><i class="fas fa-check"></i>Native Browser Scroll (momentum scrolling!)</li>
<li><i class="fas fa-check"></i>Fully Responsive (breakpoint based settings)</li>
<li><i class="fas fa-check"></i>Customizable Arrow and Dot Navigation</li>
<li><i class="fas fa-check"></i>Supports Mouse Dragging!</li>
<li><i class="fas fa-check"></i>Full Keyboard Accessibility + ARIA Labeling</li>
<li><i class="fas fa-check"></i>Mouse Dragging Support!</li>
<li><i class="fas fa-check"></i>Flexbox Support (enabled by default)</li>
<li><i class="fas fa-check"></i>Easily Extendable</li>
<li><i class="fas fa-check"></i>Custom Events</li>
</ul>

<ul class="actions">
<li><a href="#faq" class="button smooth-scroll">Learn More</a></li>
<li><i class="fas fa-check"></i>and much more!</li>
</ul>
</div>
</div>
Expand Down Expand Up @@ -136,8 +134,8 @@ <h2>Single Item</h2>
</div>
</div>
<div id="dots"></div>
<a class="glider-prev" id="glider-prev"><i class="fa fa-chevron-left"></i></i></a>
<a class="glider-next" id="glider-next"><i class="fa fa-chevron-right"></i></i></a>
<button role="button" aria-label="Previous" class="glider-prev" id="glider-prev"><i class="fa fa-chevron-left"></i></i></button>
<button role="button" aria-label="Next" class="glider-next" id="glider-next"><i class="fa fa-chevron-right"></i></i></button>
</div>
<script>
window.addEventListener('load', function(){
Expand Down Expand Up @@ -199,8 +197,8 @@ <h2>Multiple Item</h2>
</div>
</div>
<div id="dots2"></div>
<a class="glider-prev" id="glider-prev-2"><i class="fa fa-chevron-left"></i></i></a>
<a class="glider-next" id="glider-next-2"><i class="fa fa-chevron-right"></i></i></a>
<button role="button" aria-label="Previous" class="glider-prev" id="glider-prev-2"><i class="fa fa-chevron-left"></i></i></button>
<button role="button" aria-label="Next" class="glider-next" id="glider-next-2"><i class="fa fa-chevron-right"></i></i></button>
</div>
<script>
window.addEventListener('load', function () {
Expand Down Expand Up @@ -254,8 +252,8 @@ <h2>Perspective View<span class="aside">(themeable CSS)</span></h2>
<div><div class="gradient-border-bottom"><div class="gradient-border"><h1>15</h1></div></div></div>
</div>
<div id="dots-per"></div>
<a class="glider-prev" id="glider-prev-per"><i class="fa fa-chevron-left"></i></i></a>
<a class="glider-next" id="glider-next-per"><i class="fa fa-chevron-right"></i></i></a>
<button role="button" aria-label="Previous" class="glider-prev" id="glider-prev-per"><i class="fa fa-chevron-left"></i></i></button>
<button role="button" aria-label="Next" class="glider-next" id="glider-next-per"><i class="fa fa-chevron-right"></i></i></button>
</div>
<script>
window.addEventListener('load', function () {
Expand Down Expand Up @@ -307,8 +305,8 @@ <h2>Responsive Settings / Scroll Lock Support</h2>
</div>
</div>
<div id="resp-dots"></div>
<a class="glider-prev" id="glider-prev-resp"><i class="fa fa-chevron-left"></i></i></a>
<a class="glider-next" id="glider-next-resp"><i class="fa fa-chevron-right"></i></i></a>
<button role="button" aria-label="Previous" class="glider-prev" id="glider-prev-resp"><i class="fa fa-chevron-left"></i></i></button>
<button role="button" aria-label="Next" class="glider-next" id="glider-next-resp"><i class="fa fa-chevron-right"></i></i></button>
</div>
<script>
window.addEventListener('load',function(){
Expand Down Expand Up @@ -398,9 +396,9 @@ <h2>Fractional Slides</h2>
</div>
</div>
</div>
<div id="frac-dots"></div>
<a class="glider-prev" id="cut-prev"><i class="fa fa-chevron-left"></i></i></a>
<a class="glider-next" id="cut-next"><i class="fa fa-chevron-right"></i></i></a>
<div role="tablist" id="frac-dots"></div>
<button role="button" aria-label="Previous" class="glider-prev" id="cut-prev"><i class="fa fa-chevron-left"></i></i></button>
<button role="button" aria-label="Next" class="glider-next" id="cut-next"><i class="fa fa-chevron-right"></i></i></button>
</div>
<script>
window.addEventListener('load',function(){
Expand Down Expand Up @@ -453,8 +451,8 @@ <h2>Add/Remove Items</h2>
</div>
</div>
<div id="add-dots"></div>
<a class="glider-prev" id="glider-prev-add"><i class="fa fa-chevron-left"></i></i></a>
<a class="glider-next" id="glider-next-add"><i class="fa fa-chevron-right"></i></i></a>
<button role="button" aria-label="Previous" class="glider-prev" id="glider-prev-add"><i class="fa fa-chevron-left"></i></i></button>
<button role="button" aria-label="Next" class="glider-next" id="glider-next-add"><i class="fa fa-chevron-right"></i></i></button>
</div>
<p class="buttons">
<a class="button" id="addSlide">Add</a>
Expand Down Expand Up @@ -669,8 +667,8 @@ <h4 class="cool-border">Awesome JS</h4>
</div>
</div>
<div id="dots-content"></div>
<a class="glider-prev" id="glider-prev-content"><i class="fa fa-chevron-left"></i></i></a>
<a class="glider-next" id="glider-next-content"><i class="fa fa-chevron-right"></i></i></a>
<button role="button" aria-label="Previous" class="glider-prev" id="glider-prev-content"><i class="fa fa-chevron-left"></i></i></button>
<button role="button" aria-label="Next" class="glider-next" id="glider-next-content"><i class="fa fa-chevron-right"></i></i></button>
</div>
<script>
new Glider(document.getElementById('glider-content'), {
Expand Down Expand Up @@ -767,9 +765,10 @@ <h2>Getting Started</h2>
&lt;div&gt;your content here&lt;/div&gt;
&lt;div&gt;your content here&lt;/div&gt;
&lt;/div&gt;
&lt;div class="dots"&gt;&lt;/div&gt;
&lt;a class="glider-prev"&gt;&laquo;&lt;/a&gt;
&lt;a class="glider-next"&gt;&raquo;&lt;/a&gt;

&lt;button role="button" aria-label="Previous" class="glider-prev"&gt;&laquo;&lt;/button&gt;
&lt;button role="button" aria-label="Next" class="glider-next"&gt;&raquo;&lt;/button&gt;
&lt;div role="tablist" class="dots"&gt;&lt;/div&gt;
&lt;/div&gt;
</code>
</pre>
Expand Down
25 changes: 20 additions & 5 deletions glider.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,8 @@
}
.glider {
margin: 0 auto;
position:relative;
overflow-x: auto;
position: relative;
overflow-y: hidden;
overflow: -moz-scrollbars-none;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
transform: translateZ(0);
Expand Down Expand Up @@ -48,22 +46,31 @@
opacity: 0;
height: 0;
}
.glider .glider-prev, .glider .glider-next {
.glider-prev,.glider-next {
user-select: none;
position: absolute;
outline: none;
background: none;
padding: 0;
z-index: 2;
font-size: 40px;
text-decoration: none;
left: -23px;
border: 0;
top: 30%;
cursor: pointer;
color: #a89cc8;
color: #666;
opacity: 1;
line-height: 1;
transition: opacity .5s cubic-bezier(.17,.67,.83,.67),
color .5s cubic-bezier(.17,.67,.83,.67);
}
.glider-prev:hover,
.glider-next:hover,
.glider-prev:focus,
.glider-next:focus {
color: #ccc;
}
.glider-next {
right: -23px;
left: auto;
Expand All @@ -89,7 +96,11 @@
padding: 0;
}
.glider-dot {
background: none;
border: 0;
padding: 0;
user-select: none;
outline: none;
display: block;
cursor: pointer;
color: #ccc;
Expand All @@ -99,6 +110,10 @@
height: 12px;
margin: 7px;
}
.glider-dot:hover,
.glider-dot:focus {
background: #ddd;
}
.glider-dot.active {
background: #a89cc8;
}
Expand Down
11 changes: 6 additions & 5 deletions glider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,13 +159,14 @@
_.dots.className = 'glider-dots';

for (var i = 0; i < Math.ceil(_.slides.length / _.opt.slidesToShow); ++i){
var li = document.createElement(_.opt.dotTag || 'i');
li.setAttribute('data-index', i);
li.className = 'glider-dot '+(i ? '' : 'active');
_.event(li, 'add', {
var dot = document.createElement('button');
dot.dataset.index = i;
dot.setAttribute('aria-label', 'Page '+(i+1));
dot.className = 'glider-dot '+(i ? '' : 'active');
_.event(dot, 'add', {
click: _.scrollItem.bind(_, i, true)
})
_.dots.appendChild(li);
_.dots.appendChild(dot);
}
}

Expand Down
2 changes: 1 addition & 1 deletion glider.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit cbd191b

Please sign in to comment.