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").
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:No
:nameprop is passed.NcIconSvgWrappersetsaria-hidden="true"whenevernameis omitted (confirmed innode_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's own type declaration documents itsnameprop 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)
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").