bcgov / bcgov/bcparks-ar-api

Accessibility -> Contrast errors with text displayed on the Enter Data screens

Open
#256 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
2
Forks
12
PR merge metrics
No merged PRs in 30d

Description

## Description
**How to replicate:**
* Navigate to the A&R website on the Test environment: [A&R Admin](https://d3ahrzu0mpndj3.cloudfront.net/enter-data/frontcountry-camping?date=202210&parkName=Mount%20Robson%20Park&subAreaId=0279&subAreaName=Robson%20River%20Campground&orcs=0002)
* Log in and navigate to the Enter Data page
* Select a Month, Park and a Sub-area, and click “Go”
* Select a facility from the list and check the text contrast on the resulting page.
eg:

![Image](https://github.com/bcgov/bcparks-ar-api/assets/145403218/53d6b304-dc6e-45f4-ac0b-603fc8ddcd47)

**Expected Behavior:**
* Adequate contrast of text is necessary for all users, especially users with low vision.
* Increase the contrast between the foreground (text) color and the background color. Large text (larger than 18 point or 14 point bold) does not require as much contrast as smaller text.

**Issue:**
* Very low contrast between the text and background colors on some text displayed on the screen.
eg:

![Image](https://github.com/bcgov/bcparks-ar-api/assets/145403218/2fd34c1f-f0af-46b7-ba4f-91768f97d451)

![Image](https://github.com/bcgov/bcparks-ar-api/assets/145403218/d5c094e7-ba8d-45be-a0d8-d4c256da62e4)

## Linked issues
relates to
- [x] ~[BRS-822](https://bcparksdigital.atlassian.net/browse/BRS-822)~

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reproducing the contrast problem on the A&R Admin Test environment and navigating to the Enter Data page with the linked example. Inspect the styles used on the resulting facility page and verify that the affected text has adequate foreground/background contrast when the work is complete.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.