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:
Tom Byers
2019-10-21 15:18:25 +01:00
parent c06c8c0e5c
commit c1b8fb7531
17 changed files with 31 additions and 31 deletions

View File

@@ -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(); }

View File

@@ -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>'

View File

@@ -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;

View File

@@ -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 }}

View File

@@ -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"

View File

@@ -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 %}

View File

@@ -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 %}

View File

@@ -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 %}

View File

@@ -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() %}

View File

@@ -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() %}

View File

@@ -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() %}

View File

@@ -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>

View File

@@ -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 %}

View File

@@ -18,7 +18,7 @@ Create an account
<div class="extra-tracking">
{{ textbox(form.mobile_number, width='3-4', hint='Well 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") }}

View File

@@ -119,12 +119,12 @@
<h2>Whos 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>

View File

@@ -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>

View File

@@ -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);
});