alphagov / government-frontend

Serves government pages on GOV.UK

Government Frontend

Government Frontend is a public-facing app to display the majority of documents on the /government part of GOV.UK, which are fetched from the Content Store. It is a replacement for the public-facing parts of the Whitehall application.

Schemas

Schema	Live example
Answer	View on GOV.UK
Case study	View on GOV.UK
Consultation	View on GOV.UK
Contacts	View on GOV.UK
Corporate information page	View on GOV.UK
Detailed guide	View on GOV.UK
Document collection	View on GOV.UK
Fatality notice	View on GOV.UK
Fields of operation	View on Gov.UK
Field of operation	View on GOV.UK
Help page	View on GOV.UK
HTML Publication	View on GOV.UK
Guide	View on GOV.UK
News Article	View on GOV.UK
Publication	View on GOV.UK
Specialist document	View on GOV.UK
Statistics announcement	View on GOV.UK
Statistical data set	View on GOV.UK
Speech	View on GOV.UK
Take part	View on GOV.UK
Topical event about page	View on GOV.UK
Travel advice	View on GOV.UK
Working group	View on GOV.UK
Worldwide corporate information page	View on GOV.UK
Worldwide office	View on GOV.UK
Worldwide organisation	View on GOV.UK

Technical documentation

This is a Ruby on Rails app, and should follow our Rails app conventions.

You can use the GOV.UK Docker environment or the local startup.sh script to run the app. Read the guidance on local frontend development to find out more about each approach, before you get started.

If you are using GOV.UK Docker, remember to combine it with the commands that follow. See the GOV.UK Docker usage instructions for examples.

Running the test suite

bundle exec rake

Components

Pages are rendered using components. Components can be specific to government-frontend or shared between applications.

Components specific to government-frontend are within the application and follow rules set out by the govuk_publishing_components gem. They are documented in the government-frontend component guide.

Further documentation

• Webchat

Licence

MIT License

government-frontend's Issues

Contents link fixed to the bottom of the page hides focussed element

When tabbing through links on a page, the contents bar can hide the currently focused link, making it hard to know what is selected. This is a significant accessibility problem for keyboard only users.

A similar problem was spotted by the Modelling and Services team when they visited DAC. They updated the design of the step by step bar to avoid the bug.

https://www.gov.uk/cma-cases/european-metal-recycling-metal-waste-recycling-merger-inquiry

cc @andysellick

Videos overlap contents sticky element

On this page the videos overlap the 'Contents' link that appears at the foot of the screen as a sticky element.

Rename 'format' in the generator to use 'document_type'

As seen in the README: https://github.com/alphagov/government-frontend#adding-a-new-format

Add <time> metadata to publication dates.

Please can we add the <time> HTML element to things like publication dates and last updated dates?

Documentation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time

This will allow users and machines to semanticly understand when a document was published/updated.

At the moment, the HTML is rendered as:

<div class="app-c-published-dates " lang="en">
    Published 21 April 2016
    <br>Last updated 21 July 2016
      — <a href="#history" class="app-c-published-dates__history-link govuk-link">see all updates</a>
</div>

Under this proposal, it would be:

<div class="app-c-published-dates " lang="en">
    Published <time datetime="2016-04-21">21 April 2016</time>
    <br>Last updated <time datetime="2016-07-21">21 July 2016</time>
      — <a href="#history" class="app-c-published-dates__history-link govuk-link">see all updates</a>
</div>

I think the relevant change needs to be made at:

government-frontend/app/views/components/_published-dates.html.erb

Line 12 in 79e5c4d

Published <%= published %>

The metadata element just needs an ISO8601 timestamp passed to it - of any precision.

As per the comment at co-cddo/open-standards#75 (comment)

Viewing "get-involved" page locally

What

While working on this PR I faced an issue where I was unable to use -app-live to see the get involved page render locally.

Workaround

To render page locally
content-store, search-api, static have to be run in parallel
government-frontend has to be started in -app mode not app-live mode as local data is needed

Recent local data is needed for content-store and search-api - this data has to be pulled from AWS so its gets recent snapshot - eg:
gds aws govuk-integration-poweruser ./bin/replicate-elasticsearch.sh
gds aws govuk-integration-poweruser ./bin/replicate-mongodb.sh content-store

I faced an issue where data from search-api was failing to download correctly from AWS.

The workaround is to delete the parent folder govuk-docker/replication/elasticsearch-6 (this download should now complete)
Once this is done each app has to be re made using make (as the existing containers will still reference old data)

---

Expectations (once issue resolved)

• government-frontend uses app-live starts all of the relevant apps in parallel
• app-live command works as expected and local data isn't a requirement for this particular page to render locally.

Dependabot can't resolve your Ruby dependency files

Dependabot can't resolve your Ruby dependencies.

As a result, Dependabot couldn't update any of your dependencies.

This could have been caused by a git reference having been deleted at the source, by an out-of-sync lockfile, or by a bug in Dependabot.

To help diagnose the issue, please try running bundle update --patch locally. If no errors occur, get in touch and we'll help dig into it.

You can mention @dependabot in the comments below to contact the Dependabot team.

Links in dark blue boxes are invisible

On at least two guidance pages, links in dark blue boxes are appearing as dark blue, and therefore invisible:

Two affected pages - both Defra services:

• https://www.gov.uk/guidance/register-your-waste-exemptions-environmental-permits
• https://www.gov.uk/guidance/check-if-you-need-an-environmental-permit

From discussion with Dave House on #frontend in cross-gov Slack, it looks like an issue with this component: https://github.com/alphagov/government-frontend/blob/9695808a771e01318e7b80bed8a9478838c8c23e/app/assets/stylesheets/components/_important-metadata.scss

Organisation logo when link is organisation colour

When an organisation logo has a link around it, it is displayed using the department colours when focused and unfocused:

Example taken from the About page for DCMS

The expected behaviour in both cases is for the text to be black.

Campaign text does not meet contrast requirements

The campaign text does not meet contrast requirements.

It's currently 2.85:1, which is below the required 4.5:1

It also appears to be using a magic number rather than one of our standard colours.

Suggested colour: $secondary-text-colour

government-frontend/app/assets/stylesheets/components/_native-campaign.scss

Line 1 in 03eb0f8

$dark-grey: #999;

Update #000000 to #0B0C0C on "Published/last updated"

Reported by @JeremyHHY

Examples

Live page

https://www.gov.uk/government/publications/common-travel-area-guidance#history

Highlighted

Investigate using Chrome instead of PhantomJS for integration tests

https://robots.thoughtbot.com/headless-feature-specs-with-chrome

1. Chrome headless may be a better long term bet than PhantomJS
2. It may improve the speed of our tests

Thanks to @kevindew for the suggestion.

Styling query on 'Explore the topic'

I'd like to ask whether the styling on 'Explore the topic' is correct.

I think there may be two issues:

• The h3 'Explore the topic' is not bold.
• The links below it are bold when they shouldn't be.

Contents link flashes strangely

On a page with contents and short content, the contents link flashes in and out:
https://www.gov.uk/government/collections/hmrcs-annual-report-and-accounts

GdsApi::InvalidUrl

Seeing examples where an invalid URL will error badly

Example URL: http://gov.uk/maternity-allowance/overview]

We should do two things:

1. Make sure these errors show the correct 'oops' page

2. Ensure these multipart pages redirect the same way http://gov.uk/maternity-allowance/overview-not-valid would (see also #352)

Contents list multi line links not underlined correctly in Firefox

Firefox (latest version) doesn't underline some of the elements correctly in the focus state (not a big problem, just being thorough). Not a regression, currently happening on live.

Chrome (correct):

Firefox (um):

Firefox (live site):

Increasing the line height to 1.4em fixes this.

Proposal: Add native sharing to GOV.UK pages

As a user, I want an easy way to share information from GOV.UK with other people, without having to download a PDF or print off a document.

The Web Share API allows users to easily share a website. This means that a site doesn't need to have a dozen social media logos, app icons, and external links on a site.

Click the share button and the user's device prompts them to share the URL with the apps they have on their own device.

Native web share is supported on all major mobile browsers - the majority of users on the site.

Because it is powered by JavaScript, it can use progressive enhancement. If navigator.canShare() returns true then the share button can be displayed on screen.

There is already a print button at the bottom of most HTML pages.

The current crop of share buttons (see below) were implemented 7 years ago/

Department page crest has link colour

See https://www.gov.uk/government/organisations/department-for-education/about/recruitment for example

overzealous

.corporate-information-page .department-for-education-brand-colour a {
    color: #347ca9;
}

Translation Component needs to provide semantic information for screen reader users

It has been suggested that the translation component needs to provide additional information to screen readers in order to give context, e.g:

<section aria-label="translations">...</section>

This label would need to to take a string that can be localised to each different language version depending on the language of the page.

Notice Component uses heading element with no following content

The notice component accepts text with no description. When this happens, the text is rendered in a heading element. This is incorrect use of a heading element.

Leonie has suggested the following:

<section aria-label="Notice">
    <p>Statistics release cancelled</p>
</section>

Document lists at the bottom of a collection look like they are missing an item

The border at the bottom of the document list combined with the top border of the "Published" component creates a space that looks like a missing document.

https://www.gov.uk/government/collections/hmrcs-annual-report-and-accounts

Fixed 'contents' link can obscure links

@andysellick recently did some research with http://www.digitalaccessibilitycentre.org/ and found that their fixed navigation created a barrier for a 'dragon' user.

I noticed that this same issue can happen with the back to top contents link.

Here you can see me tabbed to a link:

Then after tabbing again you can see the link is obscured:

This means that assistive technologies that rely on being able to 'see' elements to click them will not work, as was seen with Andy's team research.

@andysellick if you have any more details please share 👍

Current navigation item not highlighted

RTL breaks metadata layout on small screens

On this Arabic news article and shortly on the same version in Hebrew the metadata layout gets broken at small screen sizes. See screenshots.

Contents list focus state has white lines in Firefox

Firefox (latest) does some more odd things on numbered items (only) when focussed. That white gap top and bottom seems to vary in width from item to item. Not a regression, already happening on live.

I think this is being caused by the line height on the spans being slightly different from that on the link - so the outer yellow border lifts away from the background colour on the focussed element. Try slowly decreasing the line height in the inspector to see it in action.

Statistics announcements duplicate release date information

Feels like there's some redundancy here:

See upcoming announcements (that are not cancelled):
https://www.gov.uk/government/statistics/announcements

In context:

Related stats announcements copy misleading

We use the statistics announcement document type to craft the link text, this suggests a link will show only national stats or official stats. The actual link shows all stats announcements by that organisation.

Both of the screens below point to the same URL:
https://www.gov.uk/government/statistics/announcements?departments%5B%5D=ministry-of-defence&topics%5B%5D=defence-and-armed-forces

Suggest: "Related statistics announcements" instead.

Fallback gracefully from an invalid multipage URL

When visiting
https://www.gov.uk/queens-awards-for-enterprise/overview%E2%EF%BF%BD%EF%BF%BD

The user receives 'bad request', we should fallback to https://www.gov.uk/queens-awards-for-enterprise

This expected behaviour can be seen when visiting https://www.gov.uk/queens-awards-for-enterprise/overview

Errbit: https://errbit.publishing.service.gov.uk/apps/546493f90da1150e4e001cfc/problems/59119e3f6578637390de1000

Sticky back to top/contents link causes footer to jump on transition

On pages such as this one when the page is scrolled near the bottom and the 'Contents' link switches between sticky and non-sticky states, this causes the content beneath the footer to 'jump' upwards.

(thanks to @fofr for the video)

The cause of this could be that when the Contents link is changed to sticky, it leaves a gap in the page so the rest of the content has to move up to fill it. This was an issue in the prototype of a sticky header (not implemented), the solution was to wrap the element in a fixed height container that wouldn't collapse.

Step-by-step navigation and govuk-sticky-element overlap at certain scroll position

Step-by-step navigation and govuk-sticky-element overlap at certain scroll position

Page example: https://www.gov.uk/guidance/export-licences-and-certificates-from-1-january-2021

Review policy on iFraming on GOV.UK

We used to allow iFraming of pages across GOV.UK with a few exceptions (for security reasons). From memory it was limited to start pages only.

I recently tried again and have found the majority of pages are now blocked - apparently as a result of moving to government frontend.

It sounds like this wasn't a formal policy change so much as an inadvertent change. As such, I'd like to propose allowing iFrames as we previously did, except where we have good reason not to.

Alternately we should reevaluate our iFrame policy and then make changes as needed.

---

My use case:
I've used it previously for my webchat prototype, and I'd like to explore using it for the content audit tool - both are cases where it's really helpful to have a gov.uk page within an existing page. There may be workarounds, but if we don't have a good reason to block it, I suggest allowing them.

Organisation logos on publication pages

Got the following query through support:

HTML publication pages have the logos at the top for all the government organisations involved in the content. For a page like this one: https://www.gov.uk/government/publications/conflict-stability-and-security-fund-cssf/conflict-stability-and-security-fund-an-overview The long vertical list is offputting - you have to scroll past several logos before viewing the content. Would it be possible to reconfigure how the logos are displayed - could they display horizontally when viewed on desktop?

Did a test, changing the following classes in the browser. It's worth mentioning that involves reordering the organisations and place the ones with a logo first - not to look messy.

.organisation-logos {
    width: auto; // overwrites the 25% that was previously set
}

.organisation-logo {
    display: inline-block;
    vertical-align: top;
    width: 25%;
    margin-bottom: 15px;
}

Before

After

Banner component can contain information before the heading, making it inaccessible to screenreaders

The way the banner component has been implemented means that if an aside is provided, the aside is above the banner heading in the DOM. This makes it highly likely that screen reader users will miss the aside content. All content needs to follow the heading.

Current:

Duplicate print this page button in guidance publications

We show two instances of the 'print this page' button which overlap at a certain scroll position.

Page example: https://www.gov.uk/government/publications/actions-for-schools-during-the-coronavirus-outbreak/guidance-for-full-opening-schools

Visual example

Improve webchat code tests

The webchat tests could be more comprehensive (discovered while removing the jQuery from webchat).

We don't test that the webchat has successfully been initialised. When the user clicks on the 'start webchat' button, the following code determines whether the webchat should open in a popup window, or redirect the current page to the webchat (the popup is the default action).

redirect === 'true' ? window.location.href = openUrl : window.open(openUrl, 'newwin', 'width=366,height=516')

We should be able to test this by using a jasmine spyOn the window object, but this doesn't appear to work (a limitation of jasmine or the uniqueness of the window object, perhaps). Instead, we could abstract the calls that do this into separate functions, something like this:

redirect === 'true' ? this.changeWindowHref(openUrl) : this.windowOpen(openUrl, 'newwin', 'width=366,height=516')

...

this.changeWindowHref = function (url) {
   window.location.href = url
}

this.windowOpen = function (url, name, options) {
  window.open(url, name, options)
}

...and then spying on these two new functions in the test. Spying automatically blocks the function from executing, so we'd test that the correct thing had happened (either redirecting or opening a popup) in the right context, but not actually do anything.

Unfortunately this won't work because the webchat code isn't structured as a module, so we can't do spyOn(module, 'changeWindowHref'). In order to write this test we would need to rewrite the webchat code as a structured module where this is possible.

Dependabot can't resolve your Ruby dependency files

Dependabot can't resolve your Ruby dependency files.

As a result, Dependabot couldn't update your dependencies.

The error Dependabot encountered was:

Bundler::VersionConflict with message: Bundler could not find compatible versions for gem "link_header":
  In Gemfile:
    gds-api-adapters (~> 55.0) was resolved to 55.0.1, which depends on
      link_header

Could not find gem 'link_header', which is required by gem 'gds-api-adapters (~> 55.0)', in any of the sources.

If you think the above is an error on Dependabot's side please don't hesitate to get in touch - we'll do whatever we can to fix it.

You can mention @dependabot in the comments below to contact the Dependabot team.

Document footer and metadata have inconsistent labels for the same data

#183 (comment)

Rescue from GdsApi::HTTPGone

There are rescue blocks for a bunch of the status codes that content store can return in content_items_controller.rb however there isn't one to handle a 410 response.

With the Publishing E2E Tests we've seen an issue occur which causes government frontend to 500:

• Content is unpublished, but hasn't reached content-store yet
• A user requests a piece of content
• Router sends user to government-frontend
• The content-store is updated with the unpublishing
• government-frontend accesses content-store and receives a 410 response
• government frontend doesn't know how to rescue a GdsApi::HTTPGone error, so raises a 500

I haven't been able to find any evidence of this happening in production environment.

Possible regression on detailed guides title context

We previously displayed the parent of the detailed guide in the title context. It looks like we partially built this here: https://github.com/alphagov/government-frontend/pull/134/files#diff-7b9336debb8e95427b6577b4d6a75d0eR29. def context isn't used anywhere.

See: http://webarchive.nationalarchives.gov.uk/20160519025235/https://www.gov.uk/guidance/salary-sacrifice-and-the-effects-on-paye

We added the breadcrumbs to the page, which alleviates the problem.

We should either put the context back or remove the context method.

Before

After

Contents list heading list items not underlined on focus in Firefox

Firefox (latest) doesn't underline heading list items properly when focussed.

Chrome:

Firefox:

Graphs and diagrams

What

Images and descriptive alt copy on civil-service-diversity-and-inclusion-dashboard page

Impact

Fail of WCAG 1.1.1, 1.4.10

Consider:

• SVGs
• Guidance
• Existing charts

Translation files aren't being updated with `regenerate` task

Running bundle exec rake translation:regenerate should only update the strings that have been modified.

There's a couple of problems:

• When adding translations we haven't re-run this task
• The task strips out the i18n property when it's run, it shouldn't

Suggested fix:

• Fix the i18n problem
• Cleanup locales
• Add test step that fails if bundle exec rake translation:regenerate leads to changes (like the build steps in content schemas)

This is what happens on master:
https://github.com/alphagov/government-frontend/compare/cleanup-locales

cc @gpeng @bevanloon @andrewgarner

Sticky contents/print component conflicts with "Help us improve"

Hi GOV.UK folks,

Not sure if this is still the right repo (my knowledge of the frontend architecture is a bit out of date) but I noticed this conflict on an HTML publication page when the "Help us improve" survey is expanded:

Fix wraith config and/or documentation

I found an issue using wraith over on service-manual-frontend, which was originally forked from this repo. It appears to be an issue with this repo as well, so I thought it was worth at least documenting.

The current Wraith documentation and configuration seems to suggest running wraith from within the VM (it references localhost in the config file, and the gem is installed via bundle) but if you try to do this the stylesheets and images do not load. This is because assets-origin.dev.gov.uk does not resolve from within the VM, but there are no errors outputted and it took a while to work out what was going on.

I've changed the documentation in service-manual-frontend to suggest installing and running wraith locally instead, and modified the config to use service-manual-frontend.dev.gov.uk rather than localhost. I'm not sure that this is the correct action, but it makes it useable for now.

I guess Wraith is no longer actively being used, otherwise someone else would have seen this by now, so the alternative would be to remove it and any references from the docs?

Update the govuk frontend toolkit to 4.8

The version of the GOV.UK frontend toolkit used by government frontend is 2.0.1.

The most recent release of the GOV.UK frontend toolkit is 4.8.

It would be good to update it, I'd like to make use of the px-to-em function in the toolkit's _helpers.scss.

cc. @fofr, @dsingleton.

Back to top component flashing

There's some flashing happening with the sticky "back to top" link on scroll on pages such as this one.

Screen.Recording.2021-11-22.at.10.24.50.mov

Some work was done recently to remove jQuery from sticky-element-container.js #2256

It might be that this bug was introduced as a result.

rescue NameError does not display proper error page

As seen in production from the following error:

https://errbit.publishing.service.gov.uk/apps/546493f90da1150e4e001cfc/problems/593e962a65786340e1f14500

We may be able to capture this error and render the normal oops page.

Re-enable translated dates

There is currently a problem with the way dates are displayed in foreign languages.

RTL text and formatting seems to have been partly addressed with the usage of the metadata component. Although we're now back to having mixed translations in sentences, and English sentences that read RTL which isn't great. See here: https://www.gov.uk/government/publications/face-coverings-when-to-wear-one-and-how-to-make-your-own.ar

Dates and metadata tags had previously stopped being translated on purpose. See here: 2017156

Since these keys had since been translated, platform health attempted to re-enable these translations, only to bump into more issues with the way RTL translations are rendered. Max has detailed some of the issues in this now closed PR #2327

The image below shoes some of the issues platform health came across.

Page titles are inconsistent based on format

Different formats add the document_type to the page title

https://github.com/alphagov/government-frontend/blob/master/app/views/content_items/case_study.html.erb#L2

vs

https://github.com/alphagov/government-frontend/blob/master/app/views/content_items/detailed_guide.html.erb#L2

For example a case study's title would look like

<title>Example case study - Case study - GOV.UK</title>

whereas a detailed guide currently looks like

<title>Example detailed guide</title>

These should be consistent.

Links to related specialist documents (filtered finders) don't indicate how the link is related

For example:

What does "Related Air Accidents Investigation Branch reports" mean.

Is it:

• accidents around the same time?
• accidents by the same type of aircraft?
• similar reports?

Clicking the link shows that we filtered based on report and aircraft type, but it wasn't clear.

Share links need [rel=noopener]

We link externally to Facebook and Twitter on pages like https://www.gov.uk/government/consultations/allowing-learner-drivers-to-have-driving-lessons-on-motorways

We're using [target=_blank] which has a vulnerability (https://mathiasbynens.github.io/rel-noopener/) we can add [rel=noopener] in these cases.