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.

[PAVAN507-STAR]

@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.

[PAVAN507-STAR]

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

[oz456]

Hey @thibaudcolas, can you review my PR #499 that resolves this issue?

[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.