ui: add semantic aria roles and labels to mock code editor in hero section

[komalharshita]

Description

The mock code visualizer in the hero section is constructed using standard HTML text lines. Because it contains code keywords and syntax symbols, screen readers attempt to read it out line-by-line, causing confusion for assistive technology users.

We should hide the raw text lines from screen readers and replace it with a single, clear alternative description on the wrapper container.

Current Behavior

Screen readers attempt to pronounce raw python code lines, causing an accessibility barrier.

Proposed Solution

1. Add aria-hidden="true" to the inner code container (hvm-code).
2. Add role="img" and aria-label="Code editor mockup showing python script for an expense tracker" to the parent editor frame wrapper.

Implementation Guidance

• Modify src/templates/index.html inside the hero visual main elements.

Acceptance Criteria

• The mock code block has aria-hidden="true".
• Screen readers announce the alternative image description instead of reading raw code symbols.

Contributor Guidelines

Interested in working on this issue?

1. Comment /assign to request assignment.
2. Wait until the issue shows you as the assignee.
3. Create a new branch for your changes.
4. Submit a Pull Request referencing this issue.

Please do not begin working on an issue already assigned to another contributor unless a maintainer confirms it is available.