govuk-design-system-backlog
govuk-design-system-backlog copied to clipboard
Panel
Use this issue to discuss this component in the GOV.UK Design System.
The usage of .app-contact-panel
on various pages uses a .govuk-link:focus
link focus style #005ea5
on #ffbf47
which has a color contrast ratio of 4.07:1. I believe #0055a5
is the closest color that maintains 4.50:1.
Hi Paul,
Thanks for raising that - good spot. This issue relates to the wider panel component from the Design System, so I'm going to copy your issue ot the Design System repo so we can track it there.
Ollie
Ideas for future iterations of the panel component:
- make it more generic, so it can be used to create other kinds of panel
Interested to know why the text on this is centred as opposed to left-aligned as with pretty much everything else in the Design System.
Hi @JodiB-TPR, we discussed this among the team and we think the reasoning for the centre aligned text in the panel was to make it stand out more; however this design decision was made a long time so we can’t be sure there wasn’t more to it!
We might decide differently today, but if we wanted to make a change we’d want to have evidence that the centre align was causing problems for users.
I hope this helps!
I think I might have been the first to use this as success confirmation in a service, on Register to vote. I took the pattern from GOV.UK Publishing - for short, 'main answer' content:
https://www.gov.uk/bank-holidays https://www.gov.uk/vat-rates
As such I think they're centred as they are short and stand out from normal content. But yeh I don't know if we reviewed it all again that we might make everything left aligned.
As part of the GOV.UK Frontend v3.14.0 ‘feature release’, we’ve fixed an accessibility issue where text could overflow the panel component. Thanks to @philsherry for originally reporting this issue.
Out of interest, why isn't the text following the heading in a paragraph? It probably makes no difference to screen readers, but it is semantic to wrap text inside of <p>
tags.
Hi, I'd like to share a variation to the panel component we've been using in Borders and trade - Goods Vehicle Movement Service (GVMS).
We've used the panel to display a barcode that lorry drivers use at border locations or inspection sites that the Border Force officers can scan to see the details of the movement. On average, 110,000 of these are created every week and we have positive feedback it works well (see below)
We also have video footage of the bar code in usage and we'll be happy to share if needs be.
"The barcode is critical for maintaining flow, it is very useful for customers who are simply able to present 2 barcodes (GMR and a French barcode equivalent) and useful for us, as our staff are quickly able to perform a scan. When GMRs are introduced for GB – EU traffic we will see the benefits on the UK terminal for this too"
“Barcode is great and working well, it has made a huge difference in minimising errors and we see the positive of this at the check in, in keeping the traffic flowing. We are very pleased that HMRC introduced this”