Make close icon accessible [#260]

noelboss · Nov 16, 2016 · 8f160d2 · 8f160d2
1 parent c454ed8
commit 8f160d2
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/src/featherlight.css b/src/featherlight.css
@@ -92,6 +92,7 @@
 		background: #fff; /* Set the background in case it overlaps the content */
 		background: rgba(255, 255, 255, 0.3);
 		color: #000;
+		text-decoration: inherit;
 	}
 
 

diff --git a/src/featherlight.js b/src/featherlight.js
@@ -136,9 +136,9 @@
 				$background = $(self.background || [
 					'<div class="'+css+'-loading '+css+'">',
 						'<div class="'+css+'-content">',
-							'<span class="'+css+'-close-icon '+ self.namespace + '-close">',
+							'<a href="#" class="'+css+'-close-icon '+ self.namespace + '-close" aria-label="Close">',
 								self.closeIcon,
-							'</span>',
+							'</a>',
 							'<div class="'+self.namespace+'-inner">' + self.loading + '</div>',
 						'</div>',
 					'</div>'].join('')),

diff --git a/test/featherlight_test.js b/test/featherlight_test.js
@@ -416,5 +416,13 @@ var stubAjaxLoad = function(content) {
 			});
 		});
 
+		describe('accessibility', function() {
+			it('has a focusable close button', function() {
+				$.featherlight({text: 'Hello'});
+				close = $('.featherlight-close-icon')
+				close.focus();
+				expect($(document.activeElement)).to.have.class('featherlight-close-icon');
+			});
+		});
 	});
 }(jQuery));