Skip to content

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

Description

@moodyjmz

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").

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions