Address a bunch of accessibility issues

- Add missing labels for form fields
- Improve contrast slightly
- Remove incorrect aria-label= and title= attributes
- Use fieldset for radio button groups

snikket_web/scss/app.scss

@@ -222,12 +222,19 @@ div.form {
 }
 
 div.form.layout-expanded {
-	label {
+	label, legend {
 		display: block;
 		font-weight: bold;
 		color: $gray-200;
 	}
 
+	fieldset {
+		display: block;
+		border: 0;
+		padding: 0;
+		margin: 0;
+	}
+
 	input[type="radio"] + label, input[type="checkbox"] + label {
 		font-weight: inherit;
 		color: inherit;
@@ -264,11 +271,6 @@ div.form.layout-expanded {
 		}
 	}
 
-	ul[id] {
-		padding: $w-s1 0;
-		padding-left: $w-l1;
-	}
-
 	input[type="checkbox"], input[type="radio"] {
 		position: absolute;
 		z-index: -1;
@@ -408,11 +410,12 @@ div.form.layout-expanded {
 	}
 }
 
-.f-ebox > ul {
+fieldset > ul {
 	/* radio group */
 	list-style-type: none;
 	margin: 0;
-	padding: 0;
+	padding: $w-s1 0;
+	padding-left: $w-l1;
 
 	> li {
 		margin: 0;
@@ -474,7 +477,7 @@ input[type="submit"], button, .button {
 	&.primary {
 		background: linear-gradient(0deg, $primary-500, $primary-600);
 		box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
-		color: $primary-900;
+		color: white;
 		border: none;
 		/* TODO: fix vertical rhyhtm ... */
 		border-radius: $w-s4;
@@ -780,7 +783,7 @@ body#login {
 /* admin area specials */
 
 #topbar > div.admin-note {
-	color: $alert-500;
+	color: $alert-400;
 	font-size: nth($h-sizes, 5);
 	margin-left: $w-l1;
 }

snikket_web/templates/admin_create_invite_form.html

@@ -5,8 +5,10 @@
 	<h2 class="form-title">{% trans %}Create new invitation{% endtrans %}</h2>
 	<p class="form-descr weak">{% trans %}Create a new invitation link to invite more users to your Snikket service by clicking the button below.{% endtrans %}</p>
 	<div class="f-ebox">
-		{{ invite_form.type_.label }}
-		{{ invite_form.type_ }}
+		<fieldset>{#- -#}
+			<legend>{{ invite_form.type_.label.text }}</legend>
+			{{- invite_form.type_ -}}
+		</fieldset>
 	</div>
 	<div class="f-ebox">
 		{{ invite_form.lifetime.label }}

snikket_web/templates/admin_edit_invite.html

@@ -12,8 +12,8 @@
 	<dl>
 		<dt>{% trans %}Valid until{% endtrans %}</dt>
 		<dd>{{ invite.expires | format_date }}</dd>
-		<dt>{% trans %}Link{% endtrans %}</dt>
-		<dd>{% call showuri(invite.landing_page) %}{% endcall %}</dd>
+		<dt>{% trans %}<label for="link-field">Link</label>{% endtrans %}</dt>
+		<dd>{% call showuri(invite.landing_page, id_="link-field") %}{% endcall %}</dd>
 		<dt>{% trans %}Invitation type{% endtrans %}</dt>
 		<dd>{% call invite_type_description(invite) %}{% endcall %}</dd>
 		{%- set ngroups = invite.group_ids | length -%}

snikket_web/templates/admin_reset_user_password.html

@@ -14,8 +14,8 @@
 	<dd>
 		<dt>{% trans %}Valid until{% endtrans %}</dt>
 		<dd>{{ reset_link.expires | format_date }}</dd>
-		<dt>{% trans %}Link{% endtrans %}</dt>
-		<dd>{% call showuri(reset_link.landing_page) %}{% endcall %}</dd>
+		<dt>{% trans %}<label for="link-field">Link</label>{% endtrans %}</dt>
+		<dd>{% call showuri(reset_link.landing_page, id_="link-field") %}{% endcall %}</dd>
 	</dd>
 	<div class="f-bbox">
 		{%- call custom_form_button("remove_link", form.action_revoke.name, reset_link.id_, class="secondary danger") -%}

snikket_web/templates/library.j2

@@ -10,11 +10,11 @@
 {%- endif -%}
 {%- endmacro %}
 
-{% macro showuri(uri, caller=None) %}
+{% macro showuri(uri, caller=None, id_=None) %}
 {%- if uri is none -%}
 <em>—</em>
 {%- else -%}
-<div><input type="text" readonly="readonly" value="{{ uri }}"></div>
+<div><input type="text" {% if id_ %}id="{{ id_ }}" {% endif %}readonly="readonly" value="{{ uri }}"></div>
 <div>{% call clipboard_button(uri, show_label=True) %}{% trans %}Copy link{% endtrans %}{% endcall %}</div>
 {%- endif -%}
 {% endmacro %}
@@ -26,7 +26,7 @@
 
 {% macro standard_button(icon_name, href, caller=None, class=None, onclick=None) -%}
 {%- set label = caller() -%}
-<a href="{{ href }}" class="button {% if class %}{{ class }}{% endif %}" aria-label="{{ a11y }}" title="{{ a11y }}"{% if onclick %} onclick="{{ onclick }}"{% endif %}>{% call icon(icon_name) %}{% endcall %}<span>{{ label }}</span></a>
+<a href="{{ href }}" class="button {% if class %}{{ class }}{% endif %}" {% if onclick %} onclick="{{ onclick }}"{% endif %}>{% call icon(icon_name) %}{% endcall %}<span>{{ label }}</span></a>
 {%- endmacro %}
 
 {% macro form_button(icon_name, button_obj, caller=None, class=None) -%}

snikket_web/templates/user_home.html

@@ -17,7 +17,7 @@
 				<div class="details">
 					<div class="display-name">{{ user_info.display_name | default(user_info.username) }}</div>
 					<div class="address">
-						<input value="{{ user_info.address }}">
+						<input value="{{ user_info.address }}" aria-label="{% trans %}Your XMPP address{% endtrans %}">
 						{% call clipboard_button(user_info.address) %}{% trans %}Copy address{% endtrans %}{% endcall %}
 					</div>
 				</div>

snikket_web/templates/user_passwd.html

@@ -5,7 +5,7 @@
 {% endblock %}
 {% block content %}
 <div class="form layout-expanded"><form method="POST">
-	<h2 class="form-title">{% trans %}Change your password{% endtrans %}</h2>
+	<h1 class="form-title">{% trans %}Change your password{% endtrans %}</h1>
 	<p class="form-desc weak">{% trans %}To change your password, you need to provide the current password as well as the new one. To reduce the chance of typos, we ask for your new password twice.{% endtrans %}</p>
 	{{ form.csrf_token }}
 	{%- call render_errors(form) -%}

snikket_web/templates/user_profile.html

@@ -4,6 +4,7 @@
 <title>Snikket Web Portal</title>
 {% endblock %}
 {% block content %}
+<h1>{% trans %}Update your profile{% endtrans %}</h1>
 <div class="form layout-expanded"><form method="POST" enctype="multipart/form-data">
 	<h2 class="form-title">{% trans %}Profile{% endtrans %}</h2>
 	{{ form.csrf_token }}
@@ -21,8 +22,10 @@
 	<h3 class="form-title">{% trans %}Visibility{% endtrans %}</h3>
 	<p class="form-descr weak">{% trans %}This section allows you to control who can see your profile information, like avatar and nickname.{% endtrans %}</p>
 	<div class="f-ebox">
-		{{ form.profile_access_model.label }}
-		{{ form.profile_access_model }}
+		<fieldset>{#- -#}
+			<legend>{{ form.profile_access_model.label.text }}</legend>
+			{{- form.profile_access_model -}}
+		</fieldset>
 	</div>
 	<div class="f-bbox">
 		{%- call standard_button("back", url_for('.index'), class="secondary") %}{% trans %}Back{% endtrans %}{% endcall -%}

snikket_web/translations/messages.pot

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PROJECT VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2021-01-29 09:32+0100\n"
+"POT-Creation-Date: 2021-01-29 15:58+0100\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -398,7 +398,7 @@ msgstr ""
 #: snikket_web/templates/admin_reset_user_password.html:25
 #: snikket_web/templates/user_logout.html:13
 #: snikket_web/templates/user_passwd.html:30
-#: snikket_web/templates/user_profile.html:28
+#: snikket_web/templates/user_profile.html:31
 msgid "Back"
 msgstr ""
 
@@ -479,7 +479,7 @@ msgstr ""
 
 #: snikket_web/templates/admin_edit_invite.html:15
 #: snikket_web/templates/admin_reset_user_password.html:17
-msgid "Link"
+msgid "<label for=\"link-field\">Link</label>"
 msgstr ""
 
 #: snikket_web/templates/admin_edit_invite.html:22
@@ -924,6 +924,10 @@ msgstr ""
 msgid "Your account"
 msgstr ""
 
+#: snikket_web/templates/user_home.html:20
+msgid "Your XMPP address"
+msgstr ""
+
 #: snikket_web/templates/user_home.html:31
 msgid "Edit profile"
 msgstr ""
@@ -972,15 +976,19 @@ msgid ""
 "all of your devices."
 msgstr ""
 
-#: snikket_web/templates/user_profile.html:8
+#: snikket_web/templates/user_profile.html:7
+msgid "Update your profile"
+msgstr ""
+
+#: snikket_web/templates/user_profile.html:9
 msgid "Profile"
 msgstr ""
 
-#: snikket_web/templates/user_profile.html:21
+#: snikket_web/templates/user_profile.html:22
 msgid "Visibility"
 msgstr ""
 
-#: snikket_web/templates/user_profile.html:22
+#: snikket_web/templates/user_profile.html:23
 msgid ""
 "This section allows you to control who can see your profile information, "
 "like avatar and nickname."