Added ARIA accessibility labels for the accordion. Thanks Amber Hinds!

mtoensing · Sep 8, 2023 · 5159f09 · 5159f09
1 parent 434c0a7
commit 5159f09
Show file tree

Hide file tree

Showing 11 changed files with 2,078 additions and 1,650 deletions.
diff --git a/build/block.json b/build/block.json
@@ -2,7 +2,7 @@
   "$schema": "https://json.schemastore.org/block.json",
   "apiVersion": 2,
   "name": "simpletoc/toc",
-  "version": "6.0.5",
+  "version": "6.0.6",
   "title": "SimpleTOC",
   "category": "layout",
   "icon": "<svg clip-rule='evenodd' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'><path d='m365.983 78.248c2.72-32.415 29.921-57.908 63.029-57.908 34.91 0 63.253 28.342 63.253 63.252s-28.343 63.252-63.253 63.252v269.582c0 25.232-20.485 45.718-45.718 45.718h-313.62c-25.233 0-45.719-20.486-45.719-45.718v-292.46c0-25.233 20.486-45.718 45.719-45.718z' fill='#070D0D'/><g fill='#fff'><path d='m423.898 112.744v-24.188h-24.008v-10.108h24.008v-24.008h10.229v24.008h24.008v10.108h-24.008v24.188z'/><path d='m120.04 403.105c-16.883 0-30.511-13.719-30.511-30.714 0-16.79 13.628-30.714 30.511-30.714 16.679 0 30.511 13.924 30.511 30.714 0 16.995-13.832 30.714-30.511 30.714z'/><path d='m170.891 362.153h183.063v20.476h-183.063z'/><path d='m120.04 300.725c-16.883 0-30.511-13.719-30.511-30.714 0-16.79 13.628-30.714 30.511-30.714 16.679 0 30.511 13.924 30.511 30.714 0 16.995-13.832 30.714-30.511 30.714z'/><path d='m170.891 259.773h183.063v20.476h-183.063z'/><path d='m120.04 198.345c-16.883 0-30.511-13.719-30.511-30.714 0-16.791 13.628-30.714 30.511-30.714 16.679 0 30.511 13.923 30.511 30.714 0 16.995-13.832 30.714-30.511 30.714z'/><path d='m170.891 157.393h183.063v20.476h-183.063z'/></g></svg>",

diff --git a/build/index.asset.php b/build/index.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-editor', 'wp-element', 'wp-i18n', 'wp-primitives', 'wp-server-side-render'), 'version' => '9c932e7fc3fd2cb98078');
+<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-editor', 'wp-element', 'wp-i18n', 'wp-primitives', 'wp-server-side-render'), 'version' => 'befba07e6fc7d1864274');
diff --git a/build/index.css b/build/index.css
diff --git a/build/index.js b/build/index.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "simpletoc",
-	"version": "6.0.5",
+	"version": "6.0.6",
 	"author": "Marc Tönsing",
 	"description": "SEO-friendly Table of Contents Gutenberg block. No JavaScript and no CSS means faster loading.",
 	"main": "build/index.js",
@@ -22,12 +22,12 @@
 		"wp-int": "npm install @wordpress/scripts --save-dev --save-exact @wordpress/scripts"
 	},
 	"devDependencies": {
-		"@wordpress/env": "^8.4.0",
-		"@wordpress/scripts": "^26.9.0"
+		"@wordpress/env": "^8.7.0",
+		"@wordpress/scripts": "^26.12.0"
 	},
 	"dependencies": {
-		"@wordpress/i18n": "^4.38.0",
-		"@wordpress/icons": "^9.29.0",
-		"@wordpress/server-side-render": "^4.15.0"
+		"@wordpress/i18n": "^4.41.0",
+		"@wordpress/icons": "^9.32.0",
+		"@wordpress/server-side-render": "^4.18.0"
 	}
 }
diff --git a/plugin.php b/plugin.php
@@ -4,7 +4,7 @@
  * Plugin Name:   SimpleTOC - Table of Contents Block
  * Plugin URI:    https://marc.tv/simpletoc-wordpress-inhaltsverzeichnis-plugin-gutenberg/
  * Description:   SEO-friendly Table of Contents Gutenberg block. No JavaScript and no CSS means faster loading.
- * Version:       6.0.5
+ * Version:       6.0.6
  * Author:        Marc Tönsing
  * Author URI:    https://marc.tv
  * Text Domain:   simpletoc
@@ -618,7 +618,7 @@ function add_accordion_start($html, $attributes, $itemcount, $alignclass)
     if ($isAccordionEnabled) {
         enqueue_accordion_frontend();
         $titleText = esc_html(trim($attributes['title_text'])) ?: __('Table of Contents', 'simpletoc');
-        $accordionStart = '<button type="button" aria-expanded="false" aria-controls="simpletoc-content-container" class="simpletoc-collapsible">' . $titleText . '</button><div class="simpletoc-content">';
+        $accordionStart = '<h2><button type="button" aria-expanded="false" aria-controls="simpletoc-content-container" class="simpletoc-collapsible">' . $titleText . '</button></h2><div class="simpletoc-content">';
         $accordionEnd = '</div>';
     }
 

diff --git a/readme.txt b/readme.txt
@@ -4,7 +4,7 @@ Tags: Gutenberg, block, TOC, Table of Contents, AMP
 Requires at least: 5.9
 Donate link: https://marc.tv/out/donate
 Tested up to: 6.3
-Stable tag: 6.0.5
+Stable tag: 6.0.6
 Requires PHP: 7.0
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
@@ -50,6 +50,9 @@ SimpleTOC is open-source and developed on [GitHub Pages](https://github.com/mtoe
 
 == Changelog ==
 
+= 6.0.6 =
+* Added ARIA accessibility labels for the accordion. Thanks Amber Hinds!
+
 = 6.0.5 =
 * Compatibilty with WordPress 6.3
 

diff --git a/src/accordion.css b/src/accordion.css
@@ -2,6 +2,10 @@
 	margin-bottom: 1em;
 }
 
+.wp-block-simpletoc-toc h2 {
+	margin: 0;
+}
+
 .simpletoc-collapsible {
 	background-color: #eee;
 	color: #444;

diff --git a/src/accordion.js b/src/accordion.js
@@ -1,13 +1,13 @@
-const coll = document.getElementsByClassName( 'simpletoc-collapsible' );
+const button = document.querySelector( 'button.simpletoc-collapsible ' );
 
-for ( const element of coll ) {
-	element.addEventListener( 'click', function () {
+if ( button ) {
+	button.addEventListener( 'click', function () {
 		this.classList.toggle( 'active' );
-		const content = this.nextElementSibling;
+		const content = this.parentElement.nextElementSibling;
 		content.style.display =
 			content.style.display === 'block' ? 'none' : 'block';
 
-		// Toggle aria-expanded attribute
+		// Toggle aria-expanded attribute on the button
 		const ariaExpanded = this.getAttribute( 'aria-expanded' );
 		if ( ariaExpanded === 'true' ) {
 			this.setAttribute( 'aria-expanded', 'false' );

diff --git a/src/block.json b/src/block.json
@@ -2,7 +2,7 @@
 	"$schema": "https://json.schemastore.org/block.json",
 	"apiVersion": 2,
 	"name": "simpletoc/toc",
-	"version": "6.0.5",
+	"version": "6.0.6",
 	"title": "SimpleTOC",
 	"category": "layout",
 	"icon": "<svg clip-rule='evenodd' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'><path d='m365.983 78.248c2.72-32.415 29.921-57.908 63.029-57.908 34.91 0 63.253 28.342 63.253 63.252s-28.343 63.252-63.253 63.252v269.582c0 25.232-20.485 45.718-45.718 45.718h-313.62c-25.233 0-45.719-20.486-45.719-45.718v-292.46c0-25.233 20.486-45.718 45.719-45.718z' fill='#070D0D'/><g fill='#fff'><path d='m423.898 112.744v-24.188h-24.008v-10.108h24.008v-24.008h10.229v24.008h24.008v10.108h-24.008v24.188z'/><path d='m120.04 403.105c-16.883 0-30.511-13.719-30.511-30.714 0-16.79 13.628-30.714 30.511-30.714 16.679 0 30.511 13.924 30.511 30.714 0 16.995-13.832 30.714-30.511 30.714z'/><path d='m170.891 362.153h183.063v20.476h-183.063z'/><path d='m120.04 300.725c-16.883 0-30.511-13.719-30.511-30.714 0-16.79 13.628-30.714 30.511-30.714 16.679 0 30.511 13.924 30.511 30.714 0 16.995-13.832 30.714-30.511 30.714z'/><path d='m170.891 259.773h183.063v20.476h-183.063z'/><path d='m120.04 198.345c-16.883 0-30.511-13.719-30.511-30.714 0-16.791 13.628-30.714 30.511-30.714 16.679 0 30.511 13.923 30.511 30.714 0 16.995-13.832 30.714-30.511 30.714z'/><path d='m170.891 157.393h183.063v20.476h-183.063z'/></g></svg>",