Help links in forms are not keyboard-accessible

Bug #1259394 reported by Jono Mingard on 2013-12-10
6
This bug affects 1 person
Affects Status Importance Assigned to Milestone
Mahara
Medium
Jono Mingard

Bug Description

Currently, users of screen readers can see help links (the blue icons in forms) and can activate them but cannot easily interact with the popup that appears since it's inserted into the HTML in a different place from the link.

A possible way to do this is
- Add tabindex="-1" to the popup title
- Focus the title using JS when the popup is loaded
- Lock keyboard focus to the popup while it is open using ARIA attributes

Affects latest master

(WCAG Level A)

Jono Mingard (mingard) on 2013-12-10
description: updated
Jono Mingard (mingard) on 2013-12-11
Changed in mahara:
importance: Undecided → Medium
Jono Mingard (mingard) on 2013-12-19
tags: added: meal-sized
Jono Mingard (mingard) on 2013-12-20
Changed in mahara:
assignee: nobody → Jono Mingard (mingard)
status: New → In Progress
Jono Mingard (mingard) on 2014-01-03
Changed in mahara:
status: In Progress → Fix Committed
milestone: none → 1.9.0
Jono Mingard (mingard) wrote :

The merged patch causes problems with the help link for Unsubscribe from forum buttons - https://reviews.mahara.org/#/c/2881/ is a fix for this

Changed in mahara:
status: Fix Committed → Won't Fix
status: Won't Fix → In Progress
Aaron Wells (u-aaronw) wrote :

Jono,

Which merged patch are you talking about?

Cheers,
Aaron

Steven (stevens-q) wrote :

How to test
1. Browse to any Mahara page with help links (blue icons in forms)
2. Confirm that a user is able to see help messages near the original link

Test Result
2. Confirmed that a user is able to see help messages near the original link ✔

Catalyst QA Approved ✔
Note: could not reproduce this bug before or after the patch

Reviewed: https://reviews.mahara.org/2881
Committed: http://gitorious.org/mahara/mahara/commit/79685b9efa02ae361441a3f99f6f94cd13b27eef
Submitter: Robert Lyon (<email address hidden>)
Branch: master

commit 79685b9efa02ae361441a3f99f6f94cd13b27eef
Author: Jono Mingard <email address hidden>
Date: Tue Jan 7 17:32:42 2014 +1300

Fix contextual help message positioning (Bug #1259394)

Removed class "rel" from subpages and other key areas since having a parent
with position:relative causes help messages to be displayed in the wrong
place.

Change-Id: Ibe18afcc9515089f7b8b90eb6fa76b7f19e49259
Signed-off-by: Jono Mingard <email address hidden>

Robert Lyon (robertl-9) on 2014-01-12
Changed in mahara:
status: In Progress → Fix Committed
status: Fix Committed → In Progress
status: In Progress → Fix Committed
Jono Mingard (mingard) wrote :

Another problem is the "Learn more" link on a user's wall. I think we need to handle the possibility of relative/absolute positioned elements in an element's ancestry. If MochiKit can't handle it then using jQuery's position() function for calculating the position of the help box might be more appropriate

Changed in mahara:
status: Fix Committed → In Progress

Reviewed: https://reviews.mahara.org/2948
Committed: http://gitorious.org/mahara/mahara/commit/99109004a8492c5e8314b3d43c712a4e20679aa5
Submitter: Robert Lyon (<email address hidden>)
Branch: master

commit 99109004a8492c5e8314b3d43c712a4e20679aa5
Author: Jono Mingard <email address hidden>
Date: Wed Jan 22 12:24:54 2014 +1300

Fixed help message positioning (Bug #1259394)

Now uses jQuery to compute the position of the help box. Combining
.position() and .offset() means that relatively positioned elements
in the help box's ancestry don't affect its final position.

For very small screens, the help box now resizes to fit the screen.
For larger screens it's capped at 500px (rather than using percentage
widths as before) to avoid the width being dependent on parent
elements.

Change-Id: Ib65b9795ac25789d653fd20cbe2b2cd46d2d8c75
Signed-off-by: Jono Mingard <email address hidden>

Jono Mingard (mingard) on 2014-01-22
Changed in mahara:
status: In Progress → Fix Committed
Robert Lyon (robertl-9) on 2014-04-22
Changed in mahara:
status: Fix Committed → Fix Released
To post a comment you must log in.
This report contains Public information  Edit
Everyone can see this information.

Other bug subscribers

Related blueprints