Warning text does not support multi-line

[Jamesking56]

Description of the issue

https://design-system.service.gov.uk/components/warning-text/

The warning text component does not support text that drops onto multiple lines

Steps to reproduce the issue

The icon looks a bit strange when the element is showing multiple lines of information

<div class="govuk-warning-text">
    <span class="govuk-warning-text__icon" aria-hidden="true">!</span>
    <strong class="govuk-warning-text__text">
        <span class="govuk-warning-text__assistive">Notice</span>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus alias dolores illo praesentium, quaerat ratione reiciendis voluptas. Corporis, delectus, enim error et illum maxime, officiis quam qui quibusdam repudiandae tempora?
    </strong>
</div>

Actual vs expected behaviour

[36degrees]

Hi @Jamesking56,

Can you elaborate on what you mean 'the icon looks a bit strange'? As far as I can tell from your screenshot this is working as designed.

[Jamesking56]

Hi @Jamesking56,

Can you elaborate on what you mean 'the icon looks a bit strange'? As far as I can tell from your screenshot this is working as designed.

It looks high up stuck in the top left?

[36degrees]

This is currently working as designed – there was a change made back in 2019 to vertically align the icon with the first line of the text:

The primary purpose of the this PR was to align the icon with the top line, so that when the content wraps the icon doesn't vertically align with the entire block and potentially end up out of sight when the user starts reading the warning text.

Have you seen any evidence that users are confused by this? What would you expect the component to do when there are multiple lines of text?

[Jamesking56]

This is currently working as designed – there was a change made back in 2019 to vertically align the icon with the first line of the text:

The primary purpose of the this PR was to align the icon with the top line, so that when the content wraps the icon doesn't vertically align with the entire block and potentially end up out of sight when the user starts reading the warning text.

Have you seen any evidence that users are confused by this? What would you expect the component to do when there are multiple lines of text?

I would expect it to look like this:

I haven't seen evidence of user confusion but if there was text above that isn't included in the warning, wouldn't the high up icon then cause confusion which parts of the text it is for?

[querkmachine]

Having the icon vertically centred is fine if you assume a certain quantity of text and a certain amount of horizontal space. It starts to quite goofy in situations where those circumstances are not ideal—such as on mobile devices or for users who use zooming or magnification tools for accessibility purposes.

[christopherthomasdesign]

Hi @Jamesking56

Thanks for raising this, you're not the first to bring it up!

We placed the icon at the top left because it ensures the warning icon is within the path of people using screen magnification tools. The icon is important for understanding that the text is a warning, and not just some bold text. For longer blocks of warning text, you could miss that context.

I personally agree that it looks a bit strange when it sticks out above the top of a large block of text. I think ideally it'd be vertically centre-aligned when there's just one line of text, and aligned to the top of the text block when it runs over 2 or more lines. But we're not aware of a way to do this reliably in CSS. So we decided the accessibility consideration trumped the aesthetic one in this case.

Hope that makes sense.

[Jamesking56]

@christopherthomasdesign Excellent explanation! I agree accessibility should triumph here 👍

[querkmachine]

@Jamesking56 Given the information above, are you happy for us to close this issue?

[Jamesking56]

@Jamesking56 Given the information above, are you happy for us to close this issue?

Yes can be closed