Notification badge

[sheldongold]

This component is to alert users that there is a certain number of items that require their attention.

This is currently a progressive enhancement for the utility navigation and has undergone initial user testing whereby it helped users to notice that there were items that required their attention and due to the ubiquitous use of this design pattern all users understood precisely what the numbers meant.

<span class="badge" aria-label="Number of x">1</span>

.badge { position: relative; display: inline-block; top: -10px; left: -6px; min-width: 19px; padding: 3px 6px 2px 6px; font-size: 14px; font-weight: 600; line-height: 1; background: #B10E1E; color: #fff; text-align: center; white-space: nowrap; border-radius: 10px; }

For this particular use case, we would cap the maximum number displayed to 99, anything above will be displayed as 99+. If the number is below 1, the badge will not be displayed.

[sheldongold]

Useful | It addresses a user need that’s shared by multiple services or products. This pattern will be used as a visual indicator for both the Messages and Tracking services, will be developed by PTA for the TaaS service and will appear in the navigation across every service within the account.

Unique | It doesn’t duplicate something which already exists in the Design System, unless it’s intended to replace it. This pattern doesn't exist in GOV.UK elements

[stevenaproctor]

@sheldongold I may be wrong but I do not think you can use aria-label with a <span>. The span may need to be <span class="visuallyhidden">Number of messages is </span>1

Worth asking a frontend developer.

[leekowalkowski-hmrc]

You can use aria-label with any element, it's similar to the title attribute but without having a tooltip. https://www.w3.org/TR/wai-aria/states_and_properties#aria-label

[stevenaproctor]

@leekowalkowski-hmrc I know you can use them but screen readers do not read out the aria-label. At least NVDA does not with Firefox. I cannot speak for other screen readers.

I think it is something to do with a span not being interactive or a landmark.

[gavinwye]

@sheldongold the @hmrc/design-system-working-group reviewed this component last Friday and agreed that it meets the criteria of useful and unique.

I'll arrange some time to sit down with you and go through getting this added to the Design System so that you can work towards meeting the rest of the Design System standards.

I'll also assign the issue to you.

[stevenaproctor]

@sheldongold This is now a part of the design system as a work in progress. See http://hmrc.github.io/assets-frontend/components/badge/index.html

[jonny-walkley]

This is how the notification badge currently looks on the HMRC design system:

I think adding some whitespace between the text and badge makes it a bit clearer:

Does anyone agree?

[stevenaproctor]

Not sure this is HMRC only. It is part of #128 but could be separate. It is similar to a tag.

[jennifer-hodgson]

I think we could propose a new component - have added into spreadsheet as such and we can discuss

[mikeash82]

Upstreamed to the GOV.UK issues backlog https://github.com/alphagov/govuk-design-system-backlog/issues/169