Files
notifications-admin/app/templates/views/edit-sms-template.html
Chris Hill-Scott c3b6c03411 Add ARIA attributes from Design System component
This commit copies the same ARIA attributes that are added to the
character count component[1] in the GOV.UK Design System.

This means that screen reader users will hear the count message when
they stop typing.

1. https://design-system.service.gov.uk/components/character-count/
2021-01-07 17:14:12 +00:00

50 lines
2.0 KiB
HTML

{% extends "withnav_template.html" %}
{% from "components/textbox.html" import textbox %}
{% from "components/page-header.html" import page_header %}
{% from "components/page-footer.html" import page_footer %}
{% from "components/form.html" import form_wrapper %}
{% block service_page_title %}
{{ heading_action }} text message template
{% endblock %}
{% block maincolumn_content %}
{{ page_header(
'{} text message template'.format(heading_action),
back_link=url_for('main.view_template', service_id=current_service.id, template_id=template.id) if template else url_for('main.choose_template', service_id=current_service.id, template_folder_id=template_folder_id)
) }}
{% call form_wrapper() %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
{{ form.name(param_extensions={
"classes": "govuk-!-width-full",
"hint": {"text": "Your recipients will not see this"}
}) }}
{{ textbox(form.template_content, highlight_placeholders=True, width='1-1', rows=5) }}
{% if current_user.platform_admin %}
{{ form.process_type }}
{% endif %}
</div>
<div class="govuk-grid-column-full">
<div class="js-stick-at-bottom-when-scrolling">
{{ page_footer('Save') }}
<span class="template-list-selected-counter">
<div data-module="update-status" data-target="template_content" data-updates-url="{{ url_for('.count_content_length', service_id=current_service.id, template_type='sms') }}" aria-live="polite">
</div>
</span>
</div>
</div>
<aside class="govuk-grid-column-full">
{% include "partials/templates/guidance-personalisation.html" %}
{% include "partials/templates/guidance-optional-content.html" %}
{% include "partials/templates/guidance-links.html" %}
{% include "partials/templates/guidance-character-count.html" %}
</aside>
</div>
{% endcall %}
{% endblock %}