ccb73fd421
= 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
96 lines
3.5 KiB
HTML
96 lines
3.5 KiB
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.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
|
||
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]]();"
|
||
>[[name]]</span
|
||
><span
|
||
class="footnote_reference_container_collapse_button"
|
||
style="[[button-style]]"
|
||
onclick="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_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').animate({
|
||
scrollTop: l_obj_Target.offset().top - window.innerHeight * [[scroll-offset]]
|
||
},
|
||
[[scroll-duration]]);
|
||
}
|
||
}
|
||
</script>
|