Geomap datatable aria label issue

[DMcDona]

Hi all,

I'm not sure when exactly it started occurring, but fairly recently it seems that Geomap popups are showing a new (less than useful) heading for popups.
From the Geomap example page:

My assumption on issue:
DataTables likely was updated recently to set an aria-label of "This table provides a sorting feature...", unfortunately, this field is also used by Geomaps to populate the popup's heading/title. It also seems that this aria-label overrides any set in the HTML/before WET initialization.

For example, the raw source of the default layer is: <table id="cities" aria-label="Points" class="table wb-tables"> which is replaced with
<table id="cities" aria-label="This table provides a sorting feature via the buttons across the column header row with only one instance visible at a time." class="table wb-tables wb-init wb-tables-inited dataTable no-footer".....
on initialization.

Thanks so much!

[mercury64]

This appears to be a timing issue, and happens intermittently.
If you refresh the page many times, it will render correctly.
Also appears to be an issue only when there are more than one geomap with more than one table on the page, which is what the example page has.

If wb-tables completes before wb-geomap(specifically the legend), then the legend gets the aria-label of the table for the title. If wb-geomap completes first, it gets the correct title, as wb-tables changes the aria-label to the language of i18n.

I see a couple of solutions:

• 1: change the legend to use the table attribute title not aria-label, then set the table title. This would be a change to geomap plugin and the table html.
• 2: change the table plugin to not include the default aria-label IF the aria-label is already set in the table html. This would override the default behavior of the table plugin adding the default aria-label.

Hopefully this helps.

[DMcDona]

Thanks @mercury64. Just one addition/correction that it appears to be an issue on pages with just one map and table as well, unless something else is at play here: https://parks.canada.ca/culture/designation/phare-lighthouse

As you pointed out it works correctly on some refreshes, but on others it does pull in the aria-label as well.

[mercury64]

This is a timing issue then, not because multiple tables on same page.
The probelm is where wb-tables updates the already set aria-label.
Page html table has aria-label="Heritage lighthouses" set.
wb-tables executes and changes the aria-label on line 252 of the table.js source code:
$elm.attr( "aria-label", i18nText.tblFilterInstruction );
When wb-geomap executes, it then uses the tables aria-label, which is now the filter instruction.

This fixes the issue line 252:

// if aria-label is not defined, set to the i18n default tblFilterInstruction
if( $elm.attr( "aria-label") === undefined ) {
	$elm.attr( "aria-label", i18nText.tblFilterInstruction );
}

I'm not sure if this breaks accessibility testing, or if all tables must have the default tblFilterInstruction.

I would assume that if the html table aria-label is set, the plugin should not change that. The plugin should only add the default aria-label only if the aria-label is not set in the html table.

[mercury64]

I used this code to debug:

	<script>
		(function ($, wb) {
			"use strict";
			
			$( ".wb-tables" ).on( "wb-ready.wb-tables", function( event ) {
				console.log("Tables Ready!!");
				
			});

			$( ".wb-geomap" ).on( "wb-ready.wb-geomap", function( event, map ) {
				console.log("Geomaps Ready!!");

			});
		})(jQuery, wb);
	</script>

Javascript console output with page incorrectly displaying:

08:45:53.281 Tables Ready!! geomap-filter.html:595:13
08:45:53.306 Geomaps Ready!! geomap-filter.html:600:13

Javascript console output with page correctly displaying:

08:48:21.957 Geomaps Ready!! geomap-filter.html:600:13
08:48:21.967 Tables Ready!! geomap-filter.html:595:13

Hopefully that can help more.