Decorative shapes overlap section subheadings

[shyusu4]

Issue

Decorative shapes are currently overlapping with section subheadings.

Steps to reproduce
Resize the viewport to 768px or less.

Suggested fix
Make sure icons are always behind text elements in z-index layering or/and add a solid background according to theme behind the text.

Reference
Wagtail.org | Accessibility audit spreadsheet

[thibaudcolas]

There’s been some improvements in #458 but I think there’s more work to do on this.

[therurouni]

@thibaudcolas I would love take on this issue sir.If possible can u guide me on what more changes to add.

[thibaudcolas]

@PAVAN507-STAR I think the suggested fix above is good?

1. Make sure icons are always behind text elements in z-index layering
2. add a solid background according to theme behind the text.

They both sound like valuable improvements.

[therurouni]

@thibaudcolas Okay sir will do that in 2-3 days if that's fine as rn i have clg exams going on.

[thibaudcolas]

Thank you @oz456, this definitely helps. This doesn’t change the second point from the suggested fix:

2. add a solid background according to theme behind the text.

[AdityaSharma-Git3207]

I can still reproduce readability issues for section subheadings at viewport widths ≤768px.

Based on recent comments, it looks like the remaining work is the second part of the suggested fix, adding a theme-aware solid background behind the heading text.

I’d be happy to work on this if no one else is currently doing so.