Rumperuu/footnotes
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

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

Browse source 
= 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
This commit is contained in:
pewgeuges 2021-03-18 10:53:57 +00:00
parent 93d1c06373
commit ccb73fd421
38 changed files with 277 additions and 114 deletions
Download patch file Download diff file Expand all files Collapse all files

9
templates/public/amp-footnote-expand.html
View file

@ -2,7 +2,8 @@
/**
* Footnote 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: Tooltips: make display work purely by style rules for AMP compatibility, thanks to @milindmore22 code contribution.
* - Bugfix: Tooltips: enable accessibility by keyboard navigation, thanks to @westonruter code contribution.
* - Adding: Reference container: get expanding and collapsing to work also in AMP compatibility mode, thanks to @westonruter code contribution.
*
* @since 2.6.0
@ -14,16 +15,14 @@
* @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)
*/?>
-->
<span
class="footnote_referrer relative"
><[[link-span]]
role="button"
tabindex="0"
on="tap:footnote_references_container_[[post_id]]_[[container_id]].toggleClass(class=collapsed, force=false),footnotes_container_button_plus_[[post_id]]_[[container_id]].toggleClass(class=collapsed, force=true),footnotes_container_button_minus_[[post_id]]_[[container_id]].toggleClass(class=collapsed, force=false)"
[[hard-link]]
><[[sup-span]]

8
templates/public/amp-footnote.html
View file

@ -2,8 +2,8 @@
/**
* Footnote 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.
* - Adding: Tooltips: make display work purely by style rules for AMP compatibility, thanks to @milindmore22 code contribution.
* - Bugfix: Tooltips: enable accessibility by keyboard navigation, thanks to @westonruter code contribution.
*
* @since 2.6.0
*
@ -12,13 +12,13 @@
*
* @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
*/?>
-->
<span
class="footnote_referrer relative"
><[[link-span]]
role="button"
tabindex="0"
[[hard-link]]
><[[sup-span]]
id="footnote_plugin_tooltip_[[post_id]]_[[container_id]]_[[note_id]]"

36
templates/public/amp-reference-container-collapsed.html
View file

@ -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>

32
templates/public/amp-reference-container.html
View file

@ -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,6 +32,8 @@
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)"
@ -37,10 +43,12 @@
>
<div
id="footnote_references_container_[[post_id]]_[[container_id]]"
>
<table
><table
class="footnotes_table footnote-reference-container"
>
><caption
class="accessibility"
>[[caption]]</caption
>
<tbody>
[[content]]
</tbody>

19
templates/public/footnote-alternative.html
View file

@ -1,12 +1,31 @@
<!--<?php//for docblock, @see MCI_Footnotes_Template::process_template()
/**
* Alternative footnote template with plain JS tooltips and CSS transitions.
*
* - Bugfix: Tooltips: optional alternative JS implementation with CSS transitions to fix configuration-related outage, thanks to @andreasra feedback.
*
* @since 2.1.1
*
* @reporter @andreasra
* @link https://wordpress.org/support/topic/footnotes-appearing-in-header/page/2/#post-13632566
*
* - Bugfix: Tooltips: Alternative tooltips: add missing accessibility, thanks to @derivationfr issue report.
*
* @since 2.6.0
*
* @reporter @derivationfr
* @link https://wordpress.org/support/topic/enhance-accesibility-by-using-instead-of/
*/?>
-->
<span
class="footnote_referrer relative"
onmouseover="footnote_tooltip_show('footnote_plugin_tooltip_text_[[post_id]]_[[container_id]]_[[note_id]]')"
onfocus="footnote_tooltip_show('footnote_plugin_tooltip_text_[[post_id]]_[[container_id]]_[[note_id]]')"
onmouseout="footnote_tooltip_hide('footnote_plugin_tooltip_text_[[post_id]]_[[container_id]]_[[note_id]]')"
onfocusout="footnote_tooltip_hide('footnote_plugin_tooltip_text_[[post_id]]_[[container_id]]_[[note_id]]')"
><[[link-span]]
role="button"
tabindex="0"
onclick="footnote_moveToAnchor_[[post_id]]_[[container_id]]('footnote_plugin_reference_[[post_id]]_[[container_id]]_[[note_id]]');"
[[hard-link]]
><[[sup-span]]

4
templates/public/footnote.html
View file

@ -3,8 +3,10 @@
*/?>
-->
<span
class="footnote_referrer"
class="footnote_referrer"
><[[link-span]]
role="button"
tabindex="0"
onclick="footnote_moveToAnchor_[[post_id]]_[[container_id]]('footnote_plugin_reference_[[post_id]]_[[container_id]]_[[note_id]]');"
[[hard-link]]
><[[sup-span]]

29
templates/public/js-reference-container.html
View file

@ -12,14 +12,27 @@
*
* @reporter @hopper87it
* @link https://wordpress.org/support/topic/footnotes-wp-rocket/
*
*
* @reporter @pkverma99
* @link https://wordpress.org/support/topic/footnotes-wp-rocket/#post-14076188
*
* The heavy jQuery Core library from WordPress must not be deferred for
* The heavy jQuery Core library from WordPress must not be deferred for
* the jQuery reference container to work, and is detrimental to page speed.
* This alternative works with plain JS but does not support scroll animation.
* The plugin is set to enable hard links when this option is enabled.
*
* - 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
@ -29,6 +42,8 @@
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"
onclick="footnote_expand_reference_container_[[post_id]]_[[container_id]]();"
@ -40,6 +55,8 @@
onclick="footnote_expand_reference_container_[[post_id]]_[[container_id]]();"
>[+]</span
><span
role="button"
tabindex="0"
id="footnotes_container_label_collapse_[[post_id]]_[[container_id]]"
class="footnote_reference_container_label pointer"
style="display: none;"
@ -57,10 +74,12 @@
<div
id="footnote_references_container_[[post_id]]_[[container_id]]"
style="[[style]]"
>
<table
><table
class="footnotes_table footnote-reference-container"
>
><caption
class="accessibility"
>[[caption]]</caption
>
<tbody>
[[content]]
</tbody>

25
templates/public/reference-container-body-3column.html
View file

@ -1,9 +1,28 @@
<!--<?php//for docblock, @see MCI_Footnotes_Template::process_template()
/**
* Table row template with legacy extra column for backlink symbol, uncombined footnotes.
*
* - Bugfix: Reference container: option to restore pre-2.0.0 layout with the backlink symbol in an extra column.
*
* @since 2.1.1
*
* - 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.
*/?>
-->
<tr class="footnotes_plugin_reference_row">
<td
<th
scope="row"
class="footnote_plugin_index"
><[[link-span]]
id="footnote_plugin_reference_[[post_id]]_[[container_id]]_[[note_id]]"
@ -13,7 +32,7 @@
>[[index]][[terminator]]</[[link-span]]
>[[anchor-element]]</td
>
<td
<td
class="footnote_plugin_symbol"
><[[link-span]]
onclick="footnote_moveToAnchor_[[post_id]]_[[container_id]]('footnote_plugin_tooltip_[[post_id]]_[[container_id]]_[[note_id]]');"
@ -22,7 +41,7 @@
>[[arrow]]</[[link-span]]
></td
>
<td
<td
class="footnote_plugin_text"
>[[text]]</td
>

26
templates/public/reference-container-body-combi.html
View file

@ -1,14 +1,36 @@
<!--<?php//for docblock, @see MCI_Footnotes_Template::process_template()
/**
* Table row template with the ability to have combined footnotes.
*
* - Bugfix: Referrers, reference container: Combining identical footnotes: fix dead links and ensure referrer-backlink bijectivity, thanks to @happyches bug report.
*
* @since 2.1.1
*
* @reporter @happyches
* @link https://wordpress.org/support/topic/custom-css-for-jumbled-references/
*
* - 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.
*/?>
-->
<tr class="footnotes_plugin_reference_row">
<td
<th
scope="row"
class="footnote_plugin_index_combi[[pointer]]"
[[event]]
>[[backlinks]]</td
>
<td
<td
class="footnote_plugin_text"
>[[text]]</td>
</tr>

26
templates/public/reference-container-body-switch.html
View file

@ -1,9 +1,31 @@
<!--<?php//for docblock, @see MCI_Footnotes_Template::process_template()
/**
* Table row template for uncombined footnotes with the backlink symbol appended.
*
* - Bugfix: Reference container: option to append symbol (prepended by default), thanks to @spaceling code contribution.
*
* @since 2.1.1
*
* @contributor @spaceling
* @link https://wordpress.org/support/topic/change-the-position-5/#post-13615994
*
* - 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.
*/?>
-->
<tr class="footnotes_plugin_reference_row">
<td
<th
scope="row"
id="footnote_plugin_reference_[[post_id]]_[[container_id]]_[[note_id]]"
class="footnote_plugin_index pointer"
onclick="footnote_moveToAnchor_[[post_id]]_[[container_id]]('footnote_plugin_tooltip_[[post_id]]_[[container_id]]_[[note_id]]');"
@ -13,7 +35,7 @@
>[[index]][[terminator]][[arrow]]</[[link-span]]
>[[anchor-element]]</td
>
<td
<td
class="footnote_plugin_text"
>[[text]]</td>
</tr>

26
templates/public/reference-container-body.html
View file

@ -1,13 +1,29 @@
<!--<?php//for docblock, @see MCI_Footnotes_Template::process_template()
/**
* Default table row template for uncombined footnotes
*
* Table row default template for uncombined footnotes.
*
* @since 2.2.10 Bugfix: Reference container: add missing container ID in function name in default table row template for uncombined footnotes.
*
*
*
* - 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.
*/?>
-->
<tr class="footnotes_plugin_reference_row">
<td
<th
scope="row"
role="button"
tabindex="0"
id="footnote_plugin_reference_[[post_id]]_[[container_id]]_[[note_id]]"
class="footnote_plugin_index pointer"
onclick="footnote_moveToAnchor_[[post_id]]_[[container_id]]('footnote_plugin_tooltip_[[post_id]]_[[container_id]]_[[note_id]]');"
@ -17,7 +33,7 @@
>[[arrow]][[index]][[terminator]]</[[link-span]]
>[[anchor-element]]</td
>
<td
<td
class="footnote_plugin_text"
>[[text]]</td
>

29
templates/public/reference-container.html
View file

@ -2,13 +2,9 @@
/**
* Yields the reference container start and end including the scroll script.
*
* @since Unknown
* @since unknown
* @type object
*
* @lastmodified 2021-02-18T2046+0100
*
*
*
* - Bugfix: Reference container: restore expand/collapse button in the template, thanks to @ragonesi bug report.
*
* @since 2.0.2
@ -18,6 +14,19 @@
*
* 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
@ -27,6 +36,8 @@
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
@ -44,10 +55,12 @@
<div
id="footnote_references_container_[[post_id]]_[[container_id]]"
style="[[style]]"
>
<table
><table
class="footnotes_table footnote-reference-container"
>
><caption
class="accessibility"
>[[caption]]</caption
>
<tbody>
[[content]]
</tbody>