diff options
| author | Ilmari Lauhakangas <ilmari.lauhakangas@libreoffice.org> | 2019-05-17 15:10:50 +0300 |
|---|---|---|
| committer | Olivier Hallot <olivier.hallot@libreoffice.org> | 2019-05-18 13:34:26 +0200 |
| commit | 301ae74e8bab8cded3592588021090ff75f2bf21 (patch) | |
| tree | d6ed692b02ad076c7cac69e5a5cfa7f56eb7bdd2 /help3xsl/online_transform.xsl | |
| parent | 1368e08b24cd3f13ef3de72475f6fbc70b56baa0 (diff) | |
Improve accessibility for modules and lang menus
Ever since the contents of the modules and lang menus started
being populated upon click, the flow for screenreader users has
been potentially confusing.
This patch introduces a11y-toggle into the mix:
https://github.com/edenspiekermann/a11y-toggle
Checkboxes were changed into buttons. This hopefully makes it
clear we want the user to click them.
The contents tree still uses the checkbox hack, because its items
are populated upon page load.
Change-Id: I3482bea0c8669f96794498fc37d9d18fe3f829d5
Reviewed-on: https://gerrit.libreoffice.org/72467
Tested-by: Jenkins
Tested-by: Olivier Hallot <olivier.hallot@libreoffice.org>
Reviewed-by: Olivier Hallot <olivier.hallot@libreoffice.org>
Diffstat (limited to 'help3xsl/online_transform.xsl')
| -rw-r--r-- | help3xsl/online_transform.xsl | 11 |
1 files changed, 7 insertions, 4 deletions
diff --git a/help3xsl/online_transform.xsl b/help3xsl/online_transform.xsl index 95d19bc56a..2ca8deded7 100644 --- a/help3xsl/online_transform.xsl +++ b/help3xsl/online_transform.xsl @@ -154,6 +154,7 @@ <script type="text/javascript" src="{$target}fuzzysort.js"></script> <script type="text/javascript" src="{$target}prism.js"></script> <script type="text/javascript" src="{$target}help2.js" defer=""></script> + <script type="text/javascript" src="{$target}a11y-toggle.js" defer=""></script> <script type="text/javascript" src="{$target}{$lang}/langnames.js" defer=""></script> <script type="text/javascript" src="{$target}paginathing.js" defer=""></script> <script type="text/javascript" src="{$target}{$lang}/bookmarks.js" defer=""></script> @@ -179,14 +180,16 @@ </div> </header> <div class="modules"> - <input id="modules" name="modules" type="checkbox" onchange="setupModules('{$target}', '{$lang}');"/> - <label for="modules"><xsl:value-of select="$ui_module"/></label> + <button type="button" data-a11y-toggle="modules-nav" id="modules" onclick="setupModules('{$target}', '{$lang}');"> + <xsl:value-of select="$ui_module"/> + </button> <nav id="modules-nav"/><!-- is filled in via setupModules() on demand --> </div> <xsl:if test="$online"> <div class="lang"> - <input id="langs" name="language-menu" type="checkbox" onchange="setupLanguages('{$target}', '{$htmlpage}');"/> - <label for="langs"><xsl:value-of select="$ui_language"/></label> + <button type="button" data-a11y-toggle="langs-nav" id="langs" onclick="setupLanguages('{$target}', '{$htmlpage}');"> + <xsl:value-of select="$ui_language"/> + </button> <nav id="langs-nav"/><!-- is filled in via setupLanguages() on demand --> </div> </xsl:if> |