?
avatar zwiastunsw
zwiastunsw
22 Feb 2019

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:

  • in various types of menu items, e.g. Single article: Select Article* field
  • on page User Notes: New/Edit - Category* field
  • on page Modules: New/Edit Menu - Base Item field
    buttons-select

There are two accessibility issues:

Wrong hiding of the buttons

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.....)

Using links instead of buttons

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.

avatar zwiastunsw zwiastunsw - open - 22 Feb 2019
avatar joomla-cms-bot joomla-cms-bot - change - 22 Feb 2019
Labels Added: ?
avatar joomla-cms-bot joomla-cms-bot - labeled - 22 Feb 2019
avatar zwiastunsw zwiastunsw - change - 22 Feb 2019
The description was changed
avatar zwiastunsw zwiastunsw - edited - 22 Feb 2019
avatar zwiastunsw zwiastunsw - change - 22 Feb 2019
The description was changed
avatar zwiastunsw zwiastunsw - edited - 22 Feb 2019
avatar zwiastunsw zwiastunsw - change - 22 Feb 2019
The description was changed
avatar zwiastunsw zwiastunsw - edited - 22 Feb 2019
avatar hardik-codes
hardik-codes - comment - 22 Feb 2019

Working on it

avatar brianteeman
brianteeman - comment - 22 Feb 2019

@hardik-codes Please let me know if you are still working on it. If not then I have the code ready

avatar hardik-codes
hardik-codes - comment - 22 Feb 2019

@brianteeman You may go ahead with it by submitting the PR

avatar brianteeman
brianteeman - comment - 22 Feb 2019

Please test #23985

avatar joomla-cms-bot joomla-cms-bot - change - 22 Feb 2019
Status New Closed
Closed_Date 0000-00-00 00:00:00 2019-02-22 17:10:14
Closed_By joomla-cms-bot
avatar Quy Quy - change - 22 Feb 2019
Closed_By joomla-cms-bot Quy
avatar joomla-cms-bot joomla-cms-bot - close - 22 Feb 2019
avatar joomla-cms-bot
joomla-cms-bot - comment - 22 Feb 2019

Set to "closed" on behalf of @Quy by The JTracker Application at issues.joomla.org/joomla-cms/23977

Add a Comment

Login with GitHub to post a comment