Active items in gov.uk guides are outdented vs the other parts. This as the effect of making the parts jump around if you click between the parts.

If an option select is set to be open (expanded) when the page loads then:

• the button which controls it’s opening/closing has its aria-expanded attribute set to false, even though it is open
• the code which sets the height of the options container doesn’t get executed, so users may not realise that the options are scrollable

Both issues can be seen here (on the Competition and Markets Authority cases page):

Adding this to track progress, as per the ops manual instructions:

• Get normal branches building on new CI #893
• Add webhook and required status check for new CI
• Remove webhook and required status check for old CI
• Modify Jenkinsfile to work with schema builds #897

Once modified Jenkinsfile is in deployed-to-production:

• Configure puppet to allow deployed-to-production branch to be built
  alphagov/govuk-puppet#5490

Once Puppet has been deployed and converged with those changes:

• Add static as a dependent application in the govuk-content-schemas Jenkinsfile
  alphagov/govuk-content-schemas#520
• Remove application from downstream builds on old CI
• Remove static's required status check in govuk-content-schemas repo
• Remove jenkins.sh and jenkins-schema.sh from this repo
  #903

The active link colour in the government navigation feels hard to read.

Despite feeling hard to read the contrast ratio passes our accessibility tests, with a ratio of 5.8. The blue is significantly lighter than govuk-blue (#1d8feb vs #005ea5) presumably to meet contrast ratios.
http://leaverou.github.io/contrast-ratio/#%230b0c0c-on-%231d8feb

#1d8feb
#005ea5

"Is there anything wrong with this page?" form at the bottom of every page does not indicate if it's open or closed to uses of assistive tech.

This means to them nothing appears which would prevent these users from sending feedback if they did not discover the content below.

We should reimplement this pattern with a pattern similar to https://govuk-elements.herokuapp.com/typography/#typography-hidden-text

I imagine there's more issues similar including #1205 but I've not had time to do a full audit.

Hey all,

Just happened to notice that Webkit moans about _wrapper.html.erb#L7.

Specifically, in

 <meta name="viewport" content="width=device-width; initial-scale=1.0">

I think the content attribute should read "width=device-width, initial-scale=1.0" with a comma, rather than a semicolon: q.v. MDN and Apple's reference.

Only seen on my personal machine, not possible to reproduce on my work machine.

www.google.com/ads/ga-audiences?v=1&aip=1&t=sr&_r=4&tid=UA-26179049-1&cid=1785543590.1491736403&jid=1961367961&_v=j50&z=820657569:1 GET https://www.google.com/ads/ga-audiences?v=1&aip=1&t=sr&_r=4&tid=UA-26179049-1&cid=1785543590.1491736403&jid=1961367961&_v=j50&z=820657569 net::ERR_BLOCKED_BY_CLIENT

Seems to be from Google Analytics, this could potentially be a privacy issue if Google Analytics is exposing our users to ad related tracking so worth investigating.

I've included the HAR file:
www.gov.uk.har.zip

Publishing Frontend Support: https://trello.com/c/KIe35s0G/36-google-analytics-ads-endpoint-being-called-possible-privacy-issue

https://www.gov.uk/book-driving-test

The bottom is cut off, and I'm not sure the alignment is correct.

We had a bug which meant that the global_bar_seen cookie was sometimes set more than once.
This bug has now been fixed (#2026), but some users were left with these duplicate cookies and continued to see the issue.

To address this, we added logic to manually check for duplicate cookies and remove them if present: #2034. Ideally we want to clean up this code when it's no longer needed. The dodgy cookie will expire after 84 days, and the last day it could be present is when the fix was merged - 5th Feb 2020.

We should therefore revert the code added here on 4 May 2020.

Low contrast text at the bottom

The rendering of vcards has changed Government Frontend from the previous behaviour in Whitehall. The following illustrate the new visual treatment applied to News Articles now that they are rendered by Government Frontend.

I discussed this with @fofr who suggested raising an issue to investigate further.

Example URLs

• https://www.gov.uk/government/news/new-streamlined-jobcentre-plus-network-with-more-support-for-jobseekers
• https://www.gov.uk/government/news/setting-standards-for-new-gcses-in-2017
• https://www.gov.uk/government/news/lord-mcnallys-response-to-the-youth-justice-reform-announcement

Example screenshots

Discovered during the Emergency Publishing Drill:
https://trello.com/c/iniJbqCt/321-emergency-publishing-drill-monday-7-august
https://github.com/alphagov/static/blob/master/lib/tasks/emergency_banner.rake

The link text "Norwegian journalist and statesman, dies at 71" rendered as "Norwegian journalist and statesman".

Rake arguments need to escape commas as commas are used to split arguments:
ruby/rake#21

When typing these fields into Jenkins it's not obvious that commas must be escaped.

Jeremy wrote an interesting post about testing navigator.doNotTrack client-side before including the Google Analytics snippet.

That seems very sensible (I don't know much about the spec) and it seems like something that we of all people should be doing.

I would be interested in your thoughts.

We stumbled on this after #1117 and #1119 and had to implement fixes we later reverted in a follow up deploy like #1120.

If we modify both HTML and styles for a component in a deployment a quirk of caching means that the styling and markup can get out of sync. We saw this on govenrment-frontend.

It happens because:

• an app caches calls to components, creating a cached version of the template
• when a new static deploy is released we update the styles and the templates
• when the page cache expires, a new page is returned with the updated static styling
• BUT: the component may still be cached, so the new page ends up with new styling and old HTML
• when that cache expires, eventually a new page with new component template and new styles is returned

For a PR like #1119, if we hadn't caught this then for a period of ~15 minutes any users hitting a page that was cached with new styles and old component templates wouldn't have correctly styled titles.

Screenshot of the problem with pagination:

The layout for 'Is there something wrong with this page' is slightly off - it's indented too far.

Screenshot:

Publishing Frontend Support: https://trello.com/c/VVGQ6axB/61-layout-for-feedback-slightly-broken

Government navigation component needs updating. It does not have a prefix and the examples in the component guide are incorrect. See below:

https://govuk-static.herokuapp.com/component-guide/government_navigation

The component needs to be shown in the correct context in the guide.

As seen on https://www.gov.uk/foo:

Uncaught ReferenceError: jQuery is not defined
    at error-page-2c690c9968d9d696c8cf964f733dbcaf09d7a6b3945764ab93c28e878a4d18ad.js:1
(anonymous) @ error-page-2c690c9968d9d696c8cf964f733dbcaf09d7a6b3945764ab93c28e878a4d18ad.js:1

On https://www.preview.alphagov.co.uk/deposit-foreign-marriage, the background image of the two information sections towards the bottom of the page is set to repeat, which looks broken.

Chrome 28 and Safari 6.0.5

(Assuming this is an issue with static, apologies if not)

The breadcrumbs are inside the main element on the newer layouts but the older layouts have them outside the main element, this could be an accessibility issue since the skip link skips to the main to avoid a bunch of navigation.

cc @NickColley (written by @NickColley 🐒 )

• https://www.gov.uk/government/collections/statutory-guidance-schools#administration-and-finance
• https://www.gov.uk/become-lorry-bus-driver/applying-for-a-bus-or-lorry-provisional-entitlement

Publishing Frontend Support: https://trello.com/c/KdTJIBdA/37-a11y-breadcrumbs-inconsistently-in-the-main-element

I recently tried to use the "Is there anything wrong with this page?" to report an issue. I pressed return / enter to get a new line so I could structure my feedback better. Sadly, this submitted the form instead.

What's really sad, is that even if you realise what's happened, it won't let you submit the form again. A user attempting a new line has to work out that they need to refresh the page.

We may not want to encourage longer submissions, but I feel like we should be more careful about helping prevent accidental submissions which are then hard to correct.

Skiplinks are now visible in the header when using Chrome and Firefox for me, but not Safari.

I'm not sure why this issue isn't showing up on preview, only on dev (precompilation?). Reproduced on two machines here across several apps.

I've not noticed such an issue on a retina screen but for my laptop with a 1x density screen they're blurry.

https://govuk-component-guide.herokuapp.com/components/organisation_logo/preview

Currently:

Inspecting the images, the set background-size is a pixel off when we set them, so nudging them in the right direction gets us this:

Seems like a good improvement, we'd have to ensure when we do this that the hi-dpi versions are not negatively affected.

A deprecation warning appears in the javascript console when viewing pages on GOV.UK

Deprecation warning: Custom radio buttons and checkboxes (released in GOV.UK Elements 3.0.0) no longer require this JavaScript.

Clicking the search button has no effect. Tested in Device mode in Google Chrome on Desktop.

Publishing Frontend Support: https://trello.com/b/gUJGoX6b/support-gov-uk-template-consolidation

The spelling has been fixed to be ‘accordion’. These are currently used in _publisher.scss and _core.scss, and will need to be updated when toolkit is bumped.

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

• static/app/assets/javascripts/surveys.js

  Line 12 in caac6ba

  ' <p><a href="javascript:void()" id="take-survey" target="_blank">Take the 3 minute survey</a> This will open a short survey on another website</p>' +

This has been fixed in government-frontend with the following PR alphagov/government-frontend#217

Delete file:
google991dec8b62e37cfb.html

The icon on the get started button is cut off on the mobile breakpoint.

Although there is a specific background-position for this breakpoint, it is is set to 110%.
I would suggest changing to something more like 104% for it to be centred inside the right hand padding.

It's not clear what the files in this directory are for.

• The typography mixins appear to duplicate the frontend toolkit ones here: https://github.com/alphagov/govuk_frontend_toolkit/blob/master/stylesheets/_typography.scss
• The print mixin is looks like something that should be provided by the toolkit
• Font stacks looks like a duplication of https://github.com/alphagov/govuk_frontend_toolkit/blob/master/stylesheets/_font_stack.scss

https://github.com/alphagov/static/blob/9e8795b262c948a65b798029864cbe04f193262a/app/assets/javascripts/modules/sticky-element-container.js

Current browser usage is too low since Chrome has only just shipped it (http://caniuse.com/#feat=css-sticky), however once people switch over it might be enough users to consider this an enhancement we shouldnt polyfill and only use as an enhancement.

https://www.gov.uk/manage-your-tax-credits

Uncaught SyntaxError: Unexpected token o in JSON at position 1

{
  request: "getUri"
}

{
  request: "postUri",
  uri: "https://assets.publishing.service.gov.uk/static/webchat-iframe-2d543041ba9841c24cb490ff04b8c250cbb7bd7f2178bcf96c11e18d185352ce.html"
}

Issue is that the response is already an object so parsing twice throws the error.

In backend response: 'ID history already defined' at line 98 col 48 (code 513). Add ?skip_slimmer=1 to the url to show the raw backend request. 93: <div class="component-guide-preview"> 94: <div class="govuk-document-footer"> 95: <h2 class="visuallyhidden"> 96: Document information 97: </h2> -----v 98: <div class="history-information" id="history"> 99: </div> 100: <div class="related-information"> 101: <p>From: <span class="from"> 102: <span class="definition"> 103: <a href='/government/organisations/ministry-of-defence'>Ministry of Defence</a>

Not sure how we can disable this otherwise helpful error, because we want multiple components to render with the same IDs...

govuk_frontend_toolkit 4.15.0 will include a shim for fixing keyboard events on links with a role of button. In the frontend meeting it was decided that we’d implement this in static initially to test, and then decide whether to migrate it over to govuk_template. @cfq also requested that this usage was recorded in analytics too so that we can see how many people this affects.

Both the links in the global bar look strange when focused.

The 'Register to vote' link takes up the entire width of the parent element:

A quick fix for this could be to remove display: block from the link, and set the following span to be display: block.

and the 'Hide message' link has too much space at the bottom:

This can be fixed by changing the element's style from bottom: 0 to top: 0.

Hi there,

is there any compelling reason why this of all projects should not have a readme file?

Best Regards
Michael

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 "metaclass":
  In Gemfile:
    mocha (~> 1.7.0) was resolved to 1.7.0, which depends on
      metaclass (~> 0.0.1)

Could not find gem 'metaclass (~> 0.0.1)', which is required by gem 'mocha (~> 1.7.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.

Issue found while visiting the Scottish Government's Device Lab

Example page: https://www.gov.uk/benefit-cap/benefits-included-in-the-cap

Potentially can be solved short term by moving the pagination styles below the content-block styles in source order, or moving the pagination in the application out of the scope of content-block.

Ideally the position of a component's markup should not influence how it is rendered, however since we have generated content (govspeak) we might not be able to avoid the cascade entirely unless we change the rendering of govspeak to include strict classes to bind to...

WCAG2 1.4.4 says that to hit double-AA text must be able to zoom to 200% of the default size without breaking the site layout. Currently the search box is fixed to 35px which makes the overlaid label unreadable when resized:

We should allow the input to grow in size to contain the text, best removing the height completely.

(Sorry @robinwhittleton for copying most of your copy from alphagov/govuk_template#232.)

https://github.com/alphagov/government-service-design-manual/blob/master/_includes/stylesheets/whitehall/_font-stacks.scss defines the font-family globally, however for the press releasees in CJK, the fonts look very weird on Mac: (Note the 兰 and 独 characters are particularly thin and inconsistent with others)

(https://www.gov.uk/government/news/scottish-independence-referendum-statement-by-the-prime-minister.zh)

(https://www.gov.uk/government/news/scottish-independence-referendum-statement-by-the-prime-minister.ja)

The suggested way is to decorate the html with with lang="zh" and lang="ja", and add different language-specific css styles for sans fonts, such as:

[lang="zh"] {
  font-family: 'Lantinghei TC'
}

For a portable full list of sans-serif font-family suitable for CJK, see also https://github.com/ethantw/Han/blob/master/sass/han/ff/_heiti.scss

I was thinking we could add a development only asset that flags up obvious accessibility issues and also a security issue.

Similar to https://ffoodd.github.io/a11y.css/

For example with #871 we could flag this up too.

This would mean if people use markup in a way we know will cause issues we could flag it to them when they're in development and testing their changes.

We could also run automated tests for this but I thought this might be a low-fi way that is easy to implement.

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.

Should be inheriting default font.

In the document footer, we just wrap the dates in a <span> but the timestamps for updates in a <time>.

This is more of a "Should we do this?" than a "We should do this" since we would also need to start passing in timestamps to the hash and that's going to be a bigger piece of work for App owners.

When you have a campaign banner in static and a campaign notification in frontend added at the same time, the result makes it look like you're being told the same thing twice:

We have some uses of jQuery UI sprinkled throughout static:

A copy of jQuery UI in the vendor/assets directory:
https://github.com/alphagov/static/tree/master/vendor/assets/stylesheets/admin
It was added 4 years ago. Is anything using it?

A reference in the youtube video link enhancer:

It appears to be used in the jQuery tabs plugin for keyboard input:
https://github.com/alphagov/static/blob/9e8795b262c948a65b798029864cbe04f193262a/app/assets/javascripts/jquery.tabs.js

We attempt to precompile a version in production that doesn't exist:

Currently building a component for the 'is this page useful?' form to go at the footer of GOV.UK, based on what is already on the Service Manual. This component includes a button. It would be useful to be able to use the existing button component for this, but can't, due to the way static/slimmer works together.

Specifically, it's possible to include a component within a component in the browser, but errors like this occur in tests:

Error:
FeedbackTestCase#test_asks_the_user_if_there_is_anything_wrong_with_the_page_without_javascript_enabled:
ActionView::Template::Error: Missing partial govuk_component/_button with {:locale=>[:en], :formats=>[:html, :text, :js, :css, :ics, :csv, :vcf, :png, :jpeg, :gif, :bmp, :tiff, :svg, :mpeg, :xml, :rss, :atom, :yaml, :multipart_form, :url_encoded_form, :json, :pdf, :zip, :gzip], :variants=>[], :handlers=>[:raw, :erb, :html, :builder, :ruby]}. Searched in:

• "/var/govuk/static/app/views"
• "/usr/lib/rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/govuk_publishing_components-2.0.0/app/views"

Reusing components like this would mean components depend upon each other (reducing isolation) but it would also massively help reduce duplicate CSS/JS/etc.

Long term these components may live in the components gem where this problem could be avoided, but issues of duplicate CSS/JS across apps have yet to be addressed.

Changes in this GOV.UK Template PR will mean a minor fix is needed in static.

That PR moves the focus outline inside of the input, but this leaves a white border to the right of the search input. This is caused by the search in put and button being separated and their container having a white background.

Rather oddly this white border is 1px in Chrome, but 2px in Safari.

Don't know what the fix would be, as the white background is needed to make the placeholder work.

The button also has a 1px left border of #222 ideally this would be changed to our standard black.

Screenshot of the issue:

In the image below, the left is a rendering from frontend, the middle is a component in the government-frontend (with the long section removed), the third is from elements, and the fourth from the component guide.

cc @dsingleton @gemmaleigh

In context

By themselves

Issue found while visiting the Scottish Government's Device Lab

http://govuk-component-guide.herokuapp.com/components/govspeak/fixtures/with_youtube_embed/preview

Here the touch areas are nice and big so it's a great thing but the focus style obstructs the current volume.

While deploying to paas I get the following error as Garden attempts to use the ruby_buildpack v1.6.19 to compile Static:

sh: 1: Syntax error: EOF in backquote substitution
! undefined method[]' for nil:NilClass`
./Gemfile:45:in ruby_requirement': undefined method []' for nil:NilClass (NoMethodError)

Logged with paas team