[Fix] Hide decorative SVG icons from screen readers (WCAG 1.1.1)

[qmoreaux]

I want to prequalify a pull request related to the following:

User story:
As a screen reader user, I do not want to hear descriptions of purely decorative icons (such as the validation star, checkmarks, or crosses) because they create audio clutter and slow down my navigation through the actual content.

Currently, decorative SVG elements contain <title> tags that are read aloud by screen readers (e.g. "star icon", "check icon"), adding noise without useful information.

UX:
No visible changes. Decorative icons remain visible for sighted users but are simply hidden from assistive technologies.

Accessibility:
This addresses:

• WCAG 1.1.1 Non-text Content (Level A): purely decorative images must be implemented so that assistive technology can ignore them.
• RGAA 1.2: decorative images must have an empty text alternative.

Technical solution:

1. Identify all decorative SVG elements in h5p-question (feedback icons: stars, checks, crosses) and h5p-joubel-ui (score bar decorations, progress indicators).

2. For each decorative SVG, apply one of:
   a. Add aria-hidden="true" to the element
   b. Remove the <title> element from the SVG
   c. Add role="presentation" to the element

   Preferred approach: aria-hidden="true" as it is the most explicit and widely supported.

3. For SVGs that serve an informational purpose (e.g. "correct" or "incorrect" feedback), ensure the information is conveyed through a text alternative (e.g. aria-label="Correct answer" or a visually-hidden text span) rather than the SVG <title>.

4. Test with NVDA and VoiceOver to verify decorative icons are no longer announced.

Files likely affected:

• h5p-question/scripts/question.js (feedback icon rendering)
• h5p-joubel-ui/js/joubel-score-bar.js
• h5p-joubel-ui/js/joubel-progress-circle.js