Allow removal of Content Licence information in the GOV.UK footer component

[ch-ncolley]

I have coded this up but I understand there may be a reason why this proposal is not accepted or wanted so no hard feelings if it is not accepted 😄

At Companies House (https://find-and-update.company-information.service.gov.uk/) we do not use the OGL Licence:

The Companies House public register is not covered by the OGL. This information is made public under the Companies Act 2006

If we want to use the govukFooter Nunjucks macro we have to manually hide the OGL Licence by doing something like:

.ch-footer {
    .govuk-footer__licence-logo,
    .govuk-footer__licence-description {
        display: none;
    }
    .govuk-footer__meta-custom {
        margin-bottom: 0;
    }
}

or by maintaining our own Nunjucks macro, where we then dont benefit from any markup changes for example when the crown logo was added recently.

This pull request introduces:

• a way to set contentLicence to false which then hides it.
• additional CSS to remove the space below any meta links or custom meta information if there's no content licence information.
• fixtures to visually check the above and to test the hiding behaviour
• updates to the documentation to make note this parameter now accepts a boolean false value

Screenshots

Companies House example

{{ govukFooter({
  meta: {
    items: [
      {
        href: "http://resources.companieshouse.gov.uk/serviceInformation.shtml",
        text: "Policies"
      },
      {
        href: "/help/cookies",
        text: "Cookies"
      },
      {
        href: "https://www.gov.uk/government/organisations/companies-house#org-contacts",
        text: "Contact us",
        attributes: {
          target: "_blank"
        }
      },
      {
        href: "/help/accessibility-statement",
        text: "Accessibility statement"
      },
      {
        href: "https://developer.companieshouse.gov.uk/api/docs/",
        text: "Developers"
      }
    ],
    html: 'Built by <a class="govuk-footer__link" href="https://www.gov.uk/government/organisations/companies-house">Companies House</a>'
  },
  contentLicence: false
}) }}

GOV.UK Design System guidance

Before	After

[romaricpascal]

Thanks for proposing this @NickColley. The technical changes look good and the review app seemed OK to me 🙌🏻

@hazalarpalikli @mia-allers-gds @CharlotteDowns any chance one of you could have a look at the Footer page of the preview app to confirm things look OK design-wise for the examples without licence, please?

[romaricpascal]

Oh, we'll need a CHANGELOG entry for this new feature as well. Are you find drafting it @NickColley or would you prefer we add it before merging?

[NickColley]

@romaricpascal I'll make sure to add the CHANGELOG entry good spot 👍🏻

[ch-ncolley]

@romaricpascal added first draft of the CHANGELOG entry and commited your suggestion ready for final review.

[querkmachine]

Minor concern that, if the footer has the licence hidden and no other information added, you end up with an empty <div>. It's needed to keep the copyright notice aligned properly, but probably a bit weird for screen reader navigation.

[ch-ncolley]

In theory we could do some logic around that wrapper div and check if any of the expected children elements exist, but I think if we do that we'll need to write more CSS to anticipate only one item so it starts getting more complicated.

In practice at Companies House at least we do put custom information in there to direct users to our policies given that we're removing the content licence so it is never empty.

but probably a bit weird for screen reader navigation.

In terms of accessibility, since the div is presentational it wont enter the accessibility tree so I think this is more a bit odd from HTML point of view but I dont see how it would impact end users unless I have missed something.

Let me know what you think

[querkmachine]

Oh huh. I was thinking based on this snippet of MDN:

However, unlike elements with role presentation, generic elements are exposed in accessibility APIs so that assistive technologies can gather certain properties such as layout and bounds.

Quickly trying it in VoiceOver, the empty <div> is skipped over, though. Might be worth a quick double check, at least, but it might be alright to keep around after all.

[ch-ncolley]

@querkmachine things are always changing so I could be wrong but I thought for this sort of thing it goes HTML -> Assistive Tree -> Assistive Technology

My understanding that if the node is ignored it'll never get passed on, since it's just not in the tree, CSS does play a role but my assumption was only on nodes that are in the tree.

Always good to check though. I know there's definitely been some really weird stuff come up with VoiceOver in the past that's CSS based etc.

[querkmachine]

@ch-ncolley I've given it a run through with the latest versions of JAWS and NVDA, and VoiceOver on iOS, and nothing disagreeable happened. All of them skipped the empty element. 🎉

[querkmachine]

This looks good to me! Still not had any feedback from design folks so I'll give them another poke.

[ch-ncolley]

@querkmachine really appreciate you doing that testing for me! 💌

[querkmachine]

@ch-ncolley Hey, sorry, we've just fixed an issue with the review app deployments failing. Are you able to rebase this PR so that the review app preview works again? Thanks. 👍