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.

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