firewall: accessibility fixes for NAT page

[jfayre]

Add aria-label to buttons and links in table.
Added role="cell" in last column of table to prevent screen readers from reading action buttons when navigating to other table rows.

[AdSchellevis]

Suggested change

	<a href="firewall_nat_edit.php" class="btn btn-primary btn-xs" data-toggle="tooltip" title="<?= html_safe(gettext('Add')) ?>" aria-label="<?= html_safe(gettext('Add')) ?>"">
	<a href="firewall_nat_edit.php" class="btn btn-primary btn-xs" data-toggle="tooltip" title="<?= html_safe(gettext('Add')) ?>" aria-label="<?= html_safe(gettext('Add')) ?>">

[AdSchellevis]

@jfayre
While reading this PR, I'm wondering if we are trying to apply the right fix here.

Looking at bootstrap.js on our end, on rendering the title is moved to data-original-title:

core/src/opnsense/www/js/bootstrap.js

Lines 1784 to 1789 in 9330429

	Tooltip.prototype.fixTitle = function () {
	var $e = this.$element
	if ($e.attr('title') || typeof $e.attr('data-original-title') != 'string') {
	$e.attr('data-original-title', $e.attr('title') || '').attr('title', '')
	}
	}

Newer versions seem to add aria-label here too:

https://github.com/twbs/bootstrap/blob/7c392498fabed7b4327e7c798c6af152b5071d29/dist/js/bootstrap.js#L3554-L3564

Maybe we better backport this change on our end so all tooltips are equal and we don't need to copy titles.

What do you think?

[fichtner]

I would prefer the deduplication too. The risk for regressions is also a factor here changing all these lines. Things happen.

[jfayre]

I completely agree if you can do that. There are a lot of these types of issues and it would be great if we could fix them all in one go.Sent from my iPhoneOn Jul 8, 2024, at 5:27 AM, Ad Schellevis ***@***.***> wrote: @jfayre While reading this PR, I'm wondering if we are trying to apply the right fix here. Looking at bootstrap.js on our end, on rendering the title is moved to data-original-title: https://github.com/opnsense/core/blob/93304298abf4dc48a47766b2fa30729489ec6db8/src/opnsense/www/js/bootstrap.js#L1784-L1789 Newer versions seem to add aria-label here too: https://github.com/twbs/bootstrap/blob/7c392498fabed7b4327e7c798c6af152b5071d29/dist/js/bootstrap.js#L3554-L3564 Maybe we better backport this change on our end so all tooltips are equal and we don't need to copy titles. What do you think? —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: ***@***.***>

[AdSchellevis]

I'll take a look

[AdSchellevis]

b0cab3b should do the trick