[MGNLUI-3420] Accessibility support in Actionbar component Created: 11/May/15  Updated: 06/Aug/15  Resolved: 01/Jun/15

Status: Closed
Project: Magnolia UI
Component/s: None
Affects Version/s: None
Fix Version/s: 5.3.10, 5.4.1

Type: Improvement Priority: Major
Reporter: Aleksandr Pchelintcev Assignee: Tu Bo Xuan
Resolution: Fixed Votes: 0
Labels: WAI-ARIA, accessibility, actionbar
Remaining Estimate: 0d
Time Spent: 4.25d
Original Estimate: 2.75d

Attachments: PNG File Screen Shot 2015-05-26 at 5.54.01 PM.png    
Issue Links:
relation
is related to MGNLUI-3417 A user with impaired eyesight is able... Closed
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Date of First Response:

 Description   

Action labels of the Actionbar component aren't HTML input of any kind and thus are not recognisable by screen readers.

  • Similar Vaadin component com.vaadin.client.ui.VMenuBar doesn't seem to provide any WAI-ARIA support.
  • It would be hard to come up with any kind of link types here since that's not how the actions work in admin central.
  • Logical solution - investigate whether the reader devices would be satisfied if the actions were exposed as <input > elements (e.g. buttons).
  • We could even have duplicate controls in there and the buttons hidden with CSS (e.g. see com.vaadin.client.ui.aria.AriaHelper#setVisibleForAssistiveDevicesOnly).


 Comments   
Comment by Tu Bo Xuan [ 25/May/15 ]

Hi Sasha,

Follow your suggestion, I'm trying to define a hidden button element together with specific action element. It worked. However, I'm checking myself code to make sure all work Okie.

Cheers,
Tu Bo.

Comment by Tu Bo Xuan [ 26/May/15 ]

Hi Sasha,

After testing with Chrome and Firefox. I got different results as below:

  • Firefox: All are working fine. Action in actionBar will be navigated by pressing tabs.
  • Chrome: An "Div" element inside search widget did restrict user to tab to specific action in action bar (see uploaded picture). That caused by Chrome/Firefox reacts differently with "display:none". Im investigating how to overcome this issue.

Please give your idea if any.

Cheers,
Tu Bo.

Comment by Tu Bo Xuan [ 01/Jun/15 ]

Temporarily display style "display: none" of clearButtonSearch to allow "tab" working.

Generated at Mon Feb 12 09:06:26 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.