Accessibility added, v2.6.0d6 (S.T. 2.5.10).

= Reference container semantics for assistive technology =
- Table header elements with row scope in the first column.
- Table caption invisible to sighted users but required for screen readers.
= Referrer accessibility =
- jQuery referrers are accessible but don’t show the tooltips on focus.
- AMP compatible tooltips show up on focus on navigatable referrers.
- Alternative tooltips now accessible on focus on now navigatable referrers.

git-svn-id: https://plugins.svn.wordpress.org/footnotes/trunk@2498648 b8457f37-d9ea-0310-8a92-e5e31aec5664

templates/public/amp-reference-container-collapsed.html

@@ -2,23 +2,27 @@
 	/**
 	 * Reference container template to enable AMP compatibility mode.
 	 *
-	 * - Adding: Tooltips: make display work purely by style rules for AMP compatibility, thanks to @milindmore22 and @westonruter code contributions.
 	 * - Adding: Reference container: get expanding and collapsing to work also in AMP compatibility mode, thanks to @westonruter code contribution.
 	 *
 	 * @since 2.6.0
 	 *
-	 * @contributor @milindmore22
-	 * @link @link https://github.com/ampproject/amp-wp/issues/5913#issuecomment-785306933
-	 *
 	 * @contributor @westonruter
-	 * @link https://github.com/ampproject/amp-wp/issues/5913#issuecomment-785419655
 	 * @link https://github.com/markcheret/footnotes/issues/48#issuecomment-799580854
 	 * @link https://github.com/markcheret/footnotes/issues/48#issuecomment-799582394
-	 *
-	 * Using the `tap` event.
-	 * @link https://amp.dev/documentation/guides-and-tutorials/learn/amp-actions-and-events
-	 * Using the `toggleClass` action.
 	 * @link https://amp.dev/documentation/guides-and-tutorials/learn/amp-actions-and-events/#*-(all-elements)
+	 *
+	 * - Bugfix: Reference container: apply web semantics to improve readability for assistive technologies, thanks to @derivationfr issue report and code contribution.
+	 *
+	 * @since 2.6.0
+	 *
+	 * @contributor @derivationfr
+	 * @link https://wordpress.org/support/topic/enhance-accesibility-by-using-instead-of/
+	 * @link https://a11y-101.com/development/tables
+	 *
+	 * For assistive technologies to improve accessibility by reading tables in a meaningful manner,
+	 * the tables must be marked up properly using table header elements for header rows and header
+	 * columns as applicable.
+	 * The table caption must also be present for screen readers but may be hidden to sighted users.
 	 */?>
 -->
 <div
@@ -28,11 +32,15 @@
 		class="footnote_container_prepare"
 		><[[element]]
 			><span
+				role="button"
+				tabindex="0"
 				id="footnotes_container_label_expand_[[post_id]]_[[container_id]]"
 				class="footnote_reference_container_label pointer"
 				on="tap:footnote_references_container_[[post_id]]_[[container_id]].toggleClass(class=collapsed),footnotes_container_button_plus_[[post_id]]_[[container_id]].toggleClass(class=collapsed),footnotes_container_button_minus_[[post_id]]_[[container_id]].toggleClass(class=collapsed)"
 				>[[name]]</span
 			><span
+				role="button"
+				tabindex="0"
 				id="footnotes_container_button_plus_[[post_id]]_[[container_id]]"
 				class="footnote_reference_container_collapse_button"
 				on="tap:footnote_references_container_[[post_id]]_[[container_id]].toggleClass(class=collapsed),footnotes_container_button_plus_[[post_id]]_[[container_id]].toggleClass(class=collapsed),footnotes_container_button_minus_[[post_id]]_[[container_id]].toggleClass(class=collapsed)"
@@ -40,6 +48,8 @@
 			><span
 			></span
 			><span
+				role="button"
+				tabindex="0"
 				id="footnotes_container_button_minus_[[post_id]]_[[container_id]]"
 				class="footnote_reference_container_collapse_button collapsed"
 				on="tap:footnote_references_container_[[post_id]]_[[container_id]].toggleClass(class=collapsed),footnotes_container_button_plus_[[post_id]]_[[container_id]].toggleClass(class=collapsed),footnotes_container_button_minus_[[post_id]]_[[container_id]].toggleClass(class=collapsed)"
@@ -50,10 +60,12 @@
 	<div
 		id="footnote_references_container_[[post_id]]_[[container_id]]"
 		class="collapsed"
-	>
-		<table
+		><table
 			class="footnotes_table footnote-reference-container"
-		>
+			><caption
+				class="accessibility"
+				>[[caption]]</caption
+			>
 			<tbody>
 				[[content]]
 			</tbody>