footnotes/templates/public/reference-container.html

<!--<?php//for docblock, @see MCI_Footnotes_Template::process_template()
	/**
	 * Yields the reference container start and end including the scroll script.
	 *
	 * @since unknown
	 * @type object
	 *
	 * - Bugfix: Reference container: restore expand/collapse button in the template, thanks to @ragonesi bug report.
	 *
	 * @since 2.0.2
	 *
	 * @reporter @ragonesi
	 * @link https://wordpress.org/support/topic/hyperlink-symbol-in-reference-container/#post-13587782
	 *
	 * The expand/collapse button was lost @since 2.0.0 for an unknown reason.
	 * The fix was about restoring the button code (only, while the script remained complete).
	 *
	 * - Bugfix: Reference container: apply web semantics to improve readability for assistive technologies, thanks to @derivationfr issue report and code contribution.
	 *
	 * @since 2.5.11
	 *
	 * @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
	class="speaker-mute footnotes_reference_container"
	>
	<div
		class="footnote_container_prepare"
		><[[element]]
			><span
				role="button"
				tabindex="0"
				class="footnote_reference_container_label pointer"
				onclick="footnote_expand_collapse_reference_container_[[post_id]]_[[container_id]]();"
				onkeydown="footnote_expand_collapse_reference_container_[[post_id]]_[[container_id]]();"
				>[[name]]</span
			><span
				role="button"
				tabindex="0"
				class="footnote_reference_container_collapse_button"
				style="[[button-style]]"
				onclick="footnote_expand_collapse_reference_container_[[post_id]]_[[container_id]]();"
				onkeydown="footnote_expand_collapse_reference_container_[[post_id]]_[[container_id]]();"
			>[<a
				id="footnote_reference_container_collapse_button_[[post_id]]_[[container_id]]"
			>+</a
			>]</span
			></[[element]]
		></div
	>
	<div
		id="footnote_references_container_[[post_id]]_[[container_id]]"
		style="[[style]]"
		><table
			class="footnotes_table footnote-reference-container"
			><caption
				class="accessibility"
				>[[caption]]</caption
			>
			<tbody>
				[[content]]
			</tbody>
		</table>
	</div>
</div>
<script type="text/javascript">
	function footnote_expand_reference_container_[[post_id]]_[[container_id]]() {
		jQuery('#footnote_references_container_[[post_id]]_[[container_id]]').show();
		jQuery('#footnote_reference_container_collapse_button_[[post_id]]_[[container_id]]').text('−');
	}
	function footnote_collapse_reference_container_[[post_id]]_[[container_id]]() {
		jQuery('#footnote_references_container_[[post_id]]_[[container_id]]').hide();
		jQuery('#footnote_reference_container_collapse_button_[[post_id]]_[[container_id]]').text('+');
	}
	function footnote_expand_collapse_reference_container_[[post_id]]_[[container_id]]() {
		if (jQuery('#footnote_references_container_[[post_id]]_[[container_id]]').is(':hidden')) {
			footnote_expand_reference_container_[[post_id]]_[[container_id]]();
		} else {
			footnote_collapse_reference_container_[[post_id]]_[[container_id]]();
		}
	}
	function footnote_moveToReference_[[post_id]]_[[container_id]](p_str_TargetID) {
		footnote_expand_reference_container_[[post_id]]_[[container_id]]();
		var l_obj_Target = jQuery('#' + p_str_TargetID);
		if (l_obj_Target.length) {
			jQuery( 'html, body' ).delay( [[scroll-down-delay]] );
			jQuery('html, body').animate({
				scrollTop: l_obj_Target.offset().top - window.innerHeight * [[scroll-offset]]
			},
			[[scroll-down-duration]]);
		}
	}
	function footnote_moveToAnchor_[[post_id]]_[[container_id]](p_str_TargetID) {
		footnote_expand_reference_container_[[post_id]]_[[container_id]]();
		var l_obj_Target = jQuery('#' + p_str_TargetID);
		if (l_obj_Target.length) {
			jQuery( 'html, body' ).delay( [[scroll-up-delay]] );
			jQuery('html, body').animate({
				scrollTop: l_obj_Target.offset().top - window.innerHeight * [[scroll-offset]]
			},
			[[scroll-up-duration]]);
		}
	}
</script>