Improve accessibility of room dashboard

[samuelwei]

Type

• Bugfix
• Feature
• Documentation
• Refactoring (e.g. Style updates, Test implementation, etc.)
• Other (please describe): ** Accessibility**

Checklist

• Code updated to current develop branch head
• Passes CI checks
• Is a part of an issue
• Tests added for the bugfix or newly implemented feature, describe below why if not
• Changelog is updated
• Documentation of code and features exists

Changes

• Added more context for screen readers at room index page (buttons and room attributes)
• Added aria-pressed state to show only favorites filter option at room index page
• Changed room names to be an anchor and h2 element for screen reader quick navigation at room index page
• Changed focus back to H1 Heading on filter changes at room index page

Other information

Summary by CodeRabbit

• Accessibility Improvements

  • Improved keyboard/focus behavior for room cards, including clearer focus rings and focus return when filters change
  • Enhanced screen reader support for room details (owner/type/description) and room-type badge context
  • Added clearer state indication for the “only favorites” filter (including aria-pressed) and improved dialog/readout order

• New Features

  • Room cards and favorites actions now provide room-specific labels for “add/remove favorite” (with room name context)

• Tests

  • Updated end-to-end assertions for the revised favorites and room-type badge text.

[coderabbitai]

Warning

Review limit reached

@samuelwei, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 36 minutes and 40 seconds. Learn how PR review limits work.

Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file).

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits.

🚦 How do rate limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan refill rate.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, the refill rate gradually slows as usage increases. The highest same-day bursts are limited more strictly.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 5eeed6d6-ef43-4e6b-95c4-f0aedcb69147

📥 Commits

Reviewing files that changed from the base of the PR and between ce20457 and 9f3cc83.

📒 Files selected for processing (2)

• CHANGELOG.md
• resources/js/views/RoomsIndex.vue

Walkthrough

Accessibility improvements to the rooms index: adds room-scoped translation keys for favorites and metadata labels, restructures RoomCard from a clickable div to a semantic li with router-link, adds aria-hidden, sr-only labels, and aria-pressed attributes across room components, introduces focus management in loadRooms, and updates E2E assertions to match.

Changes

Room List Accessibility

Layer / File(s)	Summary
Translation keys for room-scoped actions and metadata lang/en/rooms.php, lang/en/meetings.php	Adds add_for/remove_for favorites translation keys with :room placeholder and expands index.room_component with owner, room_type, short_description, and show_details_for. Adjusts meetings.php view_room placeholder format.
RoomCard semantic restructure and focus CSS resources/css/app/_room.css, resources/js/components/RoomCard.vue	Converts RoomCard from a clickable div to a li with an inline router-link on the title, removes the open() navigation helper, and adds CSS focus-within ring styling for .room-card elements.
Accessibility enhancements in detail components resources/js/components/RoomDetailsList.vue, resources/js/components/RoomFavoriteButton.vue, resources/js/components/RoomTypeBadge.vue	Adds aria-hidden="true" to decorative icons in RoomDetailsList, introduces sr-only labels with RawText colons for owner and short description fields, updates RoomFavoriteButton to use room-scoped *_for aria-label keys, and adds sr-only label with colon to RoomTypeBadge.
RoomHeader layout reordering with order classes resources/js/components/RoomHeader.vue	Restructures RoomHeader container to use flex column with items-start and applies order-1, order-2, order-3 classes to RoomTypeBadge, room name h1, and RoomDetailsList for explicit visual ordering.
RoomsIndex list structure and focus management resources/js/views/RoomsIndex.vue	Adds tabindex="-1" and ref to main <h1> for programmatic focus, binds aria-pressed to the favorites filter toggle, changes DataView list from div wrapper to ul wrapper. Updates reload() and loadRooms() to accept optional moveFocus parameter; initial mount calls reload(false) to avoid unintended focus, while loadRooms focuses the h1 before loading when moveFocus is true.
E2E test assertions updated for new structure and labels tests/Frontend/e2e/AdminRoomTypesEdit.cy.js, tests/Frontend/e2e/AdminRoomTypesNew.cy.js, tests/Frontend/e2e/AdminRoomTypesView.cy.js, tests/Frontend/e2e/RoomsIndex.cy.js, tests/Frontend/e2e/RoomsViewGeneral.cy.js	Updates AdminRoomTypes E2E tests to expect room component label format rooms.index.room_component.room_type: in badge assertions. Updates RoomsIndex and RoomsViewGeneral E2E tests to expect room-scoped add_for/remove_for aria-label keys with room names throughout favorites button interaction and error-handling flows.
Changelog entries documenting accessibility improvements CHANGELOG.md	Documents added accessibility features: clearer screen reader context for room index buttons and attributes, aria-pressed state for the favorites filter, conversion of room names to anchor links, focus restoration to main h1 on filter changes, and reordered screen reader announcements.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• THM-Health/PILOS#1988: Modifies RoomsIndex.vue's room filtering flow at the same reload/loadRooms call sites that this PR extends with moveFocus parameter handling.

Suggested labels

frontend, tests, UI

Suggested reviewers

• danielmachill

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description check	✅ Passed	The pull request description follows the template structure with clear type selection, completed checklist, specific changes listed, and additional context provided.
Title check	✅ Passed	The title 'Improve accessibility of room dashboard' accurately summarizes the main objective of the changeset, which focuses on accessibility enhancements across multiple room-related components.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch a11y-room-index

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.15%. Comparing base (645acb6) to head (9f3cc83).

Additional details and impacted files

@@              Coverage Diff              @@
##             develop    #2970      +/-   ##
=============================================
- Coverage      97.15%   97.15%   -0.01%     
  Complexity      1948     1948              
=============================================
  Files            477      477              
  Lines          16547    16546       -1     
  Branches        2409     2407       -2     
=============================================
- Hits           16077    16075       -2     
- Misses           470      471       +1     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

[cypress]

PILOS    Run #3122

Run Properties:   Passed #3122  •  9f3cc83c1e: Improve accessibility of room dashboard

Project	PILOS
Branch Review	a11y-room-index
Run status	Passed #3122
Run duration	07m 36s
Commit	9f3cc83c1e: Improve accessibility of room dashboard
Committer	Samuel Weirich
View all properties for this run ↗︎

---

Test results
Failures	0
Flaky	0
Pending	0
Skipped	0
Passing	635
View all changes introduced in this branch ↗︎

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@resources/js/components/RoomCard.vue`:
- Around line 3-5: Remove the tabindex="0" attribute from the <li> element with
data-test="room-card" in the RoomCard.vue component. This attribute makes the
list item itself focusable as a non-interactive tab stop, which creates an
unnecessary keyboard navigation point. Since the actual interactive content
(links/buttons) within the card should handle keyboard focus, the root <li>
element does not need explicit tabindex.

In `@resources/js/views/RoomsIndex.vue`:
- Around line 478-481: The loadRooms function uses
document.getElementsByTagName("h1")[0] to focus the first h1 element globally,
which can target the wrong heading if multiple h1 elements exist on the page.
Replace this global DOM query with a local template ref. Create a template ref
on the page heading h1 element in the RoomsIndex.vue template, then update the
focus call in loadRooms to use this ref instead of the global document query,
ensuring focus behavior is deterministic and scoped to this view.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 1ab9a01f-7362-491e-bba9-821077b62a48

📥 Commits

Reviewing files that changed from the base of the PR and between 645acb6 and 10a347d.

📒 Files selected for processing (12)

• lang/en/rooms.php
• resources/css/app/_room.css
• resources/js/components/RoomCard.vue
• resources/js/components/RoomDetailsList.vue
• resources/js/components/RoomFavoriteButton.vue
• resources/js/components/RoomTypeBadge.vue
• resources/js/views/RoomsIndex.vue
• tests/Frontend/e2e/AdminRoomTypesEdit.cy.js
• tests/Frontend/e2e/AdminRoomTypesNew.cy.js
• tests/Frontend/e2e/AdminRoomTypesView.cy.js
• tests/Frontend/e2e/RoomsIndex.cy.js
• tests/Frontend/e2e/RoomsViewGeneral.cy.js

[Copilot]

Pull request overview

Improves accessibility and screen-reader context on the Rooms index/dashboard by adding more descriptive ARIA labels, better semantic structure for room cards/headings, and focus management when filters change.

Changes:

• Enhanced room card semantics (list + <h2> links) and focus styling/behavior on the Rooms index.
• Added more descriptive screen-reader labels (favorites, details, owner, room type, short description).
• Updated Cypress E2E tests and changelog entries to reflect the accessibility changes.

Reviewed changes

Copilot reviewed 15 out of 15 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
tests/Frontend/e2e/RoomsViewGeneral.cy.js	Updates expected favorites button aria-labels to include room context.
tests/Frontend/e2e/RoomsIndex.cy.js	Updates expected favorites aria-labels on the rooms index scenarios.
tests/Frontend/e2e/AdminRoomTypesView.cy.js	Adjusts room type badge text expectation due to added SR-only prefix.
tests/Frontend/e2e/AdminRoomTypesNew.cy.js	Adjusts room type badge text expectation due to added SR-only prefix.
tests/Frontend/e2e/AdminRoomTypesEdit.cy.js	Adjusts room type badge text expectation due to added SR-only prefix.
resources/js/views/RoomsIndex.vue	Adds focusable main heading, aria-pressed for favorites filter, and switches card container to a semantic list.
resources/js/components/RoomTypeBadge.vue	Adds SR-only “Room type:” prefix for improved context.
resources/js/components/RoomHeader.vue	Reorders markup to have screen readers announce room name before room type.
resources/js/components/RoomFavoriteButton.vue	Uses contextual favorites labels including the room name.
resources/js/components/RoomDetailsList.vue	Adds SR-only labels for owner/short description and hides decorative icons from AT.
resources/js/components/RoomCard.vue	Converts card to <li>, uses <router-link><h2> for navigation, and contextualizes “show details” ARIA labels.
resources/css/app/_room.css	Adds focus ring styling for room cards using :focus-within (and refines outline behavior).
lang/en/rooms.php	Adds new English translation keys for contextual labels and room metadata labels.
lang/en/meetings.php	Tweaks English wording for view_room label.
CHANGELOG.md	Documents the accessibility updates for the room index.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.