Facet headings have incorrect clickable area to expand/collapse

Open Beginner friendly
  • Is something wrong?
#6,364 2 comments 0 reactions 1 assignee View on GitHub

Maintainers usually reply within 1 day

@jesielviana is already working on this.

Since Nov 2, 2026.

  • #6509 by @jesielviana — open

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
72/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
angular, typescript
Domain
accessibility, frontend

Research direction

The bug sits in the facet heading markup and styles: the .facet-filter container shows a pointer cursor, but only the button.filter-name inside it toggles the facet. Start by finding where .facet-filter and button.filter-name are defined in the Angular facet component and its stylesheet, then check whether the click handler belongs on the button or the container. Done means clicking anywhere on the heading expands or collapses the facet, and the cursor matches the clickable area in the browser.

Written by the indexing model from the issue text.

Description

accessibility affects: 10.x affects: 8.x affects: 9.x bug ux

Describe the bug

Hovering over a facet heading box turns the cursor to a pointer, indicating a clickable region to expand/collapse the facet. But unless you click in the middle part of the box where the text/button actually renders, clicking will have no effect.

To illustrate: the dashed blue region (.facet-filter) currently has cursor: pointer; but only clicks within the red dashed region (button.filter-name) will actually collapse/expand the filter.

Image

This is an accessibility problem, and it appears to affect all currently-supported versions of DSpace (8.x, 9.x, 10.x).

To Reproduce

Steps to reproduce the behavior:

  1. Visit a page with facets
  2. Hover over a facet heading, observe pointer
  3. Click toward outer edge of that heading
  4. See that nothing happens

Expected behavior

Clicking on any part of the facet heading should expand/collapse the facet.

Dominant language
TypeScript
Stars
180
Forks
577
Avg merge
2d 18h
Merged PRs (30d)
115

Getting set up

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.

More from DSpace/dspace-angular

All issues in DSpace/dspace-angular

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.