fix: Add popup to explain colors for liaisons needing action. Rework how aria-label is supplied for several input fields. Update vnu.jar. Adjust some field styling. (#4115)

* fix: Add popup to explain colors for liaisons needing action

Also fix the search field styling while I'm here.

* Also fix some other field styling issues while I am here
This commit is contained in:
Lars Eggert 2022-07-07 22:01:21 +03:00 committed by GitHub
parent dfc0ebc11b
commit 01abc93cce
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 61 additions and 56 deletions

Binary file not shown.

View file

@ -1,5 +1,5 @@
{% extends "base_site.html" %} {% extends "base_site.html" %}
{% load staticfiles %} {% load staticfiles widget_tweaks %}
{% block title %}Groups - People{% endblock %} {% block title %}Groups - People{% endblock %}
@ -51,9 +51,9 @@
<table class="full-width"> <table class="full-width">
<tbody> <tbody>
<tr> <tr>
<td>{{ form.name.errors }}<label for="{{ form.name.id_for_label }}" aria-label="Name"></label>{{ form.name }}</td> <td>{{ form.name.errors }}{{ form.name|attr:"aria-label:Name" }}</td>
<td>{{ form.person.errors }}<label for="{{ form.person.id_for_label }}" aria-label="Person"></label>{{ form.person }}{% if form.person.help_text %}<br>{{ form.person.help_text }}{% endif %}</td> <td>{{ form.person.errors }}{{ form.person|attr:"aria-label:Person" }}{% if form.person.help_text %}<br>{{ form.person.help_text }}{% endif %}</td>
<td>{{ form.email.errors }}<label for="{{ form.email.id_for_label }}" aria-label="Email"></label>{{ form.email }}{% if form.email.help_text %}<br>{{ form.email.help_text }}{% endif %}</td> <td>{{ form.email.errors }}{{ form.email|attr:"aria-label:Email" }}{% if form.email.help_text %}<br>{{ form.email.help_text }}{% endif %}</td>
<td><button type="submit" name="submit">Add</button></td> <td><button type="submit" name="submit">Add</button></td>
</tr> </tr>
</tbody> </tbody>

View file

@ -7,15 +7,13 @@
class="form-horizontal" class="form-horizontal"
action="{% url 'ietf.doc.views_search.search' %}"> action="{% url 'ietf.doc.views_search.search' %}">
{% csrf_token %} {% csrf_token %}
<!-- [html-validate-disable-block input-missing-label -- labelled via aria-label] -->
<div class="input-group search_field"> <div class="input-group search_field">
<label for="id_name" aria-label="Document name/title/RFC number"></label> {{ form.name|add_class:"form-control"|attr:"placeholder:Document name/title/RFC number"|attr:"aria-label:Document name/title/RFC number" }}
{{ form.name|add_class:"form-control"|attr:"placeholder:Document name/title/RFC number" }} <button class="btn btn-primary" type="submit">
<span class="input-group-btn"> <i class="bi bi-search"></i>
<button class="btn btn-primary" type="submit"> Search
<i class="bi bi-search"></i> </button>
Search
</button>
</span>
</div> </div>
{{ form.sort }} {{ form.sort }}
<div class="accordion pt-3" id="search-accordion"> <div class="accordion pt-3" id="search-accordion">
@ -42,15 +40,15 @@
<div class="col-sm-8"> <div class="col-sm-8">
<div class="form-check"> <div class="form-check">
{{ form.rfcs|add_class:"form-check-input" }} {{ form.rfcs|add_class:"form-check-input" }}
<label class="form-check-label" for="id_rfcs">RFC</label> <label class="form-check-label" for="{{ form.rfcs.id_for_label }}">RFC</label>
</div> </div>
<div class="form-check"> <div class="form-check">
{{ form.activedrafts|add_class:"form-check-input" }} {{ form.activedrafts|add_class:"form-check-input" }}
<label class="form-check-label" for="id_activedrafts">Internet-Draft (active)</label> <label class="form-check-label" for="{{ form.activedrafts.id_for_label }}">Internet-Draft (active)</label>
</div> </div>
<div class="form-check"> <div class="form-check">
{{ form.olddrafts|add_class:"form-check-input advdoctype" }} {{ form.olddrafts|add_class:"form-check-input advdoctype" }}
<label class="form-check-label" for="id_olddrafts">Internet-Draft (expired, replaced or withdrawn)</label> <label class="form-check-label" for="{{ form.olddrafts.id_for_label }}">Internet-Draft (expired, replaced or withdrawn)</label>
</div> </div>
{% for value, label in form.fields.doctypes.choices %} {% for value, label in form.fields.doctypes.choices %}
<div class="form-check"> <div class="form-check">
@ -74,10 +72,10 @@
value="author" value="author"
{% if form.by.value == "author" %}checked{% endif %} {% if form.by.value == "author" %}checked{% endif %}
id="author"> id="author">
<label for="author" class="form-check-label fw-bold">Author or Affiliation Name</label> <label for="{{ form.author.id_for_label }}" class="form-check-label fw-bold">Author or Affiliation Name</label>
</div> </div>
</div> </div>
<div class="col-sm-8"><label aria-label="Author">{{ form.author|add_class:"form-control" }}</label></div> <div class="col-sm-8">{{ form.author|add_class:"form-control" }}</div>
</div> </div>
<div class="row mb-3 search_field"> <div class="row mb-3 search_field">
<div class="col-sm-4"> <div class="col-sm-4">
@ -88,10 +86,10 @@
value="group" value="group"
{% if form.by.value == "group" %}checked{% endif %} {% if form.by.value == "group" %}checked{% endif %}
id="group"> id="group">
<label for="group" class="form-check-label fw-bold">WG</label> <label for="{{ form.group.id_for_label }}" class="form-check-label fw-bold">WG</label>
</div> </div>
</div> </div>
<div class="col-sm-8"><label aria-label="Group">{{ form.group|add_class:"form-control" }}</label></div> <div class="col-sm-8">{{ form.group|add_class:"form-control" }}</div>
</div> </div>
<div class="row mb-3 search_field"> <div class="row mb-3 search_field">
<div class="col-sm-4"> <div class="col-sm-4">
@ -102,10 +100,10 @@
value="area" value="area"
{% if form.by.value == "area" %}checked{% endif %} {% if form.by.value == "area" %}checked{% endif %}
id="area"> id="area">
<label for="area" class="form-check-label fw-bold">Area</label> <label for="{{ form.area.id_for_label }}" class="form-check-label fw-bold">Area</label>
</div> </div>
</div> </div>
<div class="col-sm-8"><label aria-label="Area">{{ form.area|add_class:"form-select" }}</label></div> <div class="col-sm-8">{{ form.area|add_class:"select2-field"|attr:"data-minimum-input-length:0"|attr:"data-max-entries:1"|attr:"data-minimum-results-for-search:Infinity" }}</div>
</div> </div>
<div class="row mb-3 search_field"> <div class="row mb-3 search_field">
<div class="col-sm-4"> <div class="col-sm-4">
@ -116,10 +114,10 @@
value="ad" value="ad"
{% if form.by.value == "ad" %}checked{% endif %} {% if form.by.value == "ad" %}checked{% endif %}
id="areadir"> id="areadir">
<label for="areadir" class="form-check-label fw-bold">AD</label> <label for="{{ form.ad.id_for_label }}" class="form-check-label fw-bold">AD</label>
</div> </div>
</div> </div>
<div class="col-sm-8"><label aria-label="AD">{{ form.ad|add_class:"form-select" }}</label></div> <div class="col-sm-8">{{ form.ad|add_class:"select2-field"|attr:"data-minimum-input-length:0"|attr:"data-max-entries:1"|attr:"data-minimum-results-for-search:Infinity" }}</div>
</div> </div>
<div class="row mb-3 search_field"> <div class="row mb-3 search_field">
<div class="col-sm-4"> <div class="col-sm-4">
@ -130,11 +128,11 @@
value="state" value="state"
{% if form.by.value == "state" %}checked{% endif %} {% if form.by.value == "state" %}checked{% endif %}
id="state"> id="state">
<label for="state" class="form-check-label fw-bold">IESG State</label> <label for="{{ form.state.id_for_label }}" class="form-check-label fw-bold">IESG State</label>
</div> </div>
</div> </div>
<div class="col-sm-4"><label aria-label="State">{{ form.state|add_class:"form-select col-sm-4" }}</label></div> <div class="col-sm-4">{{ form.state|add_class:"select2-field"|attr:"data-minimum-input-length:0"|attr:"data-max-entries:1"|attr:"data-minimum-results-for-search:Infinity" }}</div>
<div class="col-sm-4"><label aria-label="Substate">{{ form.substate|add_class:"form-select" }}</label></div> <div class="col-sm-4">{{ form.substate|add_class:"select2-field"|attr:"data-minimum-input-length:0"|attr:"data-max-entries:1"|attr:"data-minimum-results-for-search:Infinity" }}</div>
</div> </div>
<div class="row mb-3 search_field"> <div class="row mb-3 search_field">
<div class="col-sm-4"> <div class="col-sm-4">
@ -145,10 +143,10 @@
value="irtfstate" value="irtfstate"
{% if form.by.value == "irtfstate" %}checked{% endif %} {% if form.by.value == "irtfstate" %}checked{% endif %}
id="irtfstate"> id="irtfstate">
<label for="irtfstate" class="form-check-label fw-bold">IRTF State</label> <label for="{{ form.irtfstate.id_for_label }}" class="form-check-label fw-bold">IRTF State</label>
</div> </div>
</div> </div>
<div class="col-sm-8"><label aria-label="IRTF State">{{ form.irtfstate|add_class:"form-select" }}</label></div> <div class="col-sm-8">{{ form.irtfstate|add_class:"select2-field"|attr:"data-minimum-input-length:0"|attr:"data-max-entries:1"|attr:"data-minimum-results-for-search:Infinity" }}</div>
</div> </div>
<div class="row mb-3 search_field"> <div class="row mb-3 search_field">
<div class="col-sm-4"> <div class="col-sm-4">
@ -159,10 +157,10 @@
value="stream" value="stream"
{% if form.by.value == "stream" %}checked{% endif %} {% if form.by.value == "stream" %}checked{% endif %}
id="stream"> id="stream">
<label for="stream" class="form-check-label fw-bold">Stream</label> <label for="{{ form.stream.id_for_label }}" class="form-check-label fw-bold">Stream</label>
</div> </div>
</div> </div>
<div class="col-sm-8"><label aria-label="Stream">{{ form.stream|add_class:"form-select" }}</label></div> <div class="col-sm-8">{{ form.stream|add_class:"select2-field"|attr:"data-minimum-input-length:0"|attr:"data-max-entries:1"|attr:"data-minimum-results-for-search:Infinity" }}</div>
</div> </div>
<div class="row mb-3 search_field"> <div class="row mb-3 search_field">
<div class="col-sm-4 d-grid"> <div class="col-sm-4 d-grid">
@ -180,8 +178,7 @@
</div> </div>
</div> </div>
</form> </form>
<p class="text-center pt-3"> <p class="text-center pt-5">
<a href="https://www.ietf.org/search">Search page for www.ietf.org website</a> <a class="btn btn-outline-primary btn-sm" href="https://www.ietf.org/search">Search page for www.ietf.org website</a>
| <a class="btn btn-outline-primary btn-sm" href="https://mailarchive.ietf.org">Search page for IETF mail list archives</a>
<a href="https://mailarchive.ietf.org">Search page for IETF mail list archives</a>
</p> </p>

View file

@ -1,9 +1,9 @@
{# Copyright The IETF Trust 2015, All Rights Reserved #} {# Copyright The IETF Trust 2015, All Rights Reserved #}
{% load origin %} {% load origin %}
{% origin %} {% origin %}
<!-- [html-validate-disable-block input-missing-label -- labelled via aria-label] -->
{% for rfc,choice_slug in form.relations.items %} {% for rfc,choice_slug in form.relations.items %}
<div class="input-group mb-3"> <div class="input-group mb-3">
<label for="new_relation_row_{{ rfc }}" aria-label="Enter new affected RFC"></label>
<select class="form-control select2-field" <select class="form-control select2-field"
data-ajax--url="{% url 'ietf.doc.views_search.ajax_select2_search_docs' model_name='document' doc_type='draft' %}" data-ajax--url="{% url 'ietf.doc.views_search.ajax_select2_search_docs' model_name='document' doc_type='draft' %}"
data-max-entries="1" data-max-entries="1"
@ -11,13 +11,16 @@
data-result-key="text" data-result-key="text"
name="new_relation_row_{{ rfc }}" name="new_relation_row_{{ rfc }}"
id="new_relation_row_{{ rfc }}" id="new_relation_row_{{ rfc }}"
aria-label="Enter new affected RFC"
data-placeholder="Enter new affected RFC."> data-placeholder="Enter new affected RFC.">
<option id="{{ rfc|upper }}" selected> <option id="{{ rfc|upper }}" selected>
{{ rfc|upper }} {{ rfc|upper }}
</option> </option>
</select> </select>
<label for="statchg_relation_row_{{ rfc }}" aria-label="Select proposed new status"></label> <select class="form-select"
<select class="form-select" name="statchg_relation_row_{{ rfc }}" id="statchg_relation_row_{{ rfc }}"> aria-label="Select proposed new status"
name="statchg_relation_row_{{ rfc }}"
id="statchg_relation_row_{{ rfc }}">
<option {% if choice_slug == "" %}selected{% endif %}> <option {% if choice_slug == "" %}selected{% endif %}>
(None) (None)
</option> </option>
@ -32,9 +35,9 @@
</div> </div>
{% endfor %} {% endfor %}
<div class="input-group mb-3 new-relation-row"> <div class="input-group mb-3 new-relation-row">
<label for="new_relation_row_rfc" aria-label="Enter new affected RFC"></label>
<select name="new_relation_row_" <select name="new_relation_row_"
id="new_relation_row_rfc" id="new_relation_row_rfc"
aria-label="Enter new affected RFC"
class="form-control select2-field" class="form-control select2-field"
data-ajax--url="{% url 'ietf.doc.views_search.ajax_select2_search_docs' model_name='docalias' doc_type='draft' %}" data-ajax--url="{% url 'ietf.doc.views_search.ajax_select2_search_docs' model_name='docalias' doc_type='draft' %}"
data-result-key="text" data-result-key="text"
@ -42,8 +45,10 @@
data-width="resolve" data-width="resolve"
data-placeholder="Enter new affected RFC."> data-placeholder="Enter new affected RFC.">
</select> </select>
<label for="statchg_relation_row" aria-label="Select proposed new status"></label> <select id="statchg_relation_row"
<select id="statchg_relation_row" class="form-select" name="statchg_relation_row_"> class="form-select"
aria-label="Select proposed new status"
name="statchg_relation_row_">
<option {% if choice_slug == "" %}selected{% endif %}> <option {% if choice_slug == "" %}selected{% endif %}>
(Select proposed new status.) (Select proposed new status.)
</option> </option>

View file

@ -21,7 +21,8 @@
{{ liaison.deadline|default:"-"|date:"Y-m-d" }} {{ liaison.deadline|default:"-"|date:"Y-m-d" }}
{% if liaison.deadline and not liaison.action_taken %} {% if liaison.deadline and not liaison.action_taken %}
<br> <br>
<span class="badge rounded-pill <span title="{{ liaison.is_outgoing|yesno:'Outgoing,Incoming' }} liaison"
class="badge rounded-pill
{% if liaison.is_outgoing %} {% if liaison.is_outgoing %}
bg-warning bg-warning
{% else %} {% else %}
@ -36,4 +37,4 @@
{% endfor %} {% endfor %}
</tbody> </tbody>
{% endif %} {% endif %}
</table> </table>

View file

@ -8,9 +8,8 @@
action="{% url "ietf.liaisons.views.liaison_list" state=state %}" action="{% url "ietf.liaisons.views.liaison_list" state=state %}"
method="get"> method="get">
<div class="input-group search_field my-3"> <div class="input-group search_field my-3">
<label aria-label="Liaison search"> <!-- [html-validate-disable-block input-missing-label -- labelled via aria-label] -->
{{ form.text|add_class:"form-control"|attr:"placeholder:Title, body, identifiers, etc." }} {{ form.text|add_class:"form-control"|attr:"placeholder:Title, body, identifiers, etc."|attr:"aria-label:Liaison search" }}
</label>
<button class="btn btn-primary" type="submit"> <button class="btn btn-primary" type="submit">
<i class="bi bi-search"></i> <i class="bi bi-search"></i>
Search Search

View file

@ -171,15 +171,16 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<!-- [html-validate-disable-block input-missing-label -- labelled via aria-label] -->
{% for np in nominee_positions %} {% for np in nominee_positions %}
<tr> <tr>
{% if is_chair and nomcom.group.state_id == 'active' %} {% if is_chair and nomcom.group.state_id == 'active' %}
<td> <td>
<label class="d-none" aria-label="np.nominee.name" for="id-{{ np.id }}"></label>
<input class="batch-select form-check-input" <input class="batch-select form-check-input"
type="checkbox" type="checkbox"
value="{{ np.id }}" value="{{ np.id }}"
id="id-{{ np.id }}" id="id-{{ np.id }}"
aria-label="np.nominee.name"
name="selected"> name="selected">
</td> </td>
<td class="edit"> <td class="edit">
@ -246,4 +247,4 @@
{% endblock %} {% endblock %}
{% block js %} {% block js %}
<script src="{% static "ietf/js/list.js" %}"></script> <script src="{% static "ietf/js/list.js" %}"></script>
{% endblock %} {% endblock %}

View file

@ -39,13 +39,14 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<!-- [html-validate-disable-block input-missing-label -- labelled via aria-label] -->
{% for nominee in nominees %} {% for nominee in nominees %}
<tr> <tr>
<td> <td>
<label class="d-none" aria-label="{{ nominee.name }}" for="id-{{ nominee.id }}"></label>
<input type="checkbox" <input type="checkbox"
class="batch-select form-check-input" class="batch-select form-check-input"
id="id-{{ nominee.id }}" id="id-{{ nominee.id }}"
aria-label="{{ nominee.name }}"
value="{{ nominee.id }}" value="{{ nominee.id }}"
name="selected" name="selected"
checked> checked>

View file

@ -104,15 +104,16 @@
</tr> </tr>
{% endif %} {% endif %}
<tr> <tr>
<!-- [html-validate-disable-block input-missing-label -- labelled via aria-label] -->
<td>{{ form.instance.time|date:"r" }}{{ form.id }}</td> <td>{{ form.instance.time|date:"r" }}{{ form.id }}</td>
{% for choice in form.type.field.choices %} {% for choice in form.type.field.choices %}
<td class="text-center"> <td class="text-center">
<label class="d-none" aria-label="{{ choice.1 }}" for="{{ choice.1|slugify }}"></label>
<input type="radio" <input type="radio"
class="form-check-input" class="form-check-input"
name="{{ form.type.html_name }}" name="{{ form.type.html_name }}"
value="{{ choice.0 }}" value="{{ choice.0 }}"
id="{{ choice.1|slugify }}" id="{{ choice.1|slugify }}"
aria-label="{{ choice.1 }}"
{% if not choice.0 %}checked{% endif %} {% if not choice.0 %}checked{% endif %}
title="{{ choice.1 }}"> title="{{ choice.1 }}">
</td> </td>
@ -181,4 +182,4 @@
</p> </p>
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% block js %}{{ formset.media.js }}{% endblock %} {% block js %}{{ formset.media.js }}{% endblock %}

View file

@ -132,25 +132,24 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<!-- [html-validate-disable-block input-missing-label -- labelled via aria-label] -->
{% for email in emails %} {% for email in emails %}
<tr> <tr>
<td class="text-center"> <td class="text-center">
<label aria-label="Primary email">
<input class="form-check-input" <input class="form-check-input"
type="radio" type="radio"
name="primary_email" name="primary_email"
aria-label="Primary email"
value="{{ email.pk }}" value="{{ email.pk }}"
{% if email.primary %}checked{% endif %}> {% if email.primary %}checked{% endif %}>
</label>
</td> </td>
<td class="text-center"> <td class="text-center">
<label aria-label="Active email">
<input class="form-check-input" <input class="form-check-input"
type="checkbox" type="checkbox"
name="active_emails" name="active_emails"
value="{{ email.pk }}" value="{{ email.pk }}"
aria-label="Active email"
{% if email.active %}checked{% endif %}> {% if email.active %}checked{% endif %}>
</label>
</td> </td>
<td> <td>
{% if email.origin == person.user.username or email.origin == '' %} {% if email.origin == person.user.username or email.origin == '' %}

View file

@ -51,10 +51,11 @@
<label id="reqtime" class="fw-bold col-sm-2 col-form-label">Request time:</label> <label id="reqtime" class="fw-bold col-sm-2 col-form-label">Request time:</label>
<div class="col-sm-10"> <div class="col-sm-10">
<div class="input-group"> <div class="input-group">
<label class="d-none" for="from" aria-label="Request time, from"></label> <!-- [html-validate-disable-block input-missing-label -- labelled via aria-label] -->
<input class="form-control" <input class="form-control"
type="text" type="text"
name="from" name="from"
aria-label="Request time, from"
id="from" id="from"
value="{{ from_date }}" value="{{ from_date }}"
data-provide="datepicker" data-provide="datepicker"
@ -64,10 +65,10 @@
data-date-end-date="{{ today.isoformat }}" data-date-end-date="{{ today.isoformat }}"
data-date-start-view="months"> data-date-start-view="months">
<span class="input-group-text" id="basic-addon2">&mdash;</span> <span class="input-group-text" id="basic-addon2">&mdash;</span>
<label class="d-none" for="to" aria-label="Request time, to"></label>
<input class="form-control" <input class="form-control"
type="text" type="text"
name="to" name="to"
aria-label="Request time, to"
id="to" id="to"
value="{{ to_date }}" value="{{ to_date }}"
data-provide="datepicker" data-provide="datepicker"