- Added new flag imagery for favicon and related images

- Removed preloaded fonts - legacy UK site stuff
- Added the ability to run pa11y scan with npm run pa11y-ci
This commit is contained in:
Jonathan Bobel
2023-09-20 13:52:54 -04:00
parent 1c657ff170
commit 54eb8df9f7
29 changed files with 949 additions and 674 deletions

View File

@@ -12,23 +12,21 @@
<link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/static/images/favicon.ico?de7abc5226925203ac10b0a4a94af949"
type="image/x-icon" />
<link rel="mask-icon" href="/static/images/govuk-mask-icon.svg?2afd125b1db96109388d4a0727312f3e" color="#0b0c0c">
<link rel="mask-icon" href="/static/images/usa-mask-icon.svg?2afd125b1db96109388d4a0727312f3e" color="#F0F0F0">
<link rel="apple-touch-icon" sizes="180x180"
href="/static/images/govuk-apple-touch-icon-180x180.png?a0f7e1b728a42016b247dc54ee40d055">
<link rel="apple-touch-icon" sizes="167x167"
href="/static/images/govuk-apple-touch-icon-167x167.png?f636cb7d471fc6239d2241d75cbdabcb">
<link rel="apple-touch-icon" sizes="152x152"
href="/static/images/govuk-apple-touch-icon-152x152.png?40846d46aa37232e2b35065769ce567c">
<link rel="apple-touch-icon" href="/static/images/govuk-apple-touch-icon.png?3c45daa1f1e716458e4da954b973002e">
href="/static/images/apple-touch-icon.png?a0f7e1b728a42016b247dc54ee40d055">
<link rel="icon" type="image/png" sizes="32x32" href="/static/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/images/favicon-16x16.png">
<link rel="manifest" href="/static/images/site.webmanifest">
<link rel="stylesheet" media="screen" href="/static/stylesheets/main.css?d077f86473501ab244de0b30600536ee" />
<link rel="stylesheet" media="print" href="/static/stylesheets/print.css?28010888ca5719dc83d7c2c80f6ed2b2" />
<meta property="og:image" content="/static/images/govuk-opengraph-image.png">
<meta property="og:image" content="/static/images/usa-opengraph-image.png">
</head>
<body class="usa-template__body">
<a href="#main-content" class="govuk-skip-link">Skip to main content</a>
<a href="#main-content" class="usa-skip-link">Skip to main content</a>
<header class="usa-header " role="banner" data-module="header">
<div class="usa-header__container usa-width-container">

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 273 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 367 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

View File

@@ -0,0 +1 @@
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

View File

@@ -0,0 +1,4 @@
<svg width="680" height="680" viewBox="0 0 680 680" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M672 209L340 209V159L672 159V209ZM672 292H340V242H672V292ZM672 375H340V325H672V375ZM672 408V458H8V408H672ZM672 491V541H8V491H672Z" fill="#D83933"/>
<path d="M8 159H299V375H8V159Z" fill="#3C3B6E"/>
</svg>

After

Width:  |  Height:  |  Size: 353 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

View File

@@ -3,23 +3,15 @@
{% block headIcons %}
<link rel="shortcut icon" sizes="16x16 32x32 48x48" href="{{ asset_url('images/favicon.ico') }}" type="image/x-icon" />
<link rel="mask-icon" href="{{ asset_url('images/govuk-mask-icon.svg') }}" color="{{ themeColor | default('#0b0c0c') }}"> {# Hardcoded value of $govuk-black #}
<link rel="apple-touch-icon" sizes="180x180" href="{{ asset_url('images/govuk-apple-touch-icon-180x180.png') }}">
<link rel="apple-touch-icon" sizes="167x167" href="{{ asset_url('images/govuk-apple-touch-icon-167x167.png') }}">
<link rel="apple-touch-icon" sizes="152x152" href="{{ asset_url('images/govuk-apple-touch-icon-152x152.png') }}">
<link rel="apple-touch-icon" href="{{ asset_url('images/govuk-apple-touch-icon.png') }}">
<link rel="mask-icon" href="{{ asset_url('images/usa-mask-icon.svg') }}" color="{{ themeColor | default('#F0F0F0') }}">
<link rel="apple-touch-icon" sizes="180x180" href="{{ asset_url('images/apple-touch-icon.png') }}">
<link rel="apple-touch-icon" href="{{ asset_url('images/apple-touch-icon.png') }}">
{% endblock %}
{% block head %}
{%- for font in font_paths %}
<link rel="preload" href="{{ asset_url(font, with_querystring_hash=False) }}" as="font" type="font/woff2" crossorigin>
{%- endfor %}
<link rel="stylesheet" media="screen" href="{{ asset_url('css/styles.css') }}" />
{% block extra_stylesheets %}
{% endblock %}
<style nonce="{{ csp_nonce() }}">
.govuk-header__container { border-color: {{header_colour}} }
</style>
{% if g.hide_from_search_engines %}
<meta name="robots" content="noindex" />
{% endif %}
@@ -28,6 +20,8 @@
<meta name="format-detection" content="telephone=no">
{% endblock %}
{% block meta %}
<meta property="og:site_name" content="Notify.gov">
<meta property="og:image" content="{{ asset_url('images/usa-opengraph-image.png') }}">
{% endblock %}
<!-- <script type="text/javascript" src="{{ asset_url('js/gtm_head.js') }}"></script> -->
{% endblock %}

View File

@@ -20,17 +20,17 @@
{% block headIcons %}
<link rel="shortcut icon" sizes="16x16 32x32 48x48" href="{{ assetPath | default('/assets') }}/images/favicon.ico" type="image/x-icon" />
<link rel="mask-icon" href="{{ assetPath | default('/assets') }}/images/govuk-mask-icon.svg" color="{{ themeColor | default('#0b0c0c') }}"> {# Hardcoded value of $govuk-black #}
<link rel="apple-touch-icon" sizes="180x180" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="167x167" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="152x152" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon.png">
<link rel="mask-icon" href="{{ assetPath | default('/assets') }}/images/usa-mask-icon.svg" color="{{ themeColor | default('#F0F0F0') }}">
<link rel="apple-touch-icon" sizes="180x180" href="{{ assetPath | default('/assets') }}/images/apple-touch-icon.png">
<link rel="apple-touch-icon" href="{{ assetPath | default('/assets') }}/images/apple-touch-icon.png">
{% endblock %}
{% block head %}{% endblock %}
{# The default og:image is added below head so that scrapers see any custom metatags first, and this is just a fallback #}
{# image url needs to be absolute e.g. http://wwww.domain.com/.../govuk-opengraph-image.png #}
<!-- <meta property="og:image" content="{{ assetUrl | default('/assets') }}/images/govuk-opengraph-image.png"> -->
{% block meta %}
<meta property="og:site_name" content="Notify.gov">
<meta property="og:image" content="{{ asset_url('images/usa-opengraph-image.png') }}">
{% endblock %}
</head>
<body class="usa-template__body {{ bodyClasses }}">
<script nonce="{{ csp_nonce() }}">document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>

View File

@@ -12,14 +12,9 @@
<link rel="shortcut icon" sizes="16x16 32x32 48x48"
href="/static_503/images/favicon.ico?de7abc5226925203ac10b0a4a94af949" type="image/x-icon" />
<link rel="mask-icon" href="/static_503/images/govuk-mask-icon.svg?2afd125b1db96109388d4a0727312f3e" color="#0b0c0c">
<link rel="mask-icon" href="/static_503/images/usa-mask-icon.svg?2afd125b1db96109388d4a0727312f3e" color="#0b0c0c">
<link rel="apple-touch-icon" sizes="180x180"
href="/static_503/images/govuk-apple-touch-icon-180x180.png?a0f7e1b728a42016b247dc54ee40d055">
<link rel="apple-touch-icon" sizes="167x167"
href="/static_503/images/govuk-apple-touch-icon-167x167.png?f636cb7d471fc6239d2241d75cbdabcb">
<link rel="apple-touch-icon" sizes="152x152"
href="/static_503/images/govuk-apple-touch-icon-152x152.png?40846d46aa37232e2b35065769ce567c">
<link rel="apple-touch-icon" href="/static_503/images/govuk-apple-touch-icon.png?3c45daa1f1e716458e4da954b973002e">
href="/static_503/images/apple-touch-icon.png?a0f7e1b728a42016b247dc54ee40d055">
<link rel="stylesheet" media="screen" href="/static_503/stylesheets/main.css?d077f86473501ab244de0b30600536ee" />
<link rel="stylesheet" media="print" href="/static_503/stylesheets/print.css?28010888ca5719dc83d7c2c80f6ed2b2" />

1531
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -11,7 +11,8 @@
"test-watch": "jest --watch --config tests/javascripts/jest.config.js tests/javascripts",
"build": "gulp",
"watch": "gulp watch",
"audit": "better-npm-audit audit --production --level low"
"audit": "better-npm-audit audit --production --level low",
"pa11y-ci": "pa11y-ci"
},
"repository": {
"type": "git",

View File

@@ -13,8 +13,7 @@ def test_no_redirect_notify_to_beta_non_production(monkeypatch, client_request):
assert current_app.config["NOTIFY_ENVIRONMENT"] == "development"
client_request.get_response_from_url(
"https://notify.gov/using-notify/get-started",
_expected_status=200
"https://notify.gov/using-notify/get-started", _expected_status=200
)
@@ -23,8 +22,7 @@ def test_redirect_notify_to_beta(monkeypatch, client_request):
assert current_app.config["NOTIFY_ENVIRONMENT"] == "production"
client_request.get_response_from_url(
"https://notify.gov/using-notify/get-started",
_expected_status=302
"https://notify.gov/using-notify/get-started", _expected_status=302
)
@@ -33,6 +31,5 @@ def test_no_redirect_beta_notify_to_beta(monkeypatch, client_request):
assert current_app.config["NOTIFY_ENVIRONMENT"] == "production"
client_request.get_response_from_url(
"https://beta.notify.gov/using-notify/get-started",
_expected_status=200
"https://beta.notify.gov/using-notify/get-started", _expected_status=200
)

View File

@@ -294,26 +294,6 @@ def test_email_branding_preview(
assert mock_get_email_branding.called is email_branding_retrieved
def test_font_preload(
client_request,
mock_get_service_and_organization_counts,
):
client_request.logout()
page = client_request.get("main.index", _test_page_title=False)
preload_tags = page.select(
'link[rel=preload][as=font][type="font/woff2"][crossorigin]'
)
assert (
len(preload_tags) == 4
), "Run `npm run build` to copy fonts into app/static/fonts/"
for element in preload_tags:
assert element["href"].startswith("https://static.example.com/fonts/")
assert element["href"].endswith(".woff2")
@pytest.mark.parametrize("current_date, expected_rate", (("2022-05-01", "1.72"),))
@pytest.mark.skip(reason="Currently hidden for TTS")
def test_sms_price(