mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-04-17 07:42:15 -04:00
Replace all visually-hidden classes
These have been replaced: https://design-system.service.gov.uk/get-started/updating-your-code/#helper-class-names
This commit is contained in:
@@ -53,7 +53,7 @@
|
||||
}
|
||||
Footer.prototype.buttonContent = {
|
||||
change: (fieldLabel) => `Choose ${fieldLabel}s`,
|
||||
done: (fieldLabel) => `Done<span class="visuallyhidden"> choosing ${fieldLabel}s</span>`
|
||||
done: (fieldLabel) => `Done<span class="govuk-visually-hidden"> choosing ${fieldLabel}s</span>`
|
||||
};
|
||||
Footer.prototype.getEl = function (expanded) {
|
||||
const buttonState = expanded ? 'done' : 'change';
|
||||
@@ -118,7 +118,7 @@
|
||||
this.$heading = $(`<h${headingLevel} class="heading-small">${this.legendText}</h${headingLevel}>`);
|
||||
this.$fieldset.before(this.$heading);
|
||||
|
||||
this.$fieldset.find('legend').addClass('visuallyhidden');
|
||||
this.$fieldset.find('legend').addClass('govuk-visually-hidden');
|
||||
};
|
||||
CollapsibleCheckboxes.prototype.expand = function(e) {
|
||||
if (e !== undefined) { e.preventDefault(); }
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
ListEntry.prototype.entryTemplate = Hogan.compile(
|
||||
'<div class="list-entry">' +
|
||||
'<label for="{{{id}}}" class="text-box-number-label">' +
|
||||
'<span class="visuallyhidden">{{listItemName}} number </span>{{number}}.' +
|
||||
'<span class="govuk-visually-hidden">{{listItemName}} number </span>{{number}}.' +
|
||||
'</label>' +
|
||||
'<input' +
|
||||
' name="{{name}}-{{index}}"' +
|
||||
@@ -38,7 +38,7 @@
|
||||
'/>' +
|
||||
'{{#button}}' +
|
||||
'<button type="button" class="button-secondary list-entry-remove">' +
|
||||
'Remove<span class="visuallyhidden"> {{listItemName}} number {{number}}</span>' +
|
||||
'Remove<span class="govuk-visually-hidden"> {{listItemName}} number {{number}}</span>' +
|
||||
'</button>' +
|
||||
'{{/button}}' +
|
||||
'</div>'
|
||||
|
||||
@@ -127,7 +127,7 @@
|
||||
});
|
||||
|
||||
if (opts.hasOwnProperty('nonvisualText')) {
|
||||
$btn.append(`<span class="visuallyhidden"> ${opts.nonvisualText}</span>`);
|
||||
$btn.append(`<span class="govuk-visually-hidden"> ${opts.nonvisualText}</span>`);
|
||||
}
|
||||
|
||||
return $btn;
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
) %}
|
||||
<form method="post" enctype="multipart/form-data" {% if action %}action="{{ action }}"{% endif %} class="{% if field.errors and show_errors %}form-group-error{% endif %}" data-module="file-upload">
|
||||
<label class="file-upload-label" for="{{ field.name }}">
|
||||
<span class="visually-hidden">{{ field.label.text }}</span>
|
||||
<span class="govuk-visually-hidden">{{ field.label.text }}</span>
|
||||
{% if hint %}
|
||||
<span class="form-hint">
|
||||
{{ hint }}
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
{% for index in range(0, field.entries|length) %}
|
||||
<div class="list-entry">
|
||||
<label for="input-{{ field.name }}-{{ index }}" class="text-box-number-label">
|
||||
<span class="visuallyhidden">{{ item_name }} number </span>{{ index + 1 }}.
|
||||
<span class="govuk-visually-hidden">{{ item_name }} number </span>{{ index + 1 }}.
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
|
||||
@@ -43,7 +43,7 @@
|
||||
{% endif %}
|
||||
<fieldset id="{{ field.id }}" {% if inline %}class="inline"{% endif %}>
|
||||
<legend class="{{ 'form-label' if not hide_legend else '' }}{% if legend_style != 'text' %} {{ legend_style }}{% endif %}">
|
||||
{% if hide_legend %}<span class="visually-hidden">{% endif %}
|
||||
{% if hide_legend %}<span class="govuk-visually-hidden">{% endif %}
|
||||
{{ field.label.text|safe }}
|
||||
{% if hide_legend %}</span>{% endif %}
|
||||
{% if hint %}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
{% macro mapping_table(caption='', field_headings=[], field_headings_visible=True, caption_visible=True, equal_length=False) -%}
|
||||
<table class="table table-font-xsmall">
|
||||
<caption class="heading-medium table-heading{{ ' visuallyhidden' if not caption_visible}}">
|
||||
<caption class="heading-medium table-heading{{ ' govuk-visually-hidden' if not caption_visible}}">
|
||||
{{ caption }}
|
||||
</caption>
|
||||
<thead class="table-field-headings{% if field_headings_visible %}-visible{% endif %}">
|
||||
@@ -12,7 +12,7 @@
|
||||
{% if field_headings_visible %}
|
||||
{{ field_heading }}
|
||||
{% else %}
|
||||
<span class="visuallyhidden">{{ field_heading }}</span>
|
||||
<span class="govuk-visually-hidden">{{ field_heading }}</span>
|
||||
{% endif %}
|
||||
</th>
|
||||
{% endfor %}
|
||||
@@ -138,7 +138,7 @@
|
||||
{%- endmacro %}
|
||||
|
||||
{% macro hidden_field_heading(text) %}
|
||||
<span class="visuallyhidden">{{ text }}</span>
|
||||
<span class="govuk-visually-hidden">{{ text }}</span>
|
||||
{%- endmacro %}
|
||||
|
||||
|
||||
|
||||
@@ -2,12 +2,12 @@
|
||||
<li>
|
||||
{% if yes %}
|
||||
<span class="tick-cross-tick">
|
||||
<span class="visually-hidden">{{ truthy_hint }}</span>
|
||||
<span class="govuk-visually-hidden">{{ truthy_hint }}</span>
|
||||
{{ label}}
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="tick-cross-cross">
|
||||
<span class="visually-hidden">{{ falsey_hint }}</span>
|
||||
<span class="govuk-visually-hidden">{{ falsey_hint }}</span>
|
||||
{{ label}}
|
||||
</span>
|
||||
{% endif %}
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
|
||||
{% set file_contents_header_id = 'file-preview' %}
|
||||
{% macro skip_to_file_contents() %}
|
||||
<p class="visually-hidden">
|
||||
<p class="govuk-visually-hidden">
|
||||
<a href="#{{ file_contents_header_id }}">Skip to file contents</a>
|
||||
</p>
|
||||
{% endmacro %}
|
||||
@@ -165,7 +165,7 @@
|
||||
caption=original_file_name,
|
||||
caption_visible=False,
|
||||
field_headings=[
|
||||
'<span class="visually-hidden">Row in file</span><span aria-hidden="true">1</span>'|safe
|
||||
'<span class="govuk-visually-hidden">Row in file</span><span aria-hidden="true">1</span>'|safe
|
||||
] + column_headers
|
||||
) %}
|
||||
{% call index_field() %}
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
|
||||
{% set file_contents_header_id = 'file-preview' %}
|
||||
{% macro skip_to_file_contents() %}
|
||||
<p class="visually-hidden">
|
||||
<p class="govuk-visually-hidden">
|
||||
<a href="#{{ file_contents_header_id }}">Skip to file contents</a>
|
||||
</p>
|
||||
{% endmacro %}
|
||||
@@ -62,7 +62,7 @@
|
||||
caption=original_file_name,
|
||||
caption_visible=False,
|
||||
field_headings=[
|
||||
'<span class="visually-hidden">Row in file</span><span aria-hidden="true">1</span>'|safe
|
||||
'<span class="govuk-visually-hidden">Row in file</span><span aria-hidden="true">1</span>'|safe
|
||||
] + recipients.column_headers
|
||||
) %}
|
||||
{% call index_field() %}
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
|
||||
{% set file_contents_header_id = 'file-preview' %}
|
||||
{% macro skip_to_file_contents() %}
|
||||
<p class="visually-hidden">
|
||||
<p class="govuk-visually-hidden">
|
||||
<a href="#{{ file_contents_header_id }}">Skip to file contents</a>
|
||||
</p>
|
||||
{% endmacro %}
|
||||
@@ -64,7 +64,7 @@
|
||||
caption=original_file_name,
|
||||
caption_visible=False,
|
||||
field_headings=[
|
||||
'<span class="visually-hidden">Row in file</span><span aria-hidden="true" class="table-field-invisible-error">1</span>'|safe
|
||||
'<span class="govuk-visually-hidden">Row in file</span><span aria-hidden="true" class="table-field-invisible-error">1</span>'|safe
|
||||
] + recipients.column_headers
|
||||
) %}
|
||||
{% call index_field() %}
|
||||
|
||||
@@ -53,7 +53,7 @@
|
||||
|
||||
{% block maincolumn_content %}
|
||||
|
||||
<h1 class="heading-large {% if current_user.has_access_to_live_and_trial_mode_services %}visually-hidden{% endif %}">
|
||||
<h1 class="heading-large {% if current_user.has_access_to_live_and_trial_mode_services %}govuk-visually-hidden{% endif %}">
|
||||
Choose service
|
||||
</h1>
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
|
||||
<div class="dashboard">
|
||||
|
||||
<h1 class="visuallyhidden">Dashboard</h1>
|
||||
<h1 class="govuk-visually-hidden">Dashboard</h1>
|
||||
{% if current_user.has_permissions('manage_templates') and not current_service.all_templates %}
|
||||
{% include 'views/dashboard/write-first-messages.html' %}
|
||||
{% endif %}
|
||||
|
||||
@@ -18,7 +18,7 @@ Create an account
|
||||
<div class="extra-tracking">
|
||||
{{ textbox(form.mobile_number, width='3-4', hint='We’ll send you a security code by text message') }}
|
||||
</div>
|
||||
<input class="visually-hidden" aria-hidden="true" tabindex="-1" id="defeat-chrome-autocomplete">
|
||||
<input class="govuk-visually-hidden" aria-hidden="true" tabindex="-1" id="defeat-chrome-autocomplete">
|
||||
{{ textbox(form.password, hint="At least 8 characters", width='3-4', autocomplete='new-password') }}
|
||||
{{form.auth_type}}
|
||||
{{ page_footer("Continue") }}
|
||||
|
||||
@@ -119,12 +119,12 @@
|
||||
<h2>Who’s using GOV.UK Notify</h2>
|
||||
<div class="grid-row bottom-gutter">
|
||||
<div class="column-half">
|
||||
<h3 class="visually-hidden">Services</h3>
|
||||
<h3 class="govuk-visually-hidden">Services</h3>
|
||||
<div class="product-page-big-number">{{ counts.services|format_thousands }}</div>
|
||||
services
|
||||
</div>
|
||||
<div class="column-half">
|
||||
<h3 class="visually-hidden">Organisations</h3>
|
||||
<h3 class="govuk-visually-hidden">Organisations</h3>
|
||||
<div class="product-page-big-number">{{ counts.organisations|format_thousands }}</div>
|
||||
organisations
|
||||
</div>
|
||||
@@ -140,18 +140,18 @@
|
||||
<h2>Pricing</h2>
|
||||
<div class="grid-row bottom-gutter">
|
||||
<div class="column-half">
|
||||
<h3 class="visually-hidden">Emails</h3>
|
||||
<h3 class="govuk-visually-hidden">Emails</h3>
|
||||
<div class="product-page-big-number">Unlimited</div>
|
||||
free emails
|
||||
</div>
|
||||
<div class="column-half">
|
||||
<h3 class="visually-hidden">Text messages</h3>
|
||||
<h3 class="govuk-visually-hidden">Text messages</h3>
|
||||
<div class="product-page-big-number">Up to 250,000</div>
|
||||
free text messages a year,<br>
|
||||
then 1.58 pence per message
|
||||
</div>
|
||||
<div class="column-half">
|
||||
<h3 class="visually-hidden">Letters</h3>
|
||||
<h3 class="govuk-visually-hidden">Letters</h3>
|
||||
<div class="product-page-big-number">35 pence</div>
|
||||
to print and post a one page letter
|
||||
</div>
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
</div>
|
||||
<div id="move_to_new_folder_form">
|
||||
<fieldset class="js-will-stick-at-bottom-when-scrolling">
|
||||
<legend class="visuallyhidden">Add to new folder</legend>
|
||||
<legend class="govuk-visually-hidden">Add to new folder</legend>
|
||||
{{ textbox(templates_and_folders_form.move_to_new_folder_name, width='1-1') }}
|
||||
{{ page_footer('Add to new folder', button_name='operation', button_value='move-to-new-folder') }}
|
||||
</fieldset>
|
||||
@@ -23,7 +23,7 @@
|
||||
{% endif %}
|
||||
<div id="add_new_folder_form">
|
||||
<fieldset class="js-will-stick-at-bottom-when-scrolling">
|
||||
<legend class="visuallyhidden">Add new folder</legend>
|
||||
<legend class="govuk-visually-hidden">Add new folder</legend>
|
||||
{{ textbox(templates_and_folders_form.add_new_folder_name, width='1-1') }}
|
||||
{{ page_footer('Add new folder', button_name='operation', button_value='add-new-folder') }}
|
||||
</fieldset>
|
||||
@@ -36,7 +36,7 @@
|
||||
{{ page_footer('Continue', button_name='operation', button_value='add-new-template') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="selection-counter visuallyhidden" role="status" aria-live="polite">
|
||||
<div class="selection-counter govuk-visually-hidden" role="status" aria-live="polite">
|
||||
Nothing selected
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -113,7 +113,7 @@ describe('Collapsible fieldset', () => {
|
||||
|
||||
const legend = helpers.element(fieldset.querySelector('legend'));
|
||||
|
||||
expect(legend.hasClass('visuallyhidden')).toBe(true);
|
||||
expect(legend.hasClass('govuk-visually-hidden')).toBe(true);
|
||||
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user