aria-hidden is added to (or left on) visible narrative items when `_isStackedOnMobile` is enabled

[hanshillen]

Subject of the issue/enhancement/features

When _isStackedOnMobile is set to true, all narrative items are shown below each other on small screens, without requiring any interaction. When this happens, the aria-hidden=true attributes (that are normally added to hide visually-hidden inactive narrative items from screen readers), are not removed. This means that although the items are visible, they are still hidden from screen readers.

This happens both when:

• The the course loads into a small or zoomed in screen
• The course loads into a regular screen, which is then zoomed into a viewport width below device.isScreenSizeMin('medium') by the (low vision) user

Your environment

• Framework b5.42.7, any browser or screen reader

Steps to reproduce

Create a new course, set _isStackedOnMobile: true for the narrative component. Test with screen reader or devtools to confirm the aria-hidden attributes are there.

Expected behaviour

Visible and meaningful content should not be hidden from screen readers

Solution

Since narrativeContent.jsx is already checking for _isStackedOnMobile && !_isLargeMode, this can be used to conditionally add the aria-hidden attribute only when necessary. For example:

const isStackedLayout = _isStackedOnMobile && !_isLargeMode;

aria-hidden={(!isStackedLayout && !_isActive) || null}

This will fix this issue both on page load and on relevant window size thresholds caused by resizing and zooming.

[oliverfoster]

Yup 👍 sounds perfect.