Edit templates for table and checkbox accessibility, lightly edit layout styles for added ths, unit tests

This commit is contained in:
rachidatecs 2023-07-26 15:55:15 -04:00
parent 2308ee6304
commit d2e5191d5e
No known key found for this signature in database
GPG key ID: 3CEBBFA7325E5525
8 changed files with 226 additions and 0 deletions

View file

@ -0,0 +1,6 @@
.min-width-25 {
min-width: 25px;
}
.min-width-81 {
min-width: 81px;
}

View file

@ -9,3 +9,7 @@
/*--------------------------------------------------
--- Custom Styles ---------------------------------*/
@forward "uswds-theme-custom-styles";
/*--------------------------------------------------
--- Admin ---------------------------------*/
@forward "admin";

View file

@ -0,0 +1,56 @@
{% load i18n %}
{% if app_list %}
{% for app in app_list %}
<div class="app-{{ app.app_label }} module{% if app.app_url in request.path|urlencode %} current-app{% endif %}">
<table>
<caption>
<a href="{{ app.app_url }}" class="section" title="{% blocktranslate with name=app.name %}Models in the {{ name }} application{% endblocktranslate %}">{{ app.name }}</a>
</caption>
{# .gov override #}
<thead>
<tr>
<th scope="col">Model</th>
<th><span class="display-inline-block min-width-25">Add</span></th>
{% if show_changelinks %}
<th>
<span class="display-inline-block min-width-81">
{% translate 'View/Change' %}</th>
</span>
{% endif %}
</tr>
</thead>
{# end .gov override #}
{% for model in app.models %}
<tr class="model-{{ model.object_name|lower }}{% if model.admin_url in request.path|urlencode %} current-model{% endif %}">
{% if model.admin_url %}
<th scope="row"><a href="{{ model.admin_url }}"{% if model.admin_url in request.path|urlencode %} aria-current="page"{% endif %}>{{ model.name }}</a></th>
{% else %}
<th scope="row">{{ model.name }}</th>
{% endif %}
{% if model.add_url %}
<td><a href="{{ model.add_url }}" class="addlink">{% translate 'Add' %}</a></td>
{% else %}
<td></td>
{% endif %}
{% if model.admin_url and show_changelinks %}
{% if model.view_only %}
<td><a href="{{ model.admin_url }}" class="viewlink">{% translate 'View' %}</a></td>
{% else %}
<td><a href="{{ model.admin_url }}" class="changelink">{% translate 'Change' %}</a></td>
{% endif %}
{% elif show_changelinks %}
<td></td>
{% endif %}
</tr>
{% endfor %}
</table>
</div>
{% endfor %}
{% else %}
<p>{% translate 'You dont have permission to view or edit anything.' %}</p>
{% endif %}

View file

@ -0,0 +1,15 @@
{% extends "admin/base.html" %}
{% load static %}
{% block title %}{% if subtitle %}{{ subtitle }} | {% endif %}{{ title }} | {{ site_title|default:_('Django site admin') }}{% endblock %}
{% block extrastyle %}{{ block.super }}<link rel="stylesheet" type="text/css" href="{% static "css/styles.css" %}" />{% endblock %}
{% block branding %}
<h1 id="site-name"><a href="{% url 'admin:index' %}">.gov admin</a></h1>
{% if user.is_anonymous %}
{% include "admin/color_theme_toggle.html" %}
{% endif %}
{% endblock %}
{% block nav-global %}{% endblock %}

View file

@ -0,0 +1,90 @@
{% load i18n static %}
{% comment %}
.gov override
Load our custom filters to extract info from the django generated markup.
{% endcomment %}
{% load custom_filters %}
{% if result_hidden_fields %}
<div class="hiddenfields">{# DIV for HTML validation #}
{% for item in result_hidden_fields %}{{ item }}{% endfor %}
</div>
{% endif %}
{% if results %}
<div class="results override-change_list_results">
<table id="result_list">
<thead>
<tr>
{# .gov - hardcode the select all checkbox #}
<th scope="col" class="action-checkbox-column" title="Toggle all">
<div class="text">
<span>
<input type="checkbox" name="_selected_action" id="action-toggle">
<label for="action-toggle">Toggle all</label>
</span>
</div>
<div class="clear"></div>
</th>
{# .gov - don't let django generate the select all checkbox #}
{% for header in result_headers|slice:"1:" %}
<th scope="col"{{ header.class_attrib }}>
{% if header.sortable %}
{% if header.sort_priority > 0 %}
<div class="sortoptions">
<a class="sortremove" href="{{ header.url_remove }}" title="{% translate "Remove from sorting" %}"></a>
{% if num_sorted_fields > 1 %}<span class="sortpriority" title="{% blocktranslate with priority_number=header.sort_priority %}Sorting priority: {{ priority_number }}{% endblocktranslate %}">{{ header.sort_priority }}</span>{% endif %}
<a href="{{ header.url_toggle }}" class="toggle {% if header.ascending %}ascending{% else %}descending{% endif %}" title="{% translate "Toggle sorting" %}"></a>
</div>
{% endif %}
{% endif %}
<div class="text">{% if header.sortable %}<a href="{{ header.url_primary }}">{{ header.text|capfirst }}</a>{% else %}<span>{{ header.text|capfirst }}</span>{% endif %}</div>
<div class="clear"></div>
</th>{% endfor %}
</tr>
</thead>
<tbody>
{% comment %}
{% for result in results %}
{% if result.form.non_field_errors %}
<tr><td colspan="{{ result|length }}">{{ result.form.non_field_errors }}</td></tr>
{% endif %}
<tr>{% for item in result %}{{ item }}{% endfor %}</tr>
{% endfor %}
{% endcomment %}
{% comment %}
.gov - hardcode the row checkboxes using the custom filters to extract
the value attribute's value, and a label based on the anchor elements's
text. Then edit the for loop to keep django from generating the row select
checkboxes.
{% endcomment %}
{% for result in results %}
{% if result.form.non_field_errors %}
<tr><td colspan="{{ result|length }}">{{ result.form.non_field_errors }}</td></tr>
{% endif %}
<tr>
{% with result_value=result.0|extract_value %}
{% with result_label=result.1|extract_a_text %}
<td>
<input type="checkbox" name="_selected_action" value="{{ result_value|default:'value' }}" id="{{ result_label|default:result_value }}" class="action-select">
<label for="{{ result_label|default:result_value }}">{{ result_label|default:'label' }}</label>
</td>
{% endwith %}
{% endwith %}
{% for item in result|slice:"1:" %}
{{ item }}
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}

View file

@ -0,0 +1,25 @@
from django import template
import re
register = template.Library()
@register.filter(name="extract_value")
def extract_value(html_input):
match = re.search(r'value="([^"]*)"', html_input)
if match:
return match.group(1)
return ""
@register.filter
def extract_a_text(value):
# Use regex to extract the text within the <a> tag
pattern = r"<a\b[^>]*>(.*?)</a>"
match = re.search(pattern, value)
if match:
extracted_text = match.group(1)
else:
extracted_text = ""
return extracted_text

View file

@ -29,3 +29,33 @@ class TestTemplateTags(TestCase):
self.assertTrue(result.startswith(settings.GETGOV_PUBLIC_SITE_URL))
# slash-slash host slash directory slash page
self.assertEqual(result.count("/"), 4)
class CustomFiltersTestCase(TestCase):
def test_extract_value_filter(self):
from registrar.templatetags.custom_filters import extract_value
html_input = (
'<input type="checkbox" name="_selected_action" value="123" '
'id="label_123" class="action-select">'
)
result = extract_value(html_input)
self.assertEqual(result, "123")
html_input = (
'<input type="checkbox" name="_selected_action" value="abc" '
'id="label_123" class="action-select">'
)
result = extract_value(html_input)
self.assertEqual(result, "abc")
def test_extract_a_text_filter(self):
from registrar.templatetags.custom_filters import extract_a_text
input_text = '<a href="#">Link Text</a>'
result = extract_a_text(input_text)
self.assertEqual(result, "Link Text")
input_text = '<a href="/example">Another Link</a>'
result = extract_a_text(input_text)
self.assertEqual(result, "Another Link")