Robinlee0929 / Robinlee0929/Network_Automation_Lab

Add accessible captions and keyboard labels to Flask report tables

Open Beginner friendly
#53 0 comments 0 reactions 0 assignees View on GitHub
enhancement good first issue
Dominant language
Python
Stars
0
Forks
1
Avg merge
1h 38m
Merged PRs (30d)
39

Description

## Context

The canonical Flask Reports page contains wide HA/VRRP and WireGuard evidence tables. Each table is inside a horizontal scroll container, but the tables have no `` and the scroll regions are not named or keyboard-focusable.

Adding these semantics will make the evidence easier to identify and navigate with assistive technology and keyboards.

## Newcomer snapshot

- **Difficulty:** Beginner / Intermediate
- **Scope:** Small / Medium
- **Primary area:** Flask / Jinja HTML accessibility and pytest assertions
- **Likely files:** `templates/dashboard_reports.html` plus one or more of the existing focused dashboard test files
- **Python required:** Yes
- **Node/npm required:** No
- **Physical hardware required:** No
- **Live device access required:** No
- **Credentials required:** No
- **External API/provider required:** No
- **Task-time network access required:** No, after local dependencies are installed
- **Start with:** `python -m pytest tests/test_dashboard_app.py tests/test_phase_2o_02_canonical_flask_overview_evidence_and_reports_visualization.py tests/test_phase_2o_03_canonical_flask_display_only_and_technical_detail_presentation.py`
- **Before completion:** run the focused pytest command, full pytest, and `python network_lab.py --task report-index`
- **Do not change:** report discovery, report data, routes, filters, status normalization, command execution, network behavior, or live-device behavior

Dependency installation may require internet access; the access fields above describe the task after local prerequisites are installed.

## Scope

Improve only the presentation semantics of the two existing tables in `templates/dashboard_reports.html`.

Do not change report discovery, report data, routes, filters, status normalization, or live/network behavior.

## Acceptance criteria

- [ ] The HA/VRRP table has a concise, reviewer-facing ``.
- [ ] The WireGuard table has a concise, reviewer-facing ``.
- [ ] Each horizontal scroll container is exposed as a named region.
- [ ] Each scroll region can receive keyboard focus when horizontal scrolling is needed.
- [ ] Existing focus-visible styling remains usable for the new focus targets.
- [ ] Focused tests assert the captions and accessible region attributes.
- [ ] No new action controls, POST routes, report generation, or live-device behavior are added.

## Suggested starting points

- `templates/dashboard_reports.html`
- `templates/dashboard_base.html`
- `tests/test_dashboard_app.py`
- `tests/test_phase_2o_02_canonical_flask_overview_evidence_and_reports_visualization.py`
- `tests/test_phase_2o_03_canonical_flask_display_only_and_technical_detail_presentation.py`

## Validation

Run:

- `python -m pytest tests/test_dashboard_app.py tests/test_phase_2o_02_canonical_flask_overview_evidence_and_reports_visualization.py tests/test_phase_2o_03_canonical_flask_display_only_and_technical_detail_presentation.py`
- `python -m pytest`
- `python network_lab.py --task report-index`

## Safety boundary

This change is limited to HTML semantics and tests. It must remain display-only and must not add report generation, command execution, SSH, network access, configuration changes, or live-device interaction.

Contributor guide

Open the contributing guide

Research direction

Start with templates/dashboard_reports.html and inspect the two existing HA/VRRP and WireGuard tables, then review dashboard_base.html for focus-visible styling. Run the focused pytest command named in the issue and update the relevant dashboard tests to assert captions and accessible region attributes. Done means both tables and horizontal scroll containers meet every listed acceptance criterion without changing report behavior; then run full pytest and python network_lab.py --task report-index.

Written by the indexing model from the issue text.

Assessment

Tech stack
flask, html, python
Domain
accessibility, frontend, testing
Issue type
Feature
Difficulty
2/5
Estimated time
Half a day
Activity status
Active
Clarity
Clearly specified
Newbie friendliness
88/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.