fg-collapsible - npm Package Compare versions

Comparing version 0.8.0 to 0.9.0

package.json

 {
   "name": "fg-collapsible",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Toggle your collapsible content",
@@ -5,0 +5,0 @@ "scripts": {

src/collapsible.js

@@ -22,2 +22,3 @@ /*
 		instructions: false,
+		innerButton: false, // this wraps the text of the header in a button and transfers the aria info to that button
 		collapsed: false
@@ -76,2 +77,6 @@ };
 			}
+			if( this.options.innerButton ){
+				this.headerHTML = this.header.text();
+				this.headerButton = $( "<button></button>" ).append( this.headerHTML );
+			}
 			this._addAttributes();
@@ -98,13 +103,25 @@ this._bindEvents();
 		_addA11yAttrs: function(){
-			this.header.attr( "role", "button" );
-			this.header.attr( "tabindex", "0" );
-			if( this.options.instructions ){
-				this.header.attr( "title", this.options.instructions );
+			if( this.options.innerButton ){
+					this.header.html( '' );
+					this.header.append( this.headerButton );
 			}
+			else {
+				this.header.attr( "role", "button" );
+				this.header.attr( "tabindex", "0" );
+				if( this.options.instructions ){
+					this.header.attr( "title", this.options.instructions );
+				}
+			}
 		},
 
 		_removeA11yAttrs: function(){
-			this.header.removeAttr( "role" );
-			this.header.removeAttr( "tabindex" );
-			this.header.removeAttr( "title" );
+			if( this.options.innerButton ){
+				this.header.html( '' );
+				this.header.append( this.headerHTML );
+			}
+			else {
+				this.header.removeAttr( "role" );
+				this.header.removeAttr( "tabindex" );
+				this.header.removeAttr( "title" );
+			}
 		},
@@ -115,2 +132,5 @@
 			var computedHeader = window.getComputedStyle( this.header[ 0 ], null );
+			if( this.options.innerButton ){
+				computedHeader = window.getComputedStyle( this.headerButton[ 0 ], null );
+			}
 			return computedContent.getPropertyValue( "display" ) !== "none" && computedContent.getPropertyValue( "visibility" ) !== "hidden" && computedHeader.getPropertyValue( "cursor" ) === "default";
@@ -170,3 +190,8 @@ },
 			this.element.addClass( this.options.expandedClass );
-			this.header.attr( "aria-expanded", "true" );
+			if( this.options.innerButton ){
+				this.headerButton.attr( "aria-expanded", "true" );
+			}
+			else {
+				this.header.attr( "aria-expanded", "true" );
+			}
 			this.collapsed = false;
@@ -185,3 +210,8 @@ },
 			this.element.removeClass( this.options.expandedClass );
-			this.header.attr( "aria-expanded", "false" );
+			if( this.options.innerButton ){
+				this.headerButton.attr( "aria-expanded", "false" );
+			}
+			else {
+				this.header.attr( "aria-expanded", "false" );
+			}
 			this.collapsed = true;
@@ -188,0 +218,0 @@ },

src/lib/xrayhtml.js

@@ -1,2 +0,2 @@
-/*! X-rayHTML - v2.1.2 - 2016-05-18
+/*! X-rayHTML - v2.1.3 - 2016-12-20
 * https://github.com/filamentgroup/x-rayhtml
@@ -3,0 +3,0 @@ * Copyright (c) 2016 Filament Group; Licensed MIT */

test/test.js

@@ -48,2 +48,12 @@ (function($) {
 
+	test( "inner button", function() {
+		ok( $( "#innerButton .collapsible-header button" ).length, "button exists" );
+		ok( $( "#innerButton .collapsible-header button" ).is( "[aria-expanded='false']" ), "aria-expanded attr (false) is on the button" );
+		ok( $( "#innerButton .collapsible-header button" ).text() === "Toggle collapsible content", "button content is correct" );
+		$( "#innerButton .collapsible-header button" ).trigger( "click" );
+		ok( $( "#innerButton .collapsible-header button" ).is( "[aria-expanded='true']" ), "aria-expanded attr (true) is on the button" );
+
+
+	});
+
 	test( "Click the header", function() {
@@ -50,0 +60,0 @@ $( "#default .collapsible-header" ).trigger( "click" );

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

342208

increased by0.74%

Lines of code

9616

increased by0.37%

No dependency changes