nextcloud / nextcloud/office

Overview: favourite indicator and loading spinner aren't announced to screen readers

Open Beginner friendly
#59 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
6
Forks
1
Avg merge
1d 3h
Merged PRs (30d)
10

Description

Found while adding frontend test coverage (#47/#50), not fixed there — a behaviour-preserving test PR isn't the place for UI changes. Both confirmed against @nextcloud/vue's actual compiled output, not assumed.

Favourite indicator is invisible to screen readers

OfficeOverview.vue's list view renders the favourite star as:

<NcIconSvgWrapper v-if="file.attributes?.favorite === 1" :path="mdiStar" :size="16" class="office-overview__favourite-icon" />

No :name prop is passed. NcIconSvgWrapper sets aria-hidden="true" whenever name is omitted (confirmed in node_modules/@nextcloud/vue/dist/chunks/NcIconSvgWrapper-*.mjs: "aria-hidden": _ctx.name ? void 0 : "true"). So a favourited file and a non-favourited file are indistinguishable to a screen reader user — it's a color/icon-only signal with no text alternative.

Fix: pass an accessible name, e.g. :name="t('office', 'Favourite')".

Loading spinner has no accessible name

<NcLoadingIcon v-if="loading" class="office-overview__loading" />

NcLoadingIcon's own type declaration documents its name prop as "the accessible name" for what's loading — explicitly optional, and not passed here. A screen reader user gets no "loading" announcement when the page first fetches data.

Fix: pass a name, e.g. :name="t('office', 'Loading')".

Worth checking, not confirmed (needs a real DOM inspection, not static analysis)

  • Whether NcTextField's helper-text/error props (used for the create-from-template filename validation error) are wired to aria-describedby on the input, so the error is actually announced when it appears.
  • TemplateSection.vue's scrollable card list has no role/aria-label identifying it as a horizontally-scrollable region. Lower priority — the scroll arrow buttons are independently reachable and already labeled ("Scroll left"/"Scroll right").

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in OfficeOverview.vue by checking the NcIconSvgWrapper and NcLoadingIcon usages described in the issue, then inspect TemplateSection.vue for the lower-priority scrollable-region concern. Verify the rendered DOM for accessible names and aria relationships, including the NcTextField validation error. Done means favourite and loading states are announced and the confirmed accessibility checks pass without changing behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
72/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.