Skip to content

Add accessible captions and keyboard labels to Flask report tables #53

Description

@Robinlee0929

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 <caption> 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 <caption>.
  • The WireGuard table has a concise, reviewer-facing <caption>.
  • 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.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions