Accessibility: Add missing aria-label / tooltip attributes on the advanced search

This commit is contained in:
Molkobain
2021-06-12 23:34:00 +02:00
parent ff05a1d35e
commit 18a4867b4d
18 changed files with 90 additions and 7 deletions

View File

@@ -379,7 +379,7 @@ $(function()
// Prepare base DOM structure
this.element
.append('<div class="sfc_header"><div class="sfc_title"></div><span class="sfc_toggle"><a class="fas fa-caret-down"' + ' href="#"></a></span></div>')
.append('<div class="sfc_header"><div class="sfc_title"></div><a class="sfc_toggle" href="#" aria-label="'+Dict.S('UI:Search:Criteria:Toggle')+'" data-tooltip-content="'+Dict.S('UI:Search:Criteria:Toggle')+'"><span class="fas fa-caret-down"></span></a></div>')
.append('<div class="sfc_form_group ibo-form-group"><div class="sfc_fg_operators"></div><div class="sfc_fg_buttons"></div></div>');
// Bind events
@@ -422,7 +422,7 @@ $(function()
// Removable / locked decoration
if(this.options.is_removable === true)
{
this.element.find('.sfc_header').append('<span class="sfc_close"><a class="fas fa-times" href="#"></a></span>');
this.element.find('.sfc_header').append('<a class="sfc_close" href="#" aria-label="'+Dict.S('UI:Search:Criteria:Remove')+'" data-tooltip-content="'+Dict.S('UI:Search:Criteria:Remove')+'"><span class="fas fa-times"></span></a>');
this.element.find('.sfc_close').on('click', function(oEvent){
// Prevent anchor
oEvent.preventDefault();
@@ -433,7 +433,7 @@ $(function()
else
{
this.element.addClass('locked');
this.element.find('.sfc_header').append('<span class="sfc_locked"><span class="fas fa-lock"></span></span>');
this.element.find('.sfc_header').append('<span class="sfc_locked" aria-label="'+Dict.S('UI:Search:Criteria:Locked')+'" data-tooltip-content="'+Dict.S('UI:Search:Criteria:Locked')+'"><span class="fas fa-lock"></span></span>');
}
// Form group
@@ -598,7 +598,9 @@ $(function()
var titleElem = this.element.find('.sfc_title');
titleElem.html(sTitle);
titleElem.attr('title', titleElem.text());
titleElem.attr('aria-label', titleElem.text());
titleElem.attr('data-tooltip-content', titleElem.text());
CombodoTooltip.InitTooltipFromMarkup(titleElem, true);
},
// Operators helpers

View File

@@ -435,7 +435,7 @@ $(function()
// Header part
var oHeaderElem = $('<div class="sfm_header"></div>')
.append('<a class="sfm_toggler" data-tooltip-content="' + Dict.S('UI:Search:Criterion:MoreMenu:AddCriteria') + '" href="#"><span class="sfm_tg_title">' + Dict.S('UI:Search:Criterion:MoreMenu:AddCriteria') + '</span><span class="sfm_tg_icon fas fa-plus"></span></a>')
.append('<a class="sfm_toggler" aria-label="' + Dict.S('UI:Search:Criterion:MoreMenu:AddCriteria') + '" data-tooltip-content="' + Dict.S('UI:Search:Criterion:MoreMenu:AddCriteria') + '" href="#"><span class="sfm_tg_title">' + Dict.S('UI:Search:Criterion:MoreMenu:AddCriteria') + '</span><span class="sfm_tg_icon fas fa-plus"></span></a>')
.appendTo(this.elements.more_criterion);
// Content part
@@ -704,8 +704,8 @@ $(function()
var sButtonText = (this.options.auto_submit === true) ? Dict.S('UI:Button:Refresh') : Dict.S('UI:Button:Search');
var sButtonIcon = (this.options.auto_submit === true) ? 'fas fa-sync' : 'fas fa-search';
var oButtonElem = $('<div class="sfb_header" data-tooltip-content="' + sButtonText + '"></div>')
.append('<a class="fa-fw ' + sButtonIcon + '" href="#"></a>')
var oButtonElem = $('<div class="sfb_header"></div>')
.append('<a aria-label="' + sButtonText + '" data-tooltip-content="' + sButtonText + '" href="#"><span class="fa-fw ' + sButtonIcon + '"></span></a>')
.appendTo(this.elements.submit_button);
// Bind events