Skip to content

Commit bc0338e

Browse files
author
Daniel Jacinto
authored
[A11y Bug] TFM remove role button from badges. (#9104)
* role button removed improve screen reader for popover. * nit.
1 parent 2ae64d1 commit bc0338e

2 files changed

Lines changed: 37 additions & 20 deletions

File tree

‎src/NuGetGallery/Scripts/gallery/common.js‎

Lines changed: 30 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -305,7 +305,7 @@
305305
if (e) {
306306
e.stopPropagation();
307307
e.preventDefault();
308-
}
308+
}
309309
return false;
310310
}
311311

@@ -377,12 +377,10 @@
377377
nuget.addAjaxAntiForgeryToken = function (data) {
378378
var $tokenKey = "__RequestVerificationToken";
379379
var $field = $("#AntiForgeryForm input[name=__RequestVerificationToken]");
380-
if (data instanceof FormData)
381-
{
380+
if (data instanceof FormData) {
382381
data.append($tokenKey, $field.val());
383382
}
384-
else
385-
{
383+
else {
386384
data["__RequestVerificationToken"] = $field.val();
387385
}
388386
return data;
@@ -464,14 +462,14 @@
464462

465463
nuget.setPopovers = function () {
466464
var popoverElement = $(this);
467-
popoverElement.popover({ trigger: 'hover focus' });
468-
popoverElement.click(function () {
469-
popoverElement.popover('show');
470-
setTimeout(function () {
471-
popoverElement.popover('hide');
472-
},
473-
2000);
474-
});
465+
var popoverElementDom = popoverElement.get(0);
466+
var originalLabel = popoverElementDom.ariaLabel;
467+
var popoverHideTimeMS = 2000;
468+
var popoverFadeTimeMS = 200;
469+
470+
popoverElement.popover({ trigger: 'hover' });
471+
popoverElement.click(popoverShowAndHide);
472+
popoverElement.focus(popoverShowAndHide);
475473
popoverElement.keyup(function (event) {
476474
// normalize keycode for browser compatibility
477475
var code = event.which || event.keyCode || event.charCode;
@@ -481,6 +479,25 @@
481479
popoverElement.popover('hide');
482480
}
483481
});
482+
483+
function popoverShowAndHide() {
484+
popoverElement.popover('show');
485+
486+
// Windows Narrator does not announce popovers' content. See: https://github.com/twbs/bootstrap/issues/18618
487+
// We can force Narrator to announce the popover's content by "flashing" the element's ARIA label.
488+
popoverElementDom.ariaLabel = "";
489+
490+
setTimeout(function () {
491+
popoverElement.popover('hide');
492+
493+
// We need to restore the element's original ARIA label.
494+
// Wait 0.15 seconds for the popover to fade away first.
495+
// Otherwise, the screen reader will re-announce the popover's content.
496+
setTimeout(function () {
497+
popoverElementDom.ariaLabel = originalLabel;
498+
}, popoverFadeTimeMS);
499+
}, popoverHideTimeMS);
500+
}
484501
};
485502

486503
window.nuget = nuget;

‎src/NuGetGallery/Views/Packages/_SupportedFrameworksBadges.cshtml‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,39 +6,39 @@
66
@if (Model.Net != null)
77
{
88
<!-- .NET cannot be an empty version since the lowest version for this framework is "net5.0", if the package contains just "net" framework it will fall into .NET Framework badge instead.' -->
9-
<span class="framework-badge-asset" role="button" tabindex="0" data-content="@String.SupportedFrameworks_Tooltip">.NET @Model.Net.GetBadgeVersion()</span>
9+
<span class="framework-badge-asset" tabindex="0" aria-label="@String.SupportedFrameworks_Tooltip" data-content="@String.SupportedFrameworks_Tooltip">.NET @Model.Net.GetBadgeVersion()</span>
1010
}
1111
@if (Model.NetCore != null)
1212
{
1313
if (Model.NetCore.GetBadgeVersion().IsEmpty())
1414
{
15-
<span class="framework-badge-asset" role="button" tabindex="0" data-content="@String.SupportedFrameworks_EmptyVersionTooltip">.NET Core</span>
15+
<span class="framework-badge-asset" tabindex="0" aria-label="@String.SupportedFrameworks_EmptyVersionTooltip" data-content="@String.SupportedFrameworks_EmptyVersionTooltip">.NET Core</span>
1616
}
1717
else
1818
{
19-
<span class="framework-badge-asset" role="button" tabindex="0" data-content="@String.SupportedFrameworks_Tooltip">.NET Core @Model.NetCore.GetBadgeVersion()</span>
19+
<span class="framework-badge-asset" tabindex="0" aria-label="@String.SupportedFrameworks_Tooltip" data-content="@String.SupportedFrameworks_Tooltip">.NET Core @Model.NetCore.GetBadgeVersion()</span>
2020
}
2121
}
2222
@if (Model.NetStandard != null)
2323
{
2424
if (Model.NetStandard.GetBadgeVersion().IsEmpty())
2525
{
26-
<span class="framework-badge-asset" role="button" tabindex="0" data-content="@String.SupportedFrameworks_EmptyVersionTooltip">.NET Standard</span>
26+
<span class="framework-badge-asset" tabindex="0" aria-label="@String.SupportedFrameworks_EmptyVersionTooltip" data-content="@String.SupportedFrameworks_EmptyVersionTooltip">.NET Standard</span>
2727
}
2828
else
2929
{
30-
<span class="framework-badge-asset" role="button" tabindex="0" data-content="@String.SupportedFrameworks_Tooltip">.NET Standard @Model.NetStandard.GetBadgeVersion()</span>
30+
<span class="framework-badge-asset" tabindex="0" aria-label="@String.SupportedFrameworks_Tooltip" data-content="@String.SupportedFrameworks_Tooltip">.NET Standard @Model.NetStandard.GetBadgeVersion()</span>
3131
}
3232
}
3333
@if (Model.NetFramework != null)
3434
{
3535
if (Model.NetFramework.GetBadgeVersion().IsEmpty())
3636
{
37-
<span class="framework-badge-asset" role="button" tabindex="0" data-content="@String.SupportedFrameworks_EmptyVersionTooltip">.NET Framework</span>
37+
<span class="framework-badge-asset" tabindex="0" aria-label="@String.SupportedFrameworks_EmptyVersionTooltip" data-content="@String.SupportedFrameworks_EmptyVersionTooltip">.NET Framework</span>
3838
}
3939
else
4040
{
41-
<span class="framework-badge-asset" role="button" tabindex="0" data-content="@String.SupportedFrameworks_Tooltip">.NET Framework @Model.NetFramework.GetBadgeVersion()</span>
41+
<span class="framework-badge-asset" tabindex="0" aria-label="@String.SupportedFrameworks_Tooltip" data-content="@String.SupportedFrameworks_Tooltip">.NET Framework @Model.NetFramework.GetBadgeVersion()</span>
4242
}
4343
}
4444
</div>

0 commit comments

Comments
 (0)