By rusasadmins on Monday, 29 July 2019
Replies 12
Likes 0
Views 1.2K
Votes 0
The Deque WorldSpace Attest DevTools plugin for Chrome detects the following accessibility issue on JEvents event lists with pagination:

Links must have discernible text

Impact: serious
Learn more
Element location
a[data-original-title="Next"]
Element source
<a class="hasTooltip" title="" href="#" onclick="document.adminForm.limitstart.value=20; Joomla.submitform();return false;" data-original-title="Next"> <span class="icon-step-forward icon-next"></span> </a>
To solve this violation, you need to:
Fix at least one (1) of these issues:
Element does not have text that is visible to screen readers

aria-label attribute does not exist or is empty

aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty

Element's default semantics were not overridden with role="presentation"

Element's default semantics were not overridden with role="none"

And

Fix the following:
Element is in tab order and does not have accessible text


The issue is being triggered by the two double arrows within the pagination toolbar under the event list. The arrows to advance one page and to go to the end cause this error. (The arrows pointing to the left, to go back one page or to the beginning, do not cause this error).

This occurs with JEvents 3.4.50 and the FlatPlus layout (version 3.4.15) on Joomla! 3.9.10

Example: https://www.cinemastudies.rutgers.edu/news-a-events/year.listevents/2017/7/29/-

Also see attached screenshot.

Thanks,
Eddie
Hello Eddie,

JEvents uses Joomla! Pagination. Please check the pagination.php file in your templates html directory.

Many thanks
Tony
·
5 years ago
·
0 Likes
·
0 Votes
·
0 Comments
·
Thanks for the reply. It does not seem that JEvents is using the same pagination as core Joomla!.

I set up a Joomla! category blog and the pagination uses text, instead of arrows:

https://irw.rutgers.edu/featured-books-test

JEvents uses arrows instead of text for "First," "Prev," "Next" and "End":

https://irw.rutgers.edu/news-events/calendar/year.listevents/2018/07/26/

The "First" and "Prev" arrows have alt txt (but no tooltips), while "Next" and "End" have tooltips (but no alt txt).

How can I get JEvents lists to use text pagination instead of arrows?
·
5 years ago
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello,

Firstly please make sure these changes are applied in your environment:

https://github.com/JEvents/JEvents/pull/431/files

Ok we use the core function but render our own pagination

Can you override

/components/com_jevents/layouts/joomla/pagination/

link.php
links.php

to match your themes :-)

Many thanks
Tony
·
5 years ago
·
0 Likes
·
0 Votes
·
0 Comments
·
OK, thanks for the reply. A few questions:

1. The changes proposed at: https://github.com/JEvents/JEvents/pull/431/files

The file names do not match the paths I am seeing in the Joomla! installation. For example, the above page refers to:

component/site/assets/css/eventsadmin.css

but that path does not exist in the Joomla! directory. I do see eventsadmin.css listed at:

administrator/components/com_jevents/assets/css/eventsadmin.css
components/com_jevents/assets/css/eventsadmin.css

Is the second file location the correct one to check?

2. Is it possible for JEvents to include the accessibility fixes in

/components/com_jevents/layouts/joomla/pagination/link.php
/components/com_jevents/layouts/joomla/pagination/links.php

rather than relying on every site admin to create overrides?

Thanks,
Eddie
·
5 years ago
·
0 Likes
·
0 Votes
·
0 Comments
·
Additional:

I am inspecting the code of:

/components/com_jevents/layouts/joomla/pagination/link.php
/components/com_jevents/layouts/joomla/pagination/links.php

and it is not clear to me what code needs to be overridden to solve this issue.

All we really need to do, to resolve this issue, is to provide an "alt txt" for the "Next" and "End" icons in the pagination. They already exist for the "Start" and "Back" icons, so I don't believe a major change in code would be required. However, I cannot figure out where those "alt txts" are being set. Can this be fixed in the JEvents code for the next release or for a future release?

Thanks,
Eddie
·
5 years ago
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello,

I've taken a more indepth look and we use the native joomla pagination layout. We have tweaked it slightly but still include the title.

Can I get super user logins to your site to review your theme / our setup please?

Many thanks
Tony
·
5 years ago
·
0 Likes
·
0 Votes
·
0 Comments
·
Tony,

Our organization's security policy prevents us from granting access to users outside our organization.

Please let me know which settings and code you need to see, and I'll post it here.

Thanks,
Eddie
·
5 years ago
·
0 Likes
·
0 Votes
·
0 Comments
·
Tony,

Additional:

I tried to solve this with an override, but it's not working. This is what I did:

1. Created these folder and files within our template folder:


  • html\com_jevents\layouts
  • html\com_jevents\layouts\pagination
  • html\com_jevents\layouts\pagination\crawlerlink.php
  • html\com_jevents\layouts\pagination\link.php


2. Adapted code of html\com_jevents\layouts\pagination\crawlerlink.php from components\com_jevents\layouts\pagination\crawlerlink.php as follows:


<?php
/**
* @package Joomla.Site
* @subpackage Layout
*
* @copyright Copyright (C) 2005 - 2014 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/

defined('JPATH_BASE') or die;

$item = $displayData['data'];

$display = $item->text;

switch ((string) $item->text)
{
// Check for "Start" item
case JText::_('JLIB_HTML_START') :
$icon = "icon-backward";
break;

// Check for "Prev" item
case $item->text == JText::_('JPREV') :
$item->text = JText::_('JPREVIOUS');
$icon = "icon-step-backward";
break;

// Check for "Next" item
case JText::_('JNEXT') :
$item->text = JText::_('JNEXT');
$icon = "icon-step-forward";
break;

// Check for "End" item
case JText::_('JLIB_HTML_END') :
$item->text = JText::_('JLIB_HTML_END');
$icon = "icon-forward";
break;

default:
$icon = null;
break;
}

if ($icon !== null)
{
$display = '<i class="' . $icon . '"></i>';
}

if ($displayData['active'])
{
if ($item->base > 0)
{
$limit = 'limitstart.value=' . $item->base;
}
else
{
$limit = 'limitstart.value=0';
}

$cssClasses = array();

$title = '';

if (!is_numeric($item->text))
{
// Always Joomla 3+
JHtml::_('bootstrap.tooltip');
$cssClasses[] = 'hasTooltip';
$title = ' title="' . $item->text . '" ';
}

$onClick = 'document.adminForm.' . $item->prefix . 'limitstart.value=' . ($item->base > 0 ? $item->base : '0') . '; Joomla.submitform();return false;';
}
else
{
$class = (property_exists($item, 'active') && $item->active) ? 'active' : 'disabled';
}
?>
<?php if ($displayData['active']) : ?>
<li>
<a class="<?php echo implode(' ', $cssClasses); ?>" <?php echo $title; ?> href="<?php echo $item->link;?>">
<?php echo $display; ?>
</a>
</li>
<?php else : ?>
<li class="<?php echo $class; ?>">
<span><?php echo $display; ?></span>
</li>
<?php endif;


The inserted lines are:


31. $item->text = JText::_('JNEXT'); (
...
37. $item->text = JText::_('JLIB_HTML_END');


3. Adapted code of html\com_jevents\layouts\pagination\link.php from components\com_jevents\layouts\pagination\link.php as follows:


<?php
/**
* @package Joomla.Site
* @subpackage Layout
*
* @copyright Copyright (C) 2005 - 2014 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/

defined('JPATH_BASE') or die;

$item = $displayData['data'];

$display = $item->text;

switch ((string) $item->text)
{
// Check for "Start" item
case JText::_('JLIB_HTML_START') :
$icon = "icon-backward";
break;

// Check for "Prev" item
case $item->text == JText::_('JPREV') :
$item->text = JText::_('JPREVIOUS');
$icon = "icon-step-backward";
break;

// Check for "Next" item
case JText::_('JNEXT') :
$item->text = JText::_('JNEXT');
$icon = "icon-step-forward";
break;

// Check for "End" item
case JText::_('JLIB_HTML_END') :
$item->text = JText::_('JLIB_HTML_END');
$icon = "icon-forward";
break;

default:
$icon = null;
break;
}

if ($icon !== null)
{
$display = '<i class="' . $icon . '"></i>';
}

if ($displayData['active'])
{
if ($item->base > 0)
{
$limit = 'limitstart.value=' . $item->base;
}
else
{
$limit = 'limitstart.value=0';
}

$cssClasses = array();

$title = '';

if (!is_numeric($item->text))
{
// Always Joomla 3+
JHtml::_('bootstrap.tooltip');
$cssClasses[] = 'hasTooltip';
$title = ' title="' . $item->text . '" ';
}

$onClick = 'document.adminForm.' . $item->prefix . 'limitstart.value=' . ($item->base > 0 ? $item->base : '0') . '; Joomla.submitform();return false;';
}
else
{
$class = (property_exists($item, 'active') && $item->active) ? 'active' : 'disabled';
}
?>
<?php if ($displayData['active']) : ?>
<li>
<a class="<?php echo implode(' ', $cssClasses); ?>" <?php echo $title; ?> href="#" onclick="<?php echo $onClick; ?>">
<?php echo $display; ?>
</a>
</li>
<?php else : ?>
<li class="<?php echo $class; ?>">
<span><?php echo $display; ?></span>
</li>
<?php endif;


Inserted lines:

25. $item->text = JText::_('JPREVIOUS');
...
31. $item->text = JText::_('JNEXT');


I am unsure if I am overriding the wrong files, putting the overrides in the wrong location within the template, using bad PHP, or some combination of the above.

Thanks,
Eddie
·
5 years ago
·
0 Likes
·
0 Votes
·
0 Comments
·
Just checking in... can anyone provide advice on how I can successfully add an override to resolve the accessibility issue with JEvents pagination?

Thanks,
Eddie (Rutgers)
·
5 years ago
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Eddie,

Sorry about that. Please extract this add it to:

templates/your_template/html/

Many thanks
To y
·
5 years ago
·
0 Likes
·
0 Votes
·
0 Comments
·
Tony,

Thanks; this does work - however, it changes the pagination style for the entire website, not just JEvents. We are not having this problem on core Joomla! pages. Is there any way to restrict the override to JEvents lists?

Regards,
Eddie
·
5 years ago
·
0 Likes
·
0 Votes
·
0 Comments
·
Can you do a Pull request for your changes on the core file? see:

https://github.com/JEvents/JEvents/tree/jQuery/component/site/layouts/pagination
·
5 years ago
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post