? ? Failure

User tests: Successful: Unsuccessful:

avatar brianteeman
brianteeman
5 May 2017

This fixes a very big a11y issue.

Issue

In all list views we start the row with a check box. This check box has no label which is not good AND when using assistive technology such as a screen reader it will only indicate the word "select". It doesn't indicate what you are selecting. As the title (the item you are selecting) is several steps away from the select box you are stuck with a select with no meaning.

Fixing the issue

  • add a label for the input
  • add hidden text for the label (screenreader only with the class element invisible)
  • add the title of the item in the label eg Select Your ArticleName

Now a screenreader will see this chick box as "Select '%ArticleName%"

we already do something similar in the actions dropdown - see https://github.com/joomla/joomla-cms/blob/staging/libraries/cms/html/actionsdropdown.php#L41

reference for the a11y technique used http://www.coolfields.co.uk/2011/04/accessible-forms-should-every-input-have-a-label/

Backwards Compatible

This is fully backwards compatible

Documentation Changes

If there is documentation how to use grid then it will need updating to provide info about the new optional param

avatar brianteeman brianteeman - open - 5 May 2017
avatar brianteeman brianteeman - change - 5 May 2017
Status New Pending
avatar joomla-cms-bot joomla-cms-bot - change - 5 May 2017
Category Libraries
avatar brianteeman brianteeman - change - 5 May 2017
The description was changed
avatar brianteeman brianteeman - edited - 5 May 2017
avatar brianteeman brianteeman - change - 5 May 2017
The description was changed
avatar brianteeman brianteeman - edited - 5 May 2017
avatar brianteeman brianteeman - change - 5 May 2017
The description was changed
avatar brianteeman brianteeman - edited - 5 May 2017
avatar brianteeman brianteeman - change - 5 May 2017
The description was changed
avatar brianteeman brianteeman - edited - 5 May 2017
avatar brianteeman brianteeman - change - 5 May 2017
Status Pending Closed
Closed_Date 0000-00-00 00:00:00 2017-05-05 18:32:49
Closed_By brianteeman
Labels Added: ?
avatar brianteeman brianteeman - close - 5 May 2017
avatar brianteeman brianteeman - close - 5 May 2017
avatar brianteeman brianteeman - change - 5 May 2017
The description was changed
avatar brianteeman brianteeman - edited - 5 May 2017
avatar brianteeman brianteeman - change - 5 May 2017
Status Closed New
Closed_Date 2017-05-05 18:32:49
Closed_By brianteeman
avatar brianteeman brianteeman - change - 5 May 2017
Status New Pending
avatar brianteeman brianteeman - reopen - 5 May 2017
avatar brianteeman brianteeman - reopen - 5 May 2017
avatar joomla-cms-bot joomla-cms-bot - change - 5 May 2017
Category Libraries Administration com_banners com_content Libraries
avatar brianteeman brianteeman - change - 5 May 2017
The description was changed
avatar brianteeman brianteeman - edited - 5 May 2017
avatar brianteeman brianteeman - change - 5 May 2017
The description was changed
avatar brianteeman brianteeman - edited - 5 May 2017
avatar brianteeman brianteeman - change - 5 May 2017
The description was changed
avatar brianteeman brianteeman - edited - 5 May 2017
beb8ad4 5 May 2017 avatar brianteeman tags
avatar joomla-cms-bot joomla-cms-bot - change - 5 May 2017
Category Libraries Administration com_banners com_content Administration com_banners com_categories com_checkin com_contact com_content com_fields com_finder com_installer com_languages com_menus com_messages com_modules com_newsfeeds com_plugins com_redirect com_tags com_templates com_users
avatar brianteeman brianteeman - change - 5 May 2017
Title
[a11y] JHtml grid improvements (Work in progress)
[a11y] JHtml grid improvements
avatar brianteeman brianteeman - edited - 5 May 2017
avatar brianteeman brianteeman - change - 5 May 2017
Title
[a11y] JHtml grid improvements (Work in progress)
[a11y] JHtml grid improvements
avatar brianteeman brianteeman - change - 5 May 2017
The description was changed
avatar brianteeman brianteeman - edited - 5 May 2017
avatar brianteeman brianteeman - change - 5 May 2017
The description was changed
avatar brianteeman brianteeman - edited - 5 May 2017
avatar brianteeman
brianteeman - comment - 5 May 2017

@zero-24 can you advise on the best way to make the change required by drone please

avatar brianteeman
brianteeman - comment - 5 May 2017

@zero-24 ignore that request - i figured it out

avatar zero-24
zero-24 - comment - 5 May 2017

This is fully backwards compatible

This one looks not B/c currently as we reorder the options to be passed. I would agree if we add the new option at the end of the method signature with a default value but currently this looks for me as a b/c break.

avatar brianteeman
brianteeman - comment - 5 May 2017

:( any suggestions to address that

avatar zero-24
zero-24 - comment - 5 May 2017

Like i said above move the new option (title) to the end of the method signature with a default value :)

avatar brianteeman
brianteeman - comment - 5 May 2017

@zero-24 unfortunately that doesn't work or I would have done it unless I misunderstood

avatar zero-24
zero-24 - comment - 5 May 2017

It should work ;) i can send you a PR tomorrow.

avatar brianteeman
brianteeman - comment - 5 May 2017

I tested this PR with jevents and acymailing which both use grid and it worked fine as far as I could see

avatar brianteeman
brianteeman - comment - 5 May 2017

Discovered a bug in some views where they dont use item->title but item->name such as com_contact

Fixed

avatar brianteeman
brianteeman - comment - 6 May 2017

I understand the changes I need to make for b/c now.and will do it this afternoon

avatar zero-24
zero-24 - comment - 6 May 2017

?

avatar joomla-cms-bot joomla-cms-bot - change - 6 May 2017
Category Administration com_banners com_content com_categories com_checkin com_contact com_fields com_finder com_installer com_languages com_menus com_messages com_modules com_newsfeeds com_plugins com_redirect com_tags com_templates com_users Administration com_banners com_categories com_checkin com_contact com_content com_contenthistory com_fields com_finder com_installer com_languages com_menus com_messages com_modules com_newsfeeds com_plugins com_redirect com_tags com_templates com_users
bf9b5e0 6 May 2017 avatar brianteeman oops
avatar brianteeman
brianteeman - comment - 6 May 2017

thanks @C-Lodder and @dgt41 should be ready for testing now

avatar brianteeman brianteeman - change - 6 May 2017
The description was changed
avatar brianteeman brianteeman - edited - 6 May 2017
avatar brianteeman
brianteeman - comment - 7 May 2017

@yvesh @rdeutz does this need unit tests?

avatar rdeutz
rdeutz - comment - 7 May 2017

No, testing html output doesn't makes so much sense.

avatar brianteeman brianteeman - change - 7 May 2017
The description was changed
avatar brianteeman brianteeman - edited - 7 May 2017
avatar brianteeman brianteeman - change - 7 May 2017
The description was changed
avatar brianteeman brianteeman - edited - 7 May 2017
avatar brianteeman
brianteeman - comment - 7 May 2017

ok - thanks - wasnt sure as it touched a library file - thanks for confirming

avatar Quy
Quy - comment - 7 May 2017

Please check if these files need to be updated. Thanks.
\administrator\components\com_cache\views\cache\tmpl\default.php (line 59)
\administrator\components\com_installer\views\discover\tmpl\default_item.php (line 14)
\installation\view\languages\tmpl\default.php (line 95)
\administrator\templates\hathor\html\com_cache\cache\default.php (liine 64)
\administrator\components\com_media\views\medialist\tmpl\details_folders.php (line 19)
\administrator\components\com_media\views\medialist\tmpl\thumbs_folders.php (line 18)
\administrator\templates\isis\html\com_media\medialist\thumbs_folders.php (line 18)
\installation\view\languages\tmpl\default.php (line 95)

avatar brianteeman
brianteeman - comment - 8 May 2017

@Quy
Missing these was deliberate as media manager is being replaced and hathor is virtually dead

\administrator\templates\hathor\html\com_cache\cache\default.php (liine 64)
\administrator\components\com_media\views\medialist\tmpl\details_folders.php (line 19)
\administrator\components\com_media\views\medialist\tmpl\thumbs_folders.php (line 18)
\administrator\templates\isis\html\com_media\medialist\thumbs_folders.php (line 18)

These ones are not using grid.id and beyond the scope of this PR
\administrator\components\com_cache\views\cache\tmpl\default.php (line 59)
\administrator\components\com_installer\views\discover\tmpl\default_item.php (line 14)
\installation\view\languages\tmpl\default.php (line 95)
\installation\view\languages\tmpl\default.php (line 95)

avatar Quy
Quy - comment - 8 May 2017

Please note that with the Select, the title is Red & Blue and the rest is Red & Blue. I am not sure what is the best way to escape the title value. Maybe escape it in the parameter like this:
<?php echo JHtml::_('grid.id', $i, $item->id, false, 'cid', 'cb', $this->escape($item->title)); ?>

<td class="center">
        <label for="cb0"><span class="element-invisible">Select Red & Blue</span></label><input type="checkbox" id="cb0" name="cid[]" value="2" onclick="Joomla.isChecked(this.checked);" />							</td>
<td class="center">
        <div class="btn-group">
                <a class="btn btn-micro active hasTooltip" href="javascript:void(0);" onclick="return listItemTask('cb0','tags.unpublish')" title="Unpublish Item"><span class="icon-publish"></span></a>									<button data-toggle="dropdown" class="dropdown-toggle btn btn-micro"><span class="caret"></span><span class="element-invisible">Actions for: Red &amp; Blue</span></button><ul class="dropdown-menu"><li><a href = "javascript://" onclick="listItemTask('cb0', 'tags.archive')"><span class="icon-archive"></span> Archive</a></li><li><a href = "javascript://" onclick="listItemTask('cb0', 'tags.trash')"><span class="icon-trash"></span> Trash</a></li></ul>								</div>
</td>
<td>
                                                                                                                                                                                                                <a href="/joomla-cms/administrator/index.php?option=com_tags&amp;task=tag.edit&amp;id=2">
                        Red &amp; Blue</a>
                                                                        <span class="small" title="red">
                                                                                                (<span>Alias</span>: red)																	</span>
</td>
avatar C-Lodder
C-Lodder - comment - 8 May 2017

@Quy think it would be best to do it in the function itself. Means less code too.

avatar Quy
Quy - comment - 29 May 2017

@C-Lodder In another call, the escape is done outside the function:
echo JHtml::_('actionsdropdown.render', $this->escape($item->title));

avatar brianteeman
brianteeman - comment - 14 Jun 2017

I dont see a reason for this not to be merged - the comments above appear to be beyond the scope of this PR

avatar brianteeman brianteeman - change - 14 Jun 2017
Status Pending Closed
Closed_Date 0000-00-00 00:00:00 2017-06-14 19:53:40
Closed_By brianteeman
avatar brianteeman brianteeman - close - 14 Jun 2017
avatar brianteeman brianteeman - close - 14 Jun 2017
avatar brianteeman brianteeman - change - 15 Jun 2017
Status Closed New
Closed_Date 2017-06-14 19:53:40
Closed_By brianteeman
avatar brianteeman brianteeman - change - 15 Jun 2017
Status New Pending
avatar brianteeman brianteeman - reopen - 15 Jun 2017
avatar brianteeman brianteeman - reopen - 15 Jun 2017
avatar Quy
Quy - comment - 16 Jun 2017

To reproduce, edit an article and click Versions button.

PHP Notice:  Undefined property: stdClass::$id in C:\xampp\htdocs\joomla-cms\administrator\components\com_contenthistory\views\history\tmpl\modal.php on line 145
avatar C-Lodder
C-Lodder - comment - 9 Jan 2018

What's happening with this?

avatar brianteeman
brianteeman - comment - 9 Jan 2018

@C-Lodder I had hope the a11y team would have commented

avatar brianteeman
brianteeman - comment - 25 Mar 2018

Lost interest and the a11y team show no interest in improving a11y

avatar brianteeman brianteeman - change - 25 Mar 2018
Status Pending Closed
Closed_Date 0000-00-00 00:00:00 2018-03-25 14:31:16
Closed_By brianteeman
avatar brianteeman brianteeman - close - 25 Mar 2018
avatar brianteeman
brianteeman - comment - 6 Jun 2019

re-opening to see if it is still valid

avatar brianteeman brianteeman - change - 6 Jun 2019
Status Closed New
Closed_Date 2018-03-25 14:31:16
Closed_By brianteeman
avatar brianteeman brianteeman - change - 6 Jun 2019
Status New Pending
avatar brianteeman brianteeman - reopen - 6 Jun 2019
avatar franz-wohlkoenig franz-wohlkoenig - change - 6 Jun 2019
Title
[a11y] JHtml grid improvements
JHtml grid improvements
avatar franz-wohlkoenig franz-wohlkoenig - edited - 6 Jun 2019
avatar brianteeman
brianteeman - comment - 6 Jun 2019

as it was for staging and I did it for 4 already closing permanently now ;)

avatar brianteeman brianteeman - change - 6 Jun 2019
Status Pending Closed
Closed_Date 0000-00-00 00:00:00 2019-06-06 09:46:06
Closed_By brianteeman
Labels Added: ?
avatar brianteeman brianteeman - close - 6 Jun 2019

Add a Comment

Login with GitHub to post a comment