Add aria labels to inputs

to make them accessible for screen reader users.

Assign ids to the tds containing the setting name and description and
then use them as the label via the aria-labeledby attribute.
This commit is contained in:
funkonaut 2022-08-29 17:59:57 -05:00 committed by Florian Festi
parent 43bd7d12d3
commit 691f3f440e
2 changed files with 12 additions and 12 deletions

View File

@ -198,7 +198,7 @@ class ArgparseEdgeType:
("""<option value="%s"%s>%s</option>""" % ("""<option value="%s"%s>%s</option>""" %
(e, ' selected="selected"' if e == default else "", (e, ' selected="selected"' if e == default else "",
translate("%s %s" % (e, self.names.get(e, "")))) for e in self.edges)) translate("%s %s" % (e, self.names.get(e, "")))) for e in self.edges))
return """<select name="%s" size="1">\n%s</select>\n""" % (name, options) return """<select name="%s" id="%s" aria-labeledby="%s %s" size="1">\n%s</select>\n""" % (name, name, name+"_id", name+"_description", options)
def inx(self, name, viewname, arg): def inx(self, name, viewname, arg):
return (' <param name="%s" type="optiongroup" appearance="combo" gui-text="%s" gui-description=%s>\n' % return (' <param name="%s" type="optiongroup" appearance="combo" gui-text="%s" gui-description=%s>\n' %
@ -218,8 +218,8 @@ class BoolArg:
if isinstance(default, (str)): if isinstance(default, (str)):
default = self(default) default = self(default)
return """<input name="%s" type="hidden" value="0"> return """<input name="%s" type="hidden" value="0">
<input name="%s" type="checkbox" value="1"%s>""" % \ <input name="%s" id="%s" aria-labeledby="%s %s" type="checkbox" value="1"%s>""" % \
(name, name, ' checked="checked"' if default else "") (name, name, name, name+"_id", name+"_description",' checked="checked"' if default else "")
boolarg = BoolArg() boolarg = BoolArg()

View File

@ -160,25 +160,24 @@ class BServer:
viewname = name[len(prefix)+1:] viewname = name[len(prefix)+1:]
default = defaults.get(name, None) default = defaults.get(name, None)
row = """<tr><td id="%s"><label for="%s">%s</label></td><td>%%s</td><td id="%s">%s</td></tr>\n""" % \
row = """<tr><td>%s</td><td>%%s</td><td>%s</td></tr>\n""" % \ (name+"_id", name, _(viewname), name+"_description","" if not a.help else markdown.markdown(_(a.help)))
(_(viewname), "" if not a.help else markdown.markdown(_(a.help)))
if (isinstance(a, argparse._StoreAction) and if (isinstance(a, argparse._StoreAction) and
hasattr(a.type, "html")): hasattr(a.type, "html")):
input = a.type.html(name, default or a.default, _) input = a.type.html(name, default or a.default, _)
elif a.dest == "layout": elif a.dest == "layout":
val = (default or a.default).split("\n") val = (default or a.default).split("\n")
input = """<textarea name="%s" cols="%s" rows="%s">%s</textarea>""" % \ input = """<textarea name="%s" id="%s" aria-labeledby="%s %s" cols="%s" rows="%s">%s</textarea>""" % \
(name, max((len(l) for l in val))+10, len(val)+1, default or a.default) (name, name, name+"_id", name+"_description", max((len(l) for l in val))+10, len(val)+1, default or a.default)
elif a.choices: elif a.choices:
options = "\n".join( options = "\n".join(
("""<option value="%s"%s>%s</option>""" % ("""<option value="%s"%s>%s</option>""" %
(e, ' selected="selected"' if (e == (default or a.default)) or (str(e) == str(default or a.default)) else "", (e, ' selected="selected"' if (e == (default or a.default)) or (str(e) == str(default or a.default)) else "",
_(e)) for e in a.choices)) _(e)) for e in a.choices))
input = """<select name="%s" size="1">\n%s</select>\n""" % (name, options) input = """<select name="%s" id="%s" aria-labeledby="%s %s" size="1" >\n%s</select>\n""" % (name, name, name+"_id", name+"_description", options)
else: else:
input = """<input name="%s" type="text" value="%s">""" % \ input = """<input name="%s" id="%s" aria-labeledby="%s %s" type="text" value="%s" >""" % \
(name, default or a.default) (name, name, name+"_id", name+"_description", default or a.default)
return row % input return row % input
@ -250,6 +249,7 @@ class BServer:
for a in group._group_actions: for a in group._group_actions:
if a.dest in ("input", "output"): if a.dest in ("input", "output"):
continue continue
result.append(self.arg2html(a, prefix, defaults, _)) result.append(self.arg2html(a, prefix, defaults, _))
result.append("</table>") result.append("</table>")