Update design of metadata component

[owenatgov]

What

Update's the design of the metadata block component along with some general tidying. The specifics:

• Restyles the data term and definition on desktop so that there is no longer a gap between the two
• Removes the colon next to the "published" and "updated at" terms
• Creates translation keys which previously didn't exist
• Give the associated files a bit of a spring clean

Why

This design existed in government frontend but was accidentally overwritten by work by govuk accessibility during our component update work. This change benefits screen magnification users as it will be easier for them to reach information when zoomed in.

A more detailed note from our designer on why it was changed in the first place and why we want to re-update it and apply it everywhere:

The change was made originally because the two column layout was inconsistent across pages — each instance of the metadata component had its own spacing between the columns that was dependent on the length of the content in the first column.
We decided this looked messy, didn't serve the user from page to page (elements jumping around isn't great for accessibility and predicting where content is).
Additionally, the gap between the columns would be baffling to screen magnification users.
This was done, if I recall correctly, as part of the template consolidation work (or an outgrowth of it). It was also done as part of a wider piece of work to tackle the two column layout used for contents lists on Mainstream Guides. Everything was put into a single column to improve usability and accessibility.

Visual Changes

Before	After

[nnagewad]

Looks awesome. 👍🏽

[maxgds]

I'm concerned about hiding the commas. In my terrible wrangling of VoiceOver I'm not seeing any difference between live and this, but I wonder if it might make things confusing for some. My concern is that rather than hearing "department of work and pensions comma home office comma hmrc" might you wind up with a word soup where the user has to try to work out where the delimiters are and getting it wrong? "department of work" and "pension home" "office".

Blogs posts like this one tend to say leave things be if they sound a bit clunky as trying to fix them might make the issue worse: https://accessibility.blog.gov.uk/2017/02/08/advice-for-creating-content-that-works-well-with-screen-readers/
Extract:
So the best answer seems to be: don't write content that works specifically for screen readers, write content that works well for everyone. Use correct punctuation, spelling and grammar, use standard conventions for acronyms and abbreviations, and use words that are appropriate for your audience.

Maybe one to take to the capability team?

[owenatgov]

@maxgds The reason I did this originally was on voice over, the dictation was reading each link and each comma separately, leaving this awkward pause. See video's for example of the problem vs the solution in VO (excuse messy recording):

Current

Screen.Recording.2021-05-05.at.16.11.13.mov

This PR

Screen.Recording.2021-05-05.at.16.10.04.mov

However, testing more extensively in other screen readers it does read stuff out as one continuous sentence which is confusing:

Screen.Recording.2021-05-05.at.16.17.43.mov

My gut feeling from extensive testing and your reasoning is that even though this problem persists on VO it isn't a problem in NVDA so maybe I should just revert it? What do you think?

[maxgds]

maybe I should just revert it? What do you think?

Sadly I think so. I know that there are different modes you can browse in with a screenreader and thought I was just failing to get VoiceOver to read the 'sentence' to me, but I did manage to get it to do so by highlighting it using my mouse. I recognise the effort here so I'm sorry to say it but I think it will introduce more confusion.

[owenatgov]

@maxgds Not to worry, makes sense to me. Removed and updated the PR description

[owenatgov]

I'm hold off on merging this for a bit because there's a separate piece of work to inform content designers about this change.