Mahara

Accessibility problems with select2 4.0

Bug #1492081 reported by Jono M
6
This bug affects 1 person
Affects Status Importance Assigned to Milestone
Mahara
Fix Released
High
Jono M
Mahara 16.04.0
15.10
Fix Released
Undecided
Unassigned

Bug Description

Mahara has recently upgraded to select2 4.0, but there appear to be outstanding accessibility issues with this version, eg. https://github.com/select2/select2/issues/3735 and https://github.com/select2/select2/issues/3744
These need to be evaluated and fixed (more info coming when I've found out how serious they are ...)

In addition, the user manual might need to be updated with a description of the new focus behaviour (needing to press Enter before starting to type) - however, an alternative could be to include this as an accessible description on the page itself.

Affects latest master

See original description
Kristina Hoeppner (kris-hoeppner)
Changed in mahara:
status: New → Confirmed
Revision history for this message
Jono M (jonom) wrote :

The main issue is that screen readers don't read out the options when the combo box is opened (pressing up/down visually changes the focused item but doesn't give any audio feedback) - patch for this incoming

description: updated
Changed in mahara:
assignee: nobody → Jono Mingard (mingard)
status: Confirmed → In Progress
Revision history for this message
Mahara Bot (dev-mahara) wrote : A patch has been submitted for review

Patch for "master" branch: https://reviews.mahara.org/5251

Revision history for this message
Jono M (jonom) wrote :

The keyboard controls for select2 are still ... unusual, so some explanation probably needs to be added to the user manual. Basically:

- To open the selection dropdown, focus on the combo box and press Enter twice. Screen reader users should hear "Please enter 1 or more characters"
- Use the arrow keys to select an option, then press Enter to add it to the list of selected items. A "Remove" button for that item will then appear above the input box

tags: added: usermanualupdate
Revision history for this message
Mahara Bot (dev-mahara) wrote : A change has been merged

Reviewed: https://reviews.mahara.org/5251
Committed: https://git.nzoss.org.nz/mahara/mahara/commit/81f826e7673503ebd86e89076ca971571744d1c8
Submitter: Robert Lyon (<email address hidden>)
Branch: master

commit 81f826e7673503ebd86e89076ca971571744d1c8
Author: Jono Mingard <email address hidden>
Date: Thu Sep 10 15:54:55 2015 +1200

Improve accessibility of select2 (Bug #1492081)

- Modify the AJAX data adapter and search box so that items are
read out when moving up and down through them with the keyboard
- Link select2 instances to the label(s) of the original <select>
- Allow removing tags with the keyboard
- Hide original <select> completely instead of leaving it
accessible to screen readers
- Keep focus position when loading more elements with infinite
scrolling
- Add behat step to set select2 value(s)

behatnotneeded

Change-Id: Ic834c67aae0f2b9e5941a1a494d343074f4443e3

Robert Lyon (robertl-9)
Changed in mahara:
status: In Progress → Fix Committed
Revision history for this message
Mahara Bot (dev-mahara) wrote : A patch has been submitted for review

Patch for "master" branch: https://reviews.mahara.org/5916

Revision history for this message
Aaron Wells (u-aaronw) wrote :

Have we upstreamed these changes back to the Select2 project?

Revision history for this message
Mahara Bot (dev-mahara) wrote : A change has been merged

Reviewed: https://reviews.mahara.org/5916
Committed: https://git.mahara.org/mahara/mahara/commit/f799ade8ba007213e2797935f538e186c059bf50
Submitter: Robert Lyon (<email address hidden>)
Branch: master

commit f799ade8ba007213e2797935f538e186c059bf50
Author: Jono Mingard <email address hidden>
Date: Thu Sep 10 15:54:55 2015 +1200

Improve accessibility of select2 (Bug #1492081)

- Modify the AJAX data adapter and search box so that items are
read out when moving up and down through them with the keyboard
- Link select2 instances to the label(s) of the original <select>
- Allow removing tags with the keyboard
- Hide original <select> completely instead of leaving it
accessible to screen readers
- Keep focus position when loading more elements with infinite
scrolling
- Add behat step to set select2 value(s)

behatnotneeded

Change-Id: I6b380f74525c2ca3c38070744d71d1812cec05b0

Kristina Hoeppner (kris-hoeppner)
Changed in mahara:
milestone: 15.10.0 → 16.04.0
Revision history for this message
Mahara Bot (dev-mahara) wrote : A patch has been submitted for review

Patch for "15.10_STABLE" branch: https://reviews.mahara.org/6185

Revision history for this message
Mahara Bot (dev-mahara) wrote : A change has been merged

Reviewed: https://reviews.mahara.org/6185
Committed: https://git.mahara.org/mahara/mahara/commit/22ceff0fc3acf16566d8fb8da4739772dfb95800
Submitter: Robert Lyon (<email address hidden>)
Branch: 15.10_STABLE

commit 22ceff0fc3acf16566d8fb8da4739772dfb95800
Author: Jono Mingard <email address hidden>
Date: Thu Sep 10 15:54:55 2015 +1200

Improve accessibility of select2 (Bug #1492081)

- Modify the AJAX data adapter and search box so that items are
read out when moving up and down through them with the keyboard
- Link select2 instances to the label(s) of the original <select>
- Allow removing tags with the keyboard
- Hide original <select> completely instead of leaving it
accessible to screen readers
- Keep focus position when loading more elements with infinite
scrolling
- Add behat step to set select2 value(s)

behatnotneeded

Change-Id: I6b380f74525c2ca3c38070744d71d1812cec05b0

Kristina Hoeppner (kris-hoeppner)
Changed in mahara:
status: Fix Committed → Fix Released
Revision history for this message
Mahara Bot (dev-mahara) wrote : A patch has been submitted for review

Patch for "master" branch: https://reviews.mahara.org/11956

Revision history for this message
Mahara Bot (dev-mahara) wrote : A change has been merged

Reviewed: https://reviews.mahara.org/11956
Committed: https://git.mahara.org/mahara/mahara/commit/e55ae36eeedf4bb965b9b5e0c5c4b524c337d3ab
Submitter: Robert Lyon (<email address hidden>)
Branch: master

commit e55ae36eeedf4bb965b9b5e0c5c4b524c337d3ab
Author: Doris Tam <email address hidden>
Date: Wed Aug 25 13:54:49 2021 +1200

Bug 1940893 - Select2 customisation: Improve accessibility of select2 (Bug #1492081)

Compare to https://reviews.mahara.org/#/c/5251/11/htdocs/js/select2/select2.full.js

Change-Id: I7236cf2d9371076fb869a0cb261a8c172c9fb98c

To post a comment you must log in.
This report contains Public information  
Everyone can see this information.
Subscribing...

Other bug subscribers

Remote bug watches

Bug watches keep track of this bug in other bug trackers.