geonetwork / geonetwork/core-geonetwork

Accessibility issue: Facets on homepage don't have focus indicator

Open
#8,028 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
Java
Stars
521
Forks
514
Avg merge
6d 13h
Merged PRs (30d)
19

Description

**Describe the bug**
Hi guys! We recently had one of our GeoNetwork instances tested for accessibility and the following issue was flagged to us:

> The tester has observed that when tabbing the page, a visible tab focus indicator is not present. It is expected that a visible indicator is present to highlight the element in focus for any keyboard-operable user interface components. This should go beyond the default browser indicator and should have a clear contrast of at least 3:1 against the site background. It has been observed that on the homepage there is not a sufficient focus indicator which surrounds the `Topic` button.

I had a look and didn't manage to find a fix for this without adversely affecting the behaviour of the homepage, do you have any suggestion on how I could approach this? Any help would be super appreciated :pray:

**To Reproduce**
Steps to reproduce the behaviour:

1. Navigate to GeoNetwork homepage
2. Tab the page content
3. Observe the lack of focus around `Topic` and `INSPIRE themes` labels

**Expected behaviour**
A clear focus indicator should appear around the `Topic` and `INSPIRE themes` buttons at the top (as it does for the actual filter facets below- see screenshot) and you should be able to action these with the keyboard not only the mouse (i.e. clicking on them OR pressing the return key on the keyboard should trigger them)- as you do for the actual filter facets.

**Screenshots**
![Screenshot from 2024-05-10 09-42-35](https://github.com/geonetwork/core-geonetwork/assets/36423106/b9d6119a-6b78-417e-a695-d3e4ac990b94)

Contributor guide

Open the contributing guide

Research direction

Start by opening the GeoNetwork homepage and inspecting the controls for the Topic and INSPIRE themes facets, comparing them with the filter facets that already show focus. Reproduce the issue with keyboard tabbing and Enter. Done means both controls have a clear, sufficiently contrasting focus indicator and can be activated from the keyboard without adversely affecting homepage behavior.

Written by the indexing model from the issue text.

Assessment

Domain
accessibility
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.