JEvents List of Events triggers accessibility issue: "Ensures links have discernible text"

Hello Eddie,

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

Many thanks
Tony

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?

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

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

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

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

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

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

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)

Hi Eddie,

Sorry about that. Please extract this add it to:

templates/your_template/html/

Many thanks
To y

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

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