darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-25 00:33:58 -04:00
Code Issues Packages Projects Releases Wiki Activity

Replace all visually-hidden classes

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/javascripts/collapsibleCheckboxes.js
View File

@@ -53,7 +53,7 @@
} }
Footer.prototype.buttonContent = { Footer.prototype.buttonContent = {
change: (fieldLabel) => `Choose ${fieldLabel}s`, 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) { Footer.prototype.getEl = function (expanded) {
const buttonState = expanded ? 'done' : 'change'; const buttonState = expanded ? 'done' : 'change';
@@ -118,7 +118,7 @@
this.$heading = $(`<h${headingLevel} class="heading-small">${this.legendText}</h${headingLevel}>`); this.$heading = $(`<h${headingLevel} class="heading-small">${this.legendText}</h${headingLevel}>`);
this.$fieldset.before(this.$heading); this.$fieldset.before(this.$heading);
this.$fieldset.find('legend').addClass('visuallyhidden'); this.$fieldset.find('legend').addClass('govuk-visually-hidden');
}; };
CollapsibleCheckboxes.prototype.expand = function(e) { CollapsibleCheckboxes.prototype.expand = function(e) {
if (e !== undefined) { e.preventDefault(); } if (e !== undefined) { e.preventDefault(); }

4
app/assets/javascripts/listEntry.js
View File

@@ -28,7 +28,7 @@
ListEntry.prototype.entryTemplate = Hogan.compile( ListEntry.prototype.entryTemplate = Hogan.compile(
'<div class="list-entry">' + '<div class="list-entry">' +
'<label for="{{{id}}}" class="text-box-number-label">' + '<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>' + '</label>' +
'<input' + '<input' +
' name="{{name}}-{{index}}"' + ' name="{{name}}-{{index}}"' +
@@ -38,7 +38,7 @@
'/>' + '/>' +
'{{#button}}' + '{{#button}}' +
'<button type="button" class="button-secondary list-entry-remove">' + '<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>' +
'{{/button}}' + '{{/button}}' +
'</div>' '</div>'

2
app/assets/javascripts/templateFolderForm.js
View File

@@ -127,7 +127,7 @@
}); });
if (opts.hasOwnProperty('nonvisualText')) { if (opts.hasOwnProperty('nonvisualText')) {
$btn.append(`<span class="visuallyhidden"> ${opts.nonvisualText}</span>`); $btn.append(`<span class="govuk-visually-hidden"> ${opts.nonvisualText}</span>`);
} }
return $btn; return $btn;

2
app/templates/components/file-upload.html
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"> <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 }}"> <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 %} {% if hint %}
<span class="form-hint"> <span class="form-hint">
{{ hint }} {{ hint }}

2
app/templates/components/list-entry.html
View File

@@ -28,7 +28,7 @@
{% for index in range(0, field.entries|length) %} {% for index in range(0, field.entries|length) %}
<div class="list-entry"> <div class="list-entry">
<label for="input-{{ field.name }}-{{ index }}" class="text-box-number-label"> <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> </label>
<input <input
type="text" type="text"

2
app/templates/components/select-input.html
View File

@@ -43,7 +43,7 @@
{% endif %} {% endif %}
<fieldset id="{{ field.id }}" {% if inline %}class="inline"{% 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 %}"> <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 }} {{ field.label.text|safe }}
{% if hide_legend %}</span>{% endif %} {% if hide_legend %}</span>{% endif %}
{% if hint %} {% if hint %}

6
app/templates/components/table.html
View File

@@ -2,7 +2,7 @@
{% macro mapping_table(caption='', field_headings=[], field_headings_visible=True, caption_visible=True, equal_length=False) -%} {% macro mapping_table(caption='', field_headings=[], field_headings_visible=True, caption_visible=True, equal_length=False) -%}
<table class="table table-font-xsmall"> <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 }}
</caption> </caption>
<thead class="table-field-headings{% if field_headings_visible %}-visible{% endif %}"> <thead class="table-field-headings{% if field_headings_visible %}-visible{% endif %}">
@@ -12,7 +12,7 @@
{% if field_headings_visible %} {% if field_headings_visible %}
{{ field_heading }} {{ field_heading }}
{% else %} {% else %}
<span class="visuallyhidden">{{ field_heading }}</span> <span class="govuk-visually-hidden">{{ field_heading }}</span>
{% endif %} {% endif %}
</th> </th>
{% endfor %} {% endfor %}
@@ -138,7 +138,7 @@
{%- endmacro %} {%- endmacro %}
{% macro hidden_field_heading(text) %} {% macro hidden_field_heading(text) %}
<span class="visuallyhidden">{{ text }}</span> <span class="govuk-visually-hidden">{{ text }}</span>
{%- endmacro %} {%- endmacro %}

4
app/templates/components/tick-cross.html
View File

@@ -2,12 +2,12 @@
<li> <li>
{% if yes %} {% if yes %}
<span class="tick-cross-tick"> <span class="tick-cross-tick">
<span class="visually-hidden">{{ truthy_hint }}</span> <span class="govuk-visually-hidden">{{ truthy_hint }}</span>
{{ label}} {{ label}}
</span> </span>
{% else %} {% else %}
<span class="tick-cross-cross"> <span class="tick-cross-cross">
<span class="visually-hidden">{{ falsey_hint }}</span> <span class="govuk-visually-hidden">{{ falsey_hint }}</span>
{{ label}} {{ label}}
</span> </span>
{% endif %} {% endif %}

4
app/templates/views/check/column-errors.html
View File

@@ -8,7 +8,7 @@
{% set file_contents_header_id = 'file-preview' %} {% set file_contents_header_id = 'file-preview' %}
{% macro skip_to_file_contents() %} {% 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> <a href="#{{ file_contents_header_id }}">Skip to file contents</a>
</p> </p>
{% endmacro %} {% endmacro %}
@@ -165,7 +165,7 @@
caption=original_file_name, caption=original_file_name,
caption_visible=False, caption_visible=False,
field_headings=[ 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 ] + column_headers
) %} ) %}
{% call index_field() %} {% call index_field() %}

4
app/templates/views/check/ok.html
View File

@@ -9,7 +9,7 @@
{% set file_contents_header_id = 'file-preview' %} {% set file_contents_header_id = 'file-preview' %}
{% macro skip_to_file_contents() %} {% 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> <a href="#{{ file_contents_header_id }}">Skip to file contents</a>
</p> </p>
{% endmacro %} {% endmacro %}
@@ -62,7 +62,7 @@
caption=original_file_name, caption=original_file_name,
caption_visible=False, caption_visible=False,
field_headings=[ 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 ] + recipients.column_headers
) %} ) %}
{% call index_field() %} {% call index_field() %}

4
app/templates/views/check/row-errors.html
View File

@@ -8,7 +8,7 @@
{% set file_contents_header_id = 'file-preview' %} {% set file_contents_header_id = 'file-preview' %}
{% macro skip_to_file_contents() %} {% 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> <a href="#{{ file_contents_header_id }}">Skip to file contents</a>
</p> </p>
{% endmacro %} {% endmacro %}
@@ -64,7 +64,7 @@
caption=original_file_name, caption=original_file_name,
caption_visible=False, caption_visible=False,
field_headings=[ 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 ] + recipients.column_headers
) %} ) %}
{% call index_field() %} {% call index_field() %}

2
app/templates/views/choose-account.html
View File

@@ -53,7 +53,7 @@
{% block maincolumn_content %} {% 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 Choose service
</h1> </h1>

2
app/templates/views/dashboard/dashboard.html
View File

@@ -14,7 +14,7 @@
<div class="dashboard"> <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 %} {% if current_user.has_permissions('manage_templates') and not current_service.all_templates %}
{% include 'views/dashboard/write-first-messages.html' %} {% include 'views/dashboard/write-first-messages.html' %}
{% endif %} {% endif %}

2
app/templates/views/register.html
View File

@@ -18,7 +18,7 @@ Create an account
<div class="extra-tracking"> <div class="extra-tracking">
{{ textbox(form.mobile_number, width='3-4', hint='We’ll send you a security code by text message') }} {{ textbox(form.mobile_number, width='3-4', hint='We’ll send you a security code by text message') }}
</div> </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') }} {{ textbox(form.password, hint="At least 8 characters", width='3-4', autocomplete='new-password') }}
{{form.auth_type}} {{form.auth_type}}
{{ page_footer("Continue") }} {{ page_footer("Continue") }}

10
app/templates/views/signedout.html
View File

@@ -119,12 +119,12 @@
<h2>Who’s using GOV.UK Notify</h2> <h2>Who’s using GOV.UK Notify</h2>
<div class="grid-row bottom-gutter"> <div class="grid-row bottom-gutter">
<div class="column-half"> <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> <div class="product-page-big-number">{{ counts.services|format_thousands }}</div>
services services
</div> </div>
<div class="column-half"> <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> <div class="product-page-big-number">{{ counts.organisations|format_thousands }}</div>
organisations organisations
</div> </div>
@@ -140,18 +140,18 @@
<h2>Pricing</h2> <h2>Pricing</h2>
<div class="grid-row bottom-gutter"> <div class="grid-row bottom-gutter">
<div class="column-half"> <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> <div class="product-page-big-number">Unlimited</div>
free emails free emails
</div> </div>
<div class="column-half"> <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> <div class="product-page-big-number">Up to 250,000</div>
free text messages a year,<br> free text messages a year,<br>
then 1.58 pence per message then 1.58 pence per message
</div> </div>
<div class="column-half"> <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> <div class="product-page-big-number">35 pence</div>
to print and post a one page letter to print and post a one page letter
</div> </div>

6
app/templates/views/templates/_move_to.html
View File

@@ -15,7 +15,7 @@
</div> </div>
<div id="move_to_new_folder_form"> <div id="move_to_new_folder_form">
<fieldset class="js-will-stick-at-bottom-when-scrolling"> <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') }} {{ 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') }} {{ page_footer('Add to new folder', button_name='operation', button_value='move-to-new-folder') }}
</fieldset> </fieldset>
@@ -23,7 +23,7 @@
{% endif %} {% endif %}
<div id="add_new_folder_form"> <div id="add_new_folder_form">
<fieldset class="js-will-stick-at-bottom-when-scrolling"> <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') }} {{ 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') }} {{ page_footer('Add new folder', button_name='operation', button_value='add-new-folder') }}
</fieldset> </fieldset>
@@ -36,7 +36,7 @@
{{ page_footer('Continue', button_name='operation', button_value='add-new-template') }} {{ page_footer('Continue', button_name='operation', button_value='add-new-template') }}
</div> </div>
</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 Nothing selected
</div> </div>
</div> </div>

2
tests/javascripts/collapsibleCheckboxes.test.js
View File

@@ -113,7 +113,7 @@ describe('Collapsible fieldset', () => {
const legend = helpers.element(fieldset.querySelector('legend')); const legend = helpers.element(fieldset.querySelector('legend'));
expect(legend.hasClass('visuallyhidden')).toBe(true); expect(legend.hasClass('govuk-visually-hidden')).toBe(true);
}); });