Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add screenreader descriptive text to DS and nameserver inputs #3009

Merged
merged 3 commits into from
Nov 1, 2024
Merged

Add screenreader descriptive text to DS and nameserver inputs #3009

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
80b2469
Add screenreader only text to ds delete button
erinysong Oct 28, 2024
1bea78f
Add aria label option for inputs
erinysong Oct 30, 2024
e72d1ca
Revert input_with_errors
erinysong Oct 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/registrar/templates/django/forms/widgets/input.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
{# hint: spacing in the class string matters #}
class="{{ uswds_input_class }}{% if classes %} {{ classes }}{% endif %}"
{% if widget.value != None %}value="{{ widget.value|stringformat:'s' }}"{% endif %}
{% if aria_label %}aria-label="{{ aria_label }} {{ label }}"{% endif %}
{% if sublabel_text %}aria-describedby="{{ widget.attrs.id }}__sublabel"{% endif %}
{% include "django/forms/widgets/attrs.html" %}
/>
11 changes: 6 additions & 5 deletions src/registrar/templates/domain_dsdata.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,11 +63,12 @@ <h2 class="margin-top-0">DS data record {{forloop.counter}}</h2>

<div class="grid-row margin-top-1">
<div class="grid-col">
<button type="button" class="usa-button usa-button--unstyled usa-button--with-icon float-right-tablet delete-record text-secondary line-height-sans-5">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
<use xlink:href="{%static 'img/sprite.svg'%}#delete"></use>
</svg>Delete
</button>
<button type="button" id="button label" class="usa-button usa-button--unstyled usa-button--with-icon float-right-tablet delete-record text-secondary line-height-sans-5">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
<use xlink:href="{%static 'img/sprite.svg'%}#delete"></use>
</svg>Delete
<span class="sr-only">DS data record {{forloop.counter}}</span>
</button>
</div>
</div>

Expand Down
3 changes: 2 additions & 1 deletion src/registrar/templates/domain_nameservers.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ <h1>DNS name servers</h1>
{% endwith %}
</div>
<div class="tablet:grid-col-5">
{% with sublabel_text="Example: 86.124.49.54 or 2001:db8::1234:5678" add_group_class="usa-form-group--unstyled-error" %}
{% with label_text=form.ip.label sublabel_text="Example: 86.124.49.54 or 2001:db8::1234:5678" add_group_class="usa-form-group--unstyled-error" add_aria_label="Name server "|concat:forloop.counter|concat:" "|concat:form.ip.label %}
{% input_with_errors form.ip %}
{% endwith %}
</div>
Expand All @@ -56,6 +56,7 @@ <h1>DNS name servers</h1>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
<use xlink:href="{%static 'img/sprite.svg'%}#delete"></use>
</svg>Delete
<span class="sr-only">Name server {{forloop.counter}}</span>
</button>
</div>
</div>
Expand Down
10 changes: 9 additions & 1 deletion src/registrar/templatetags/field_helpers.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ def input_with_errors(context, field=None): # noqa: C901
add_label_class: append to input element's label's `class` attribute
add_legend_class: append to input element's legend's `class` attribute
add_group_class: append to input element's surrounding tag's `class` attribute
add_aria_label: append to input element's `aria_label` attribute
attr_* - adds or replaces any single html attribute for the input
add_error_attr_* - like `attr_*` but only if field.errors is not empty
toggleable_input: shows a simple edit button, and adds display-none to the input field.
Expand Down Expand Up @@ -55,6 +56,7 @@ def input_with_errors(context, field=None): # noqa: C901
label_classes = []
legend_classes = []
group_classes = []
aria_labels = []

# this will be converted to an attribute string
described_by = []
Expand Down Expand Up @@ -98,6 +100,9 @@ def input_with_errors(context, field=None): # noqa: C901
if "display-none" not in classes:
classes.append("display-none")

elif key == "add_aria_label":
aria_labels.append(value)

attrs["id"] = field.auto_id

# do some work for various edge cases
Expand Down Expand Up @@ -151,7 +156,10 @@ def input_with_errors(context, field=None): # noqa: C901
# ensure we don't overwrite existing attribute value
if "aria-describedby" in attrs:
described_by.append(attrs["aria-describedby"])
attrs["aria-describedby"] = " ".join(described_by)
attrs["aria_describedby"] = " ".join(described_by)

if aria_labels:
context["aria_label"] = " ".join(aria_labels)

# ask Django to give us the widget dict
# see Widget.get_context() on
Expand Down
Loading