Skip to content

Commit bcc1f0e

Browse files
tdonohuetdonohue
authored
Merge pull request #5466 from alexandrevryghem/css-navbar-fixes_contribute-main
Navbar theming & accessibility fixes
2 parents e903526 + 7fbaa88 commit bcc1f0e

18 files changed

Lines changed: 188 additions & 139 deletions

‎src/app/breadcrumbs/breadcrumbs.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<nav aria-label="breadcrumb" class="nav-breadcrumb">
44
<ol class="container breadcrumb my-0">
55
<ng-container
6-
*ngTemplateOutlet="breadcrumbs?.length > 0 ? breadcrumb : activeBreadcrumb; context: {text: 'home.breadcrumbs', url: '/'}"></ng-container>
6+
*ngTemplateOutlet="breadcrumbs?.length > 0 ? breadcrumb : activeBreadcrumb; context: {text: 'home.breadcrumbs', url: '/home'}"></ng-container>
77
@for (bc of breadcrumbs; track bc; let last = $last) {
88
<ng-container *ngTemplateOutlet="!last ? breadcrumb : activeBreadcrumb; context: bc"></ng-container>
99
}

‎src/app/breadcrumbs/breadcrumbs.component.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ describe('BreadcrumbsComponent', () => {
7575
it('should render the breadcrumbs', () => {
7676
const breadcrumbs = fixture.debugElement.queryAll(By.css('.breadcrumb-item'));
7777
expect(breadcrumbs.length).toBe(3);
78-
expectBreadcrumb(breadcrumbs[0], 'home.breadcrumbs', '/');
78+
expectBreadcrumb(breadcrumbs[0], 'home.breadcrumbs', '/home');
7979
expectBreadcrumb(breadcrumbs[1], 'bc 1', '/example.com');
8080
expectBreadcrumb(breadcrumbs[2].query(By.css('.text-truncate')), 'bc 2', null);
8181
});

‎src/app/header-nav-wrapper/header-navbar-wrapper.component.scss‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,16 @@
11
:host {
22
position: relative;
33
div#header-navbar-wrapper {
4-
border-bottom: 1px var(--ds-header-navbar-border-bottom-color) solid;
4+
border-bottom: var(--ds-header-navbar-border-bottom-height) var(--ds-header-navbar-border-bottom-color) solid;
5+
}
6+
7+
::ng-deep {
8+
nav#desktop-navbar {
9+
.ds-menu-item-wrapper {
10+
&:hover, &:focus {
11+
background-color: var(--ds-navbar-link-bg-hover);
12+
}
13+
}
14+
}
515
}
616
}

‎src/app/info/accessibility-settings/accessibility-settings.component.html‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<div class="container">
2-
<h2>{{ 'info.accessibility-settings.title' | translate }}</h2>
2+
<h1>{{ 'info.accessibility-settings.title' | translate }}</h1>
33

44
<form>
55
<div class="mb-3 row">
6-
<label [for]="'disableNotificationTimeOutInput'" class="col-sm-4 col-form-label">
6+
<span aria-hidden="true" class="col-sm-4 col-form-label">
77
{{ 'info.accessibility-settings.disableNotificationTimeOut.label' | translate }}
8-
</label>
8+
</span>
99

1010
<div class="col-sm-4">
11-
<ui-switch [id]="'disableNotificationTimeOutInput'"
11+
<ui-switch [ariaLabel]="'info.accessibility-settings.disableNotificationTimeOut.label' | translate"
1212
[(ngModel)]="formValues.notificationTimeOutEnabled"
1313
[ngModelOptions]="{ standalone: true }"
1414
></ui-switch>
@@ -33,8 +33,7 @@ <h2>{{ 'info.accessibility-settings.title' | translate }}</h2>
3333
[ngClass]="{'is-invalid': !settingsService.isValid('notificationTimeOut', formValues)}"
3434
[min]="1"
3535
[readOnly]="!formValues.notificationTimeOutEnabled"
36-
[(ngModel)]="formValues.notificationTimeOut" [ngModelOptions]="{ standalone: true }"
37-
[attr.aria-describedby]="'notificationTimeOutHint'">
36+
[(ngModel)]="formValues.notificationTimeOut" [ngModelOptions]="{ standalone: true }">
3837
<div class="invalid-feedback" [ngClass]="{ 'd-block': !settingsService.isValid('notificationTimeOut', formValues) }">
3938
{{ 'info.accessibility-settings.notificationTimeOut.invalid' | translate }}
4039
</div>
@@ -59,8 +58,7 @@ <h2>{{ 'info.accessibility-settings.title' | translate }}</h2>
5958
<input [type]="'number'" [id]="'liveRegionTimeOutInput'" class="form-control"
6059
[ngClass]="{'is-invalid': !settingsService.isValid('liveRegionTimeOut', formValues)}"
6160
[min]="1"
62-
[(ngModel)]="formValues.liveRegionTimeOut" [ngModelOptions]="{ standalone: true }"
63-
[attr.aria-describedby]="'liveRegionTimeOutHint'">
61+
[(ngModel)]="formValues.liveRegionTimeOut" [ngModelOptions]="{ standalone: true }">
6462
<div class="invalid-feedback" [ngClass]="{ 'd-block': !settingsService.isValid('liveRegionTimeOut', formValues) }">
6563
{{ 'info.accessibility-settings.liveRegionTimeOut.invalid' | translate }}
6664
</div>

‎src/app/info/feedback/feedback-form/feedback-form.component.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ <h1>{{ 'info.feedback.head' | translate }}</h1>
66
<div class="row mt-3">
77
<div class="control-group col-sm-12">
88
<label class="control-label form-label" for="email">{{ 'info.feedback.email-label' | translate }}&nbsp;</label>
9-
<input id="email" class="form-control" name="email" type="text" value="" formControlName="email" autofocus="autofocus" title="{{ 'info.feedback.email_help' | translate }}">
9+
<input autocomplete="email" id="email" class="form-control" name="email" type="text" value="" formControlName="email" autofocus="autofocus">
1010
<small class="text-muted">{{ 'info.feedback.email_help' | translate }}</small>
1111
</div>
1212
</div>
@@ -27,7 +27,7 @@ <h1>{{ 'info.feedback.head' | translate }}</h1>
2727
<div class="row mt-3">
2828
<div class="control-group col-sm-12">
2929
<label class="control-label form-label" for="comments">{{ 'info.feedback.comments' | translate }}:&nbsp;</label>
30-
<textarea id="comments" formControlName="message" class="form-control" name="message" cols="20" rows="5"> </textarea>
30+
<textarea autocomplete="off" id="comments" formControlName="message" class="form-control" name="message" cols="20" rows="5"> </textarea>
3131
</div>
3232
</div>
3333

@@ -44,7 +44,7 @@ <h1>{{ 'info.feedback.head' | translate }}</h1>
4444
<div class="row mt-3">
4545
<div class="control-group col-sm-12">
4646
<label class="control-label form-labe" for="page">{{ 'info.feedback.page-label' | translate }}&nbsp;</label>
47-
<input id="page" readonly class="form-control" name="page" type="text" value="" formControlName="page" autofocus="autofocus" title="{{ 'info.feedback.page_help' | translate }}">
47+
<input autocomplete="off" id="page" readonly class="form-control" name="page" type="text" value="" formControlName="page" autofocus="autofocus">
4848
<small class="text-muted">{{ 'info.feedback.page_help' | translate }}</small>
4949
</div>
5050
</div>

‎src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
[dsHoverOutsideOfParentSelector]="'#expandable-navbar-section-' + section.id"
2929
(dsHoverOutside)="deactivateSection($event, false)"
3030
role="menu"
31-
class="dropdown-menu show nav-dropdown-menu m-0 shadow-none border-top-0 px-3 px-md-0 pt-0 pt-md-1">
31+
class="dropdown-menu show nav-dropdown-menu m-0 shadow-none border-top-0">
3232
<div @slide role="presentation">
3333
@for (subSection of (subSections$ | async); track subSection) {
3434
<div class="text-nowrap" role="presentation">

‎src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,19 @@
77
overflow: hidden;
88
min-width: 100%;
99
top: 100%;
10-
@include media-breakpoint-down(xs) {
10+
padding: var(--ds-expandable-navbar-padding);
11+
12+
@include media-breakpoint-down(md) {
1113
border: 0;
12-
background-color: var(--ds-expandable-navbar-bg);
14+
border-radius: 0;
1315
}
1416
@include media-breakpoint-up(md) {
1517
border-top-left-radius: 0;
1618
border-top-right-radius: 0;
17-
background-color: var(--ds-navbar-dropdown-bg);
19+
}
20+
21+
::ng-deep .ds-menu-item {
22+
padding: var(--ds-expandable-navbar-item-padding);
1823
}
1924
}
2025

‎src/app/navbar/navbar.component.scss‎

Lines changed: 35 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
/** Mobile menu styling **/
1111
@media screen and (max-width: map-get($grid-breakpoints, md)-0.02) {
1212
.navbar {
13-
width: 100vw;
13+
width: 100%;
1414
background-color: var(--bs-white);
1515
position: absolute;
1616
overflow: hidden;
@@ -19,18 +19,11 @@
1919
&.open {
2020
height: auto;
2121
min-height: 100vh; //doesn't matter because wrapper is sticky
22-
border-bottom: 1px var(--ds-header-navbar-border-bottom-color) solid; // open navbar covers header-navbar-wrapper border
22+
border-bottom: var(--ds-header-navbar-border-bottom-height) var(--ds-header-navbar-border-bottom-color) solid; // open navbar covers header-navbar-wrapper border
2323
}
2424
}
2525
}
2626

27-
@media screen and (min-width: map-get($grid-breakpoints, md)) {
28-
.reset-padding-md {
29-
margin-left: calc(var(--bs-spacer) / -1);
30-
margin-right: calc(var(--bs-spacer) / -1);
31-
}
32-
}
33-
3427
/* TODO remove when https://github.com/twbs/bootstrap/issues/24726 is fixed */
3528
.navbar-expand-md.navbar-container {
3629
@media screen and (max-width: map-get($grid-breakpoints, md)-0.02) {
@@ -42,23 +35,48 @@
4235
}
4336

4437
#main-navbar ::ng-deep {
45-
.ds-menu-item, .ds-menu-toggler-wrapper {
46-
white-space: nowrap;
38+
.ds-menu-toggler-wrapper {
4739
text-decoration: none;
4840
}
4941

50-
.dropdown-menu {
51-
padding: 0.5rem !important;
52-
}
53-
5442
.ds-menu-item {
43+
text-decoration: none;
5544
display: block;
45+
width: 100%;
46+
47+
&:not(.dropdown-menu .ds-menu-item) {
48+
padding: var(--ds-navbar-item-padding);
49+
}
50+
}
51+
}
52+
53+
#main-navbar ::ng-deep .ds-menu-item-wrapper:not(ds-user-menu .ds-menu-item-wrapper) {
54+
background-color: var(--ds-navbar-link-bg);
55+
56+
.toggle-menu-icon, .ds-menu-item:not(.dropdown-menu .ds-menu-item) {
5657
color: var(--ds-navbar-link-color);
57-
padding: 0.5rem 0;
58+
}
59+
60+
&:hover, &:focus {
61+
background-color: var(--ds-navbar-link-bg-hover);
5862

59-
&:hover, &:focus {
63+
.toggle-menu-icon, .ds-menu-item:not(.dropdown-menu .ds-menu-item) {
6064
color: var(--ds-navbar-link-color-hover);
6165
}
66+
67+
.dropdown-menu {
68+
background-color: var(--ds-expandable-navbar-bg);
69+
70+
.ds-menu-item {
71+
color: var(--ds-expandable-navbar-link-color);
72+
background-color: var(--ds-expandable-navbar-link-bg);
73+
74+
&:hover, &:focus {
75+
color: var(--ds-expandable-navbar-link-color-hover);
76+
background-color: var(--ds-expandable-navbar-link-bg-hover);
77+
}
78+
}
79+
}
6280
}
6381
}
6482
}

‎src/app/search-navbar/search-navbar.component.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
<div [title]="'nav.search' | translate" (dsClickOutside)="collapse()">
1+
<div (dsClickOutside)="collapse()">
22
<div class="d-inline-block position-relative">
3-
<form [formGroup]="searchForm" (ngSubmit)="onSubmit(searchForm.value)" autocomplete="on" class="d-flex">
3+
<form [formGroup]="searchForm" (ngSubmit)="onSubmit(searchForm.value)" class="d-flex">
44
<input #searchInput [@toggleAnimation]="isExpanded" [attr.aria-label]="('nav.search' | translate)" name="query"
55
formControlName="query" type="text" placeholder="{{searchExpanded ? ('nav.search' | translate) : ''}}"
6+
autocomplete="off"
67
class="d-inline-block bg-transparent position-absolute form-control dropdown-menu-end p1"
78
[class.display]="searchExpanded ? 'inline-block' : 'none'"
89
[tabIndex]="searchExpanded ? 0 : -1"

‎src/app/shared/auth-nav-menu/auth-nav-menu.component.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@
77
min-height: 75px;
88
}
99

10+
#logoutDropdownMenu {
11+
background-color: var(--ds-user-menu-bg);
12+
}
13+
1014
.dropdown-item.active, .dropdown-item:active,
1115
.dropdown-item:hover, .dropdown-item:focus {
1216
background-color: transparent !important;

0 commit comments

Comments
 (0)