Pairs of buttons from the kit Select/Create | Edit/Clear used in different places are hidden from sighted users by use of CSS.
Code example:
<span class="input-group has-success"
<span class="input-group-append">
<a class="btn btn-primary hasTooltip" id="jform_request_id_select" data-toggle="modal" role="button" href="#ModalSelectArticle_jform_request_id" title="Select or Change article">
<span class="icon-file" aria-hidden="true"></span>
Select
</a>
<a class="btn btn-secondary hasTooltip" id="jform_request_id_new" data-toggle="modal" role="button" href="#ModalNewArticle_jform_request_id" title="New Article">
<span class="icon-new" aria-hidden="true"></span>
Create
</a>
<a class="btn btn-secondary hasTooltip sr-only" id="jform_request_id_edit" data-toggle="modal" role="button" href="#ModalEditArticle_jform_request_id" title="Edit Article">
<span class="icon-edit" aria-hidden="true"></span>
Edit
</a>
<a class="btn btn-secondary sr-only" id="jform_request_id_clear" href="#" onclick="window.processModalParent('jform_request_id'); return false;">
<span class="icon-remove" aria-hidden="true"></span>
Clear
</a>
</span>
</span>
The problem occurs:
There are two accessibility issues:
All buttons in the set are in tab order and can be activated by keyboard users.
All buttons are also announced to users of screen readers. For buttons hidden from sighted users, the sr-only
class is used.
As a result, the keyboard user, including the screen reader user, can try to activate the "Edit" or "Clear" buttons although no item is selected. Action is expected, but no action is performed. In the "User Notes: New/Edit" window, the Edit category window opens without the selected category. This creates a lot of confusion.
Rebuild it using the conditional code (e.g.: if the item is selected, show the buttons Edit/Clear, else.....)
Functionally and visually these are buttons, but in the code they are links. In three cases with an attribute changing role to the button
.
Do not change the native role of the a
tag. If you need to use a button, use the button
.
Use the button
tag in all cases.
Labels |
Added:
?
|
@hardik-codes Please let me know if you are still working on it. If not then I have the code ready
@brianteeman You may go ahead with it by submitting the PR
Status | New | ⇒ | Closed |
Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2019-02-22 17:10:14 |
Closed_By | ⇒ | joomla-cms-bot |
Closed_By | joomla-cms-bot | ⇒ | Quy |
Set to "closed" on behalf of @Quy by The JTracker Application at issues.joomla.org/joomla-cms/23977
Working on it