🎩 What? Why?

This applies the same accessibility fixes as #8879 and #8912 combined to the HTML diff mode selector.

When implementing #8912, I added some accessibility tests to the diff mode pages and noticed that they have duplicate IDs on them. The issue is that the diff mode selector and the HTML mode selector use the same IDs.

This fixes the issue by applying unique IDs to the HTML diff mode selector while also fixing the same accessibility issues with the HTML diff mode selector.

📌 Related Issues

Link your PR to an issue

• Related to Fix diff mode selector roles and tabindexes #8912, Fix diff mode selector accessibility #8879

Testing

• Enable HTML editor for the participants from the settings
• Check the accessibility tool issues on the diff mode page (e.g. a version page)

📋 Checklist

• ❓ CONSIDER adding a unit test if your PR resolves an issue.
• ✔️ DO check open PR's to avoid duplicates.
• ✔️ DO keep pull requests small so they can be easily reviewed.
• ✔️ DO build locally before pushing.
• ✔️ DO make sure tests pass.
• ✔️ DO make sure any new changes are documented in docs/.
• ✔️ DO add and modify seeds if necessary.
• ✔️ DO add CHANGELOG upgrade notes if required.
• ✔️ DO add to GraphQL API if there are new public fields.
• ✔️ DO add link to MetaDecidim if it's a new feature.
• ❌AVOID breaking the continuous integration build.
• ❌AVOID making significant changes to the overall architecture.

📷 Screenshots