Overview: favourite indicator and loading spinner aren't announced to screen readers
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'shelper-text/errorprops (used for the create-from-template filename validation error) are wired toaria-describedbyon the input, so the error is actually announced when it appears. TemplateSection.vue's scrollable card list has norole/aria-labelidentifying it as a horizontally-scrollable region. Lower priority — the scroll arrow buttons are independently reachable and already labeled ("Scroll left"/"Scroll right").
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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