search

alphagov / govuk-frontend

GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.
https://frontend.design-system.service.gov.uk/
MIT License
1.18k stars 326 forks source link

Alignment inconsistency of markers in ordered lists in Safari #5398

Open jon-kirwan opened 1 month ago

jon-kirwan commented 1 month ago

Description of the issue

Alignment inconsistency of markers in ordered lists in Safari: When viewed in Safari, ordered lists do not align properly with the surrounding content.

Update: it seems to be an issue with native ordered lists too, not only GOV.UK Frontend lists.

Steps to reproduce the issue

In Chrome, the list numbers align to the left, matching the positioning of surrounding content.

Screenshot displaying an ordered list alongside surrounding content in Chrome

However, in Safari, the alignment is slightly different.

Screenshot showing the issue in Safari

You can replicate this issue by creating a mockup of a Design System / GOV.UK Frontend page using the following markup and then comparing it in Safari and Chrome

<body class="govuk-!-padding-4">
  <p class="govuk-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
  <ol class="govuk-list govuk-list--number">
    <li>Lorem ipsum dolor</li>
    <li>Lorem ipsum dolor</li>
    <li>Lorem ipsum dolor</li>
  </ol>
</body>

Actual vs expected behaviour

I would expect the list markers to align properly with the surrounding content.

Environment (where applicable)

github-actions[bot] commented 1 month ago

Uh oh! @jon-kirwan, the image you shared is missing helpful alt text. Check your issue body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

🤖 Beep boop! This comment was added automatically by github/accessibility-alt-text-bot.