VoiceOver starts reading expanded element from mid-sentence

[selina-mcg]

Bug Report

What is the issue?

We have discovered an issue when using the VoiceOver screen reader with the "Details" component in the Safari browser.

What steps are required to reproduce the issue?

We are using VoiceOver to click the element <span class="nhsuk-details__summary-text"> and reveal the <p></p> content within the Details component.

Sample markup taken from https://service-manual.nhs.uk/design-system/components/details:

<details class="nhsuk-details">
  <summary class="nhsuk-details__summary">
    <span class="nhsuk-details__summary-text">
      How to find your NHS number
    </span>
  </summary>
  <div class="nhsuk-details__text">

    <p>An NHS number is a 10 digit number, like 485 777 3456.</p>
    <p>You can find your NHS number by logging in to a GP online service or on any document the NHS has sent you, such as your:</p>
    <ul>
      <li>prescriptions</li>
      <li>test results</li>
      <li>hospital referral letters</li>
      <li>appointment letters</li>
    </ul>
    <p>Ask your GP surgery for help if you can't find your NHS number.</p>

  </div>
</details>

Expected behaviour: VoiceOver reads the text content within the <span></span> tags as a whole sentence (using the example above, VoiceOver would be expected to read "How to find your NHS number".)

Actual behaviour: VoiceOver starts reading from the middle of the span text content, and only reads one word before stopping.

What was the environment where this issue occurred?

• Device: MacBook Pro, 14-inch 2021
• Operating System: macOS Sonoma, version 14.7.6
• Browser: Safari
• Browser version: 18.5

Is there anything else you think would be useful in recreating the issue?

Video evidence: https://github.com/user-attachments/assets/ee7588f4-0779-4e84-a021-0f25fe65e10d