Announce menu collapse and expand

Role tag added as aria-expanded does not work for clickable headings, this is some what of a work around but will get things accessible for now wihtout requiring too much of a rewrite.  The showHide function now has lines to toggle the aria-expanded tag based on the state of the clickable heading.
This commit is contained in:
funkonaut 2022-09-06 13:22:26 -05:00 committed by Florian Festi
parent 691f3f440e
commit 478d73f69d
1 changed files with 4 additions and 2 deletions

View File

@ -189,9 +189,11 @@ class BServer:
if(e.style.display == null || e.style.display == "none") {
e.style.display = "block";
h.classList.add("open");
h.setAttribute("aria-expanded","true");
} else {
e.style.display = "none";
h.classList.remove("open");
h.setAttribute("aria-expanded","false");
}
}
function hideargs() {
@ -245,7 +247,7 @@ class BServer:
if len(group._group_actions) == 1 and isinstance(group._group_actions[0], argparse._HelpAction):
continue
prefix = getattr(group, "prefix", None)
result.append('''<h3 id="h-%s" tabindex="0" class="open" onclick="showHide(%s)" onkeypress="if(event.keyCode == 13) showHide(%s)">%s</h3>\n<table role="presentation" id="%s">\n''' % (groupid, groupid, groupid, _(group.title), groupid))
result.append('''<h3 id="h-%s" role="button" aria-expanded="true" tabindex="0" class="open" onclick="showHide(%s)" onkeypress="if(event.keyCode == 13) showHide(%s)">%s</h3>\n<table role="presentation" id="%s">\n''' % (groupid, groupid, groupid, _(group.title), groupid))
for a in group._group_actions:
if a.dest in ("input", "output"):
@ -345,7 +347,7 @@ class BServer:
""" ]
for nr, group in enumerate(self.groups):
result.append(f'''
<h3 id="h-{nr}" class="open" tabindex="0" onclick="showHide('{nr}')" onkeypress="if(event.keyCode == 13) showHide('{nr}')"
<h3 id="h-{nr}" role="button" aria-expanded="false" class="open" tabindex="0" onclick="showHide('{nr}')" onkeypress="if(event.keyCode == 13) showHide('{nr}')"
onmouseenter="change('{group.name}', 'static/samples/{group.thumbnail}')"
onmouseleave="changeback('{group.name}')">{_(group.title)}</h3>
<img style="width: 200px;" id="sample-{group.name}" src="static/nothing.png" alt="">