Problem/Motivation

Accessibility testing revealed a few concerns. The main one is that the form and select elements do not have corresponding labels. This showed in a few different testing tools (WAVE, Lighthouse, SiteImprove). Another concern is about the Add Row link and Calculate button. Though not flagged by testing tools, I noticed when using Voiceover that there is no announcement of what has changed after selecting one.

Steps to reproduce

Check a page using the calculator with an accessibility testing tool like WAVE, Lighthouse, or SiteImprove to see the missing label errors. Use a screen reader such as VoiceOver to note the lack of helpful information upon submission.

Proposed resolution

Though it's not tabular data, formatting the calculator as a table is one way to help fix the missing labels. Using Drupal.announce() could alert users to any page changes after clicking a button.

Issue fork gpa_calculator-3462133

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

mariewakeman created an issue. See original summary.

mariewakeman’s picture

mariewakeman commented
Assigned: Unassigned » mariewakeman

mariewakeman changed the visibility of the branch 3462133-accessibility-concerns to hidden.

mariewakeman changed the visibility of the branch 3462133-accessibility-concerns to active.

joewhitsitt made their first commit to this issue’s fork.

joewhitsitt’s picture

joewhitsitt
Location Iowa
commented

I've been working with mariewakeman off-thread on this and it has turned into a bit of a refactor. To address the accessibility concerns, we started by moving away from the custom js "Add more" inputs and back towards a Form API approach with an AJAX callback. Additionally, the existing JS was not using the Drupal Behaviors attach functionality. The work we have pushed so far is non-functional but is a step forward.

Here is some todo from my perspective:

  • Map letter grades to numeric equivalents whether config is supplied or default is used
  • Re-wire up response variables to calculation logic and return results to the callback div
  • Validate on empty inputs and/or remove empty inputs from the calculation
  • Finish removing jQuery and update the library config
  • Use Drupal.announce() to notify users of the results
  • Since we are bumping to D11, check module for other upgrade issues
joewhitsitt’s picture

joewhitsitt
Location Iowa
commented

I think I was able to get it working again, sprinkle in some Drupal.announce and remove the jQuery dependency.

https://git.drupalcode.org/issue/gpa_calculator-3462133/-/compare/2.x......

I think some validation is covered, and it would be nice to confirm the math is right. Interested in input from others.

mariewakeman opened merge request !6

pyrello made their first commit to this issue’s fork.

mariewakeman’s picture

mariewakeman commented
Status: Active » Needs review
pyrello’s picture

pyrello commented
Assigned: mariewakeman » Unassigned
Status: Needs review » Reviewed & tested by the community

This has been tested by multiple members of our team.

pyrello’s picture

pyrello commented
Status: Reviewed & tested by the community » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.