Internal issue 3059 - Compatibility of IcTypography with MS Edge "Read Aloud" screen reader

h3. Summary of the bug

IcTypography component seems to prevent the MS Edge built in screen reader's ability to highlight the text as it reads it, but will also remove parts of the text from the screen as it does so.

h3. 🪜 How to reproduce

Tell us the steps to reproduce the problem:

- In MS Edge, go to page: [https://design.sis.gov.uk/|https://design.sis.gov.uk/]
- Click on: Settings and More -> More Tools -> Read Aloud (Ctrl+Shift+U)
- The main text "Create powerful apps and services that work for everyone." is not read.
- It loops on Accessibility: Design, build and test apps and services that work equitably for everyone.
- Scroll up. Repeat presses of the previous button in the screen reader to select "Cookies and Storage on this site".
- When the screen reader reads the text "Cookies and Storage on this site", it then disappears.

h3. 📸 Screenshots or code

A basic react webpage with the following exhibits the issue. The text "This is a test" will be modified during screen read.

import React from "react"
import { IcTypography } from "@ukic/react"

export default function IcTypographyTest() {
return (

);
}

h3. 🖥 📱 Device

* Type: Desktop
* Device: MS Surface 5
* OS version: Windows 11 26100
* Browser version: Edge 137

h3. 🧐 Expected behaviour

All text on the page should be read.
The paragraph being read should be highlighted in blue.
The word being read should be highlighted in yellow.

h3. 📝 Acceptance Criteria

If relevant, describe in full detail the different interactions and edge cases that the component or patterns needs to fulfil.

_Given_ I am on a webpage with IcTypography components
_When_ I start the MS Edge "Read Aloud" feature
_Then_ All text is read and
the paragraph being read is highlighted in blue and
the word being highlighted in yellow and
the text content is not modified

h3. 🚨 Urgency (low, medium or high)

low, although depending on timeline we may need to spend effort reverting to MUI Typography/other workarounds

h3. Additional info

The screen reader is introducing elements to the DOM, so it may be something to do with this or the reader parsing the shadow root.

As other components, such as IcCheckbox, use IcTypography, this means that these have text not read either.

Using MUI Typography component does not exhibit the same behaviour.

(Additional - The ICDS website has the screen reader get stuck on the Accessibility card in the grid.)

Start by reproducing the issue with the IcTypography component using the supplied React example in Microsoft Edge Read Aloud, then compare it with the MUI Typography behavior. Inspect the IcTypography entry point and how the component interacts with the shadow root and msreadoutspan elements; done means all text is read, highlighting works, and text remains unchanged.

Written by the indexing model from the issue text.