Skip to content

Make calendar post cards usable with a keyboard #10

Description

@brudex

Proposed labels: accessibility, area:frontend, good first issue

Context

The month and week calendar views render previewable posts as clickable div
elements. Mouse users can open a post preview, but these elements are not
keyboard-focusable controls and their icon-only affordances need accessible
names.

Suggested starting points

  • public/scripts/app/calendar-month-view.directive.js
  • public/scripts/app/calendar-week-view.directive.js
  • the calendar styles and existing post-preview handler reached from
    calendarCtrl.openPostPreview(post)

Scope

Replace the mouse-only post-card interaction with native semantic controls or
an equivalent accessible pattern. Preserve the existing click behavior and
visual layout. Add accessible names for icon-only controls in the affected
calendar views when they do not already have a programmatic name.

Non-goals

  • Do not redesign the calendar or change scheduling behavior.
  • Do not change the post-preview data contract.

Acceptance criteria

  • Every interactive post card is reachable by Tab in both month and week
    views.
  • Enter and Space open the same preview as mouse activation without creating
    a duplicate action.
  • Focus is visible against the existing calendar card styling.
  • Icon-only calendar controls have meaningful accessible names.
  • Existing mouse preview and add-post interactions continue to work.

Verification

  1. Run npm test.
  2. Run the app locally with representative scheduled posts.
  3. With only a keyboard, navigate to post cards in both calendar views and
    activate each with Enter and Space; confirm the existing preview opens.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions