? Success

User tests: Successful: 0 Unsuccessful: 0

avatar LivioCavallo
LivioCavallo
23 Aug 2017

We expect that a page, listing tagged elements ("Tagged Items" menu item type), would "accessible" in any configuration of menuitem options.

Summary of Changes

In a "Tagged Items" menuitem, in case:

  • page_heading (that is contained in <h1> element) is shown and
  • tag_title (that is contained in <h2> element) is set by user not to be shown,

modify code to emit tag_title (in <h2> element) anyway, using the hidden class attribute, so assuring that a <h2> element follows <h1> element and at the same time having tag_tile not shown (as it has the hidden class attribute) as desired by user.
All subsequent tagged items code remains untouched: tagged items are listed in <h3> elements (see default_items.php).
So the elements sequence will begin anyway (with any menuitem options settings) with a <h1> or a <h2> element, followed by <h2> element(s), so there will be no 'hole' in header elements, and the accessibility 'header nesting' errors will be fixed.

Testing Instructions

  • Create some items (articles, contacts, ...) and tag them with "Joomla" tag.
  • Create a "Tagged Items" type menuitem.
  • In menuitem's "Detalis" options group, set "Tag*" field to "Joomla".
  • In menuitem's "Tag Options" options group set "Show Tag Name" to "Hide".
  • In menuitem's "Page Display" options group set "Show Page Heading" to "Yes".

Expected result

The page at that menuitem should pass accessibility validation (https://achecker.ca/checker/index.php)

Actual result

The page is not accessible.
There is a header nesting error (https://achecker.ca/checker/index.php), as a <h3> element (tagged item) follows <h1> element (page_header) with no <h2> element (Tag Name, tag_title) in between.

avatar joomla-cms-bot joomla-cms-bot - change - 23 Aug 2017
Category com_tags Front End
avatar LivioCavallo LivioCavallo - open - 23 Aug 2017
avatar LivioCavallo LivioCavallo - change - 23 Aug 2017
Status New Pending
avatar brianteeman
brianteeman - comment - 23 Aug 2017

shouldnt this be after the if and not before

Also it would be better to only have class=hidden and then create an override for beez

avatar LivioCavallo
LivioCavallo - comment - 23 Aug 2017
  1. I think not. In fact there is no problem if the header elements start with <h2> or with <h3>. The problem is the sequence <h1> -> <h3>. So the workaround is needed only when page_heading, <h1>, is displayed.

  2. Ok. Tks.

avatar brianteeman
brianteeman - comment - 23 Aug 2017

either i completely misunderstand this code or your new code is h2 when it should be h1

avatar LivioCavallo
LivioCavallo - comment - 23 Aug 2017

<h3> elements are always present: they are tagged items.

When Page_heading <h1> is set to be displayed, this PR assures it is followed by a hidden <h2>, even if menuitem param says not to display the tag_name, <h2>.

When Page_heading <h1> is not displayed there is no need for this PR workaround, in fact:

  • if tag_name <h2> is set to be displayed then the sequence will be <h2> -> <h3>;
  • if tag_name <h2> is set not to be displayed the sequence will begin with <h3>.

In bothe cases the sequence is ok; in fact it is a11y valid if the sequence begins with <h2> or with <h3>.

Said in other words, the code does what's needed to have one of these valid sequences:

  1. <h1> (page_heading) -> <h2> hidden (tag name) -> <h3> (tagged items)
  2. <h1> (page_heading) -> <h2> (tag name) -> <h3> (tagged items)
  3. <h2> (tag name) -> <h3> (tagged items)
  4. <h3> (tagged items)

This covers all the permutations of the two options involved.

All the section can be rewritten using an additional variable, this way:

<?php if ($this->params->get('show_page_heading')) : ?>
	<h1>
		<?php echo $this->escape($this->params->get('page_heading')); ?>
	</h1>
<?php endif; ?>
<?php $a11y_hide_h2_fix = ( $this->params->get('show_page_heading') && !($this->params->get('show_tag_title', 1)) ) ? ' class="hidden"' : ''; ?>
<h2 <?php echo $a11y_hide_h2_fix; ?> >
	<?php echo JHtml::_('content.prepare', $this->tags_title, '', 'com_tag.tag'); ?>
</h2>
avatar LivioCavallo
LivioCavallo - comment - 23 Aug 2017

For beez3, is it better to:

  1. add the .hidden {display: none; visibility: hidden; } class to templates\beez3\css\layout.css or
  2. make a view override, just to replace the hidden class attribute with unseen?

I'd prefer 1.

avatar joomla-cms-bot joomla-cms-bot - change - 23 Aug 2017
Category com_tags Front End com_tags Front End Templates (site)
avatar LivioCavallo LivioCavallo - change - 23 Aug 2017
Labels Added: ?
avatar LivioCavallo
LivioCavallo - comment - 29 Aug 2017

I tested it in J! 3.7.4 / 3.7.5 and 3.8beta. It's working.
Did someone else test it?

avatar franz-wohlkoenig
franz-wohlkoenig - comment - 5 Nov 2017

@LivioCavallo can you please give exact Test Instructions in your first Comment?

avatar LivioCavallo LivioCavallo - change - 5 Jan 2018
The description was changed
avatar LivioCavallo LivioCavallo - edited - 5 Jan 2018
avatar LivioCavallo
LivioCavallo - comment - 5 Jan 2018

@franz-wohlkoenig I gave detailed test instructions; are them ok now?

avatar drmenzelit
drmenzelit - comment - 23 Mar 2022

Sorry that it took so long to respond. Can you please check if the problem is still present in Joomla 4 and rebase the PR to the 4.2-dev branch? In the meantime I'm closing the pr, when ready please reopen so we can properly test it. Thanks for your contribution, making Joomla better.

avatar drmenzelit drmenzelit - close - 23 Mar 2022
avatar drmenzelit drmenzelit - change - 23 Mar 2022
Status Pending Closed
Closed_Date 0000-00-00 00:00:00 2022-03-23 11:03:24
Closed_By drmenzelit
Labels Added: ?
Removed: ?

Add a Comment

Login with GitHub to post a comment