Skip to content

Commit d7e751d

Browse files
Goodyear2017Goodyear2017
authored
Solve Package Page Tooltip Accessibility Bugs and Framework Filter Checkbox List Accessibility Bug (#9933)
1 parent 659e9b1 commit d7e751d

5 files changed

Lines changed: 135 additions & 19 deletions

File tree

‎src/Bootstrap/dist/css/bootstrap-theme.css‎

Lines changed: 33 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/Bootstrap/less/theme/page-list-packages.less‎

Lines changed: 39 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,11 @@
1111
margin: 0 !important;
1212
}
1313

14+
.frameworkfilters-info {
15+
color: #333;
16+
text-decoration: none;
17+
}
18+
1419
@media (max-width: @screen-md) {
1520
.btn-filter {
1621
text-align: left;
@@ -219,16 +224,16 @@
219224
}
220225

221226
@media (min-width: 992px) {
222-
.advanced-search-panel{
227+
.advanced-search-panel {
223228
position: relative;
224229
top: 0;
225230
margin-top: 30px;
226231
display: block;
227232
}
228233
}
229234

230-
@media (max-width: 992px){
231-
.advanced-search-panel{
235+
@media (max-width: 992px) {
236+
.advanced-search-panel {
232237
margin-top: 0px;
233238
}
234239
}
@@ -263,12 +268,40 @@
263268
}
264269

265270
@media (max-width: 992px) {
266-
.toggle-advanced-search-panel{
271+
.toggle-advanced-search-panel {
267272
display: block;
268273
}
269-
.advanced-search-panel{
274+
275+
.advanced-search-panel {
270276
display: none;
271277
}
272278
}
273-
279+
}
280+
/* For tooltip */
281+
.tooltip-target {
282+
position: relative;
283+
text-decoration: none;
284+
}
285+
286+
.tooltip-wrapper.popover {
287+
min-width: 276px;
288+
left: -6px;
289+
position: absolute;
290+
transform: translateY(-50%);
291+
top: calc(50% - 6px);
292+
}
293+
294+
.tooltip-wrapper.popover.tooltip-with-icon {
295+
left: -7px;
296+
top: calc(50% - 6px);
297+
}
298+
299+
.tooltip-block {
300+
position: relative;
301+
display: inline-block;
302+
color: #333;
303+
304+
.popover-content {
305+
display: block;
306+
}
274307
}

‎src/NuGetGallery/Scripts/gallery/page-list-packages.js‎

Lines changed: 27 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -211,8 +211,31 @@ $(function() {
211211
$(".reserved-indicator").each(window.nuget.setPopovers);
212212
$(".package-warning--vulnerable").each(window.nuget.setPopovers);
213213
$(".package-warning--deprecated").each(window.nuget.setPopovers);
214-
$(".frameworkfiltermode-info").each(window.nuget.setPopovers);
215-
$(".framework-badge-asset").each(window.nuget.setPopovers);
216-
$(".framework-badge-computed").each(window.nuget.setPopovers);
217-
$(".frameworkfilters-info").each(window.nuget.setPopovers);
214+
//for tooltip hover and focus
215+
$('.tooltip-target').each(function () {
216+
$(this).on('mouseenter focusin', function () {
217+
$(this).find('.tooltip-wrapper').addClass('show');
218+
});
219+
$(this).on('mouseleave focusout', function () {
220+
$(this).find('.tooltip-wrapper').removeClass('show');
221+
});
222+
});
223+
224+
// for using arrow keys in Framwork filter mode checkbox tree
225+
$('.tfmTab li input').each(function () {
226+
$(this).on('keydown', function (e) {
227+
switch (e.key) {
228+
case "ArrowDown":
229+
if ($(this).parent().next().length > 0) {
230+
$(this).parent().next().find('.tfm').focus();
231+
}
232+
break;
233+
case "ArrowUp":
234+
if ($(this).parent().prev().length > 0) {
235+
$(this).parent().prev().find('.tfm').focus();
236+
}
237+
break;
238+
}
239+
});
240+
});
218241
});

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

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -84,15 +84,22 @@
8484
@helper DisplayFrameworkBadge(PackageFrameworkCompatibilityData tfmCompatibilityData, FrameworkContext context, int? itemIndex, string eventName)
8585
{
8686
<a href=@Url.FrameworksTab(Model.PackageId, Model.PackageVersion)
87-
@if (itemIndex.HasValue)
88-
{
89-
@: data-track="@eventName" data-track-value="@itemIndex" data-click-source="FrameworkBadge"
90-
@: data-package-id="@Model.PackageId" data-package-version="@Model.PackageVersion"
91-
@: data-badge-framework="@tfmCompatibilityData.Framework.GetShortFolderName()" data-badge-is-computed="@tfmCompatibilityData.IsComputed"
87+
@if (itemIndex.HasValue) { @: data-track="@eventName" data-track-value="@itemIndex" data-click-source="FrameworkBadge"
88+
@: data-package-id="@Model.PackageId" data-package-version="@Model.PackageVersion"
89+
@: data-badge-framework="@tfmCompatibilityData.Framework.GetShortFolderName()" data-badge-is-computed="@tfmCompatibilityData.IsComputed"
90+
@: class="tooltip-target"
9291
}>
93-
<span class=@(tfmCompatibilityData.IsComputed ? "framework-badge-computed" : "framework-badge-asset") aria-label="@GetBadgeTooltip(context, tfmCompatibilityData)" data-content="@GetBadgeTooltip(context, tfmCompatibilityData)">
92+
<span class=@(tfmCompatibilityData.IsComputed ? "framework-badge-computed" : "framework-badge-asset")>
9493
@GetBadgeDisplayName(context, tfmCompatibilityData)
9594
</span>
95+
<span class="tooltip-block">
96+
<span class="tooltip-wrapper popover right" role="tooltip">
97+
<span class="arrow"></span>
98+
<span class="popover-content">
99+
@GetBadgeTooltip(context, tfmCompatibilityData)
100+
</span>
101+
</span>
102+
</span>
96103
</a>
97104
}
98105

‎src/NuGetGallery/Views/Shared/ListPackages.cshtml‎

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -88,11 +88,21 @@
8888
<div>
8989
<fieldset id="frameworkfilters">
9090
<legend>
91-
Frameworks
9291
<a href="@(Model.FrameworksFilteringInformationLink)" class="frameworkfilters-info"
9392
data-content="@NuGetGallery.Strings.FrameworkFilters_Tooltip"
9493
aria-label="@NuGetGallery.Strings.FrameworkFilters_Tooltip">
94+
Frameworks
95+
</a>
96+
<a class="tooltip-target" href="javascript:void(0)">
9597
<i class="framework-filter-info-icon ms-Icon ms-Icon--Info"></i>
98+
<span class="tooltip-block" role="tooltip">
99+
<span class="tooltip-wrapper tooltip-with-icon popover right">
100+
<span class="arrow"></span>
101+
<span class="popover-content">
102+
@NuGetGallery.Strings.FrameworkFilters_Tooltip
103+
</span>
104+
</span>
105+
</span>
96106
</a>
97107
</legend>
98108
@if (Model.IsAdvancedFrameworkFilteringEnabled)
@@ -102,10 +112,20 @@
102112
<input type="checkbox" id="computed-frameworks-checkbox" checked="@Model.IncludeComputedFrameworks">
103113
<input type="hidden" id="includeComputedFrameworks" name="includeComputedFrameworks" value="@Model.IncludeComputedFrameworks.ToString().ToLower()">
104114
</div>
105-
<div class="framework-filter-mode-option" aria-label="ALL/ANY toggle that decides whether to show packages matching ALL of the selected Target Frameworks (TFMs), or ANY of them.">
115+
<div class="framework-filter-mode-option">
106116
<p>
107117
Framework Filter Mode
108-
<i class="frameworkfiltermode-info ms-Icon ms-Icon--Info" tabindex="0" data-content="Decides whether to show packages matching ALL of the selected Target Frameworks (TFMs), or ANY of them."></i>
118+
<a class="tooltip-target" href="javascript:void(0)">
119+
<i class="frameworkfiltermode-info ms-Icon ms-Icon--Info"></i>
120+
<span class="tooltip-block" role="tooltip">
121+
<span class="tooltip-wrapper tooltip-with-icon popover right">
122+
<span class="arrow"></span>
123+
<span class="popover-content">
124+
Decides whether to show packages matching ALL of the selected Target Frameworks (TFMs), or ANY of them.
125+
</span>
126+
</span>
127+
</span>
128+
</a>
109129
</p>
110130
<div class="toggle-switch-control">
111131
<input type="radio" id="all-selector" name="frameworkFilterMode" value="all" tabindex="0" @(Model.FrameworkFilterMode == "any" ? "" : "checked") />

0 commit comments

Comments
 (0)