diff --git a/src/app/header/context-help-toggle/context-help-toggle.component.html b/src/app/header/context-help-toggle/context-help-toggle.component.html
index f815312739c..997ae80fb5c 100644
--- a/src/app/header/context-help-toggle/context-help-toggle.component.html
+++ b/src/app/header/context-help-toggle/context-help-toggle.component.html
@@ -1,12 +1,11 @@
@if (buttonVisible$ | async) {
}
diff --git a/src/app/header/context-help-toggle/context-help-toggle.component.scss b/src/app/header/context-help-toggle/context-help-toggle.component.scss
index f3e5e01880a..f8cbd4047af 100644
--- a/src/app/header/context-help-toggle/context-help-toggle.component.scss
+++ b/src/app/header/context-help-toggle/context-help-toggle.component.scss
@@ -1,3 +1,10 @@
+.ds-context-help-toggle-button {
+ background: none;
+ border: 0;
+ padding: 0;
+ cursor: pointer;
+}
+
.ds-context-help-toggle {
color: var(--ds-header-icon-color);
background-color: var(--ds-header-bg);
diff --git a/src/app/header/context-help-toggle/context-help-toggle.component.spec.ts b/src/app/header/context-help-toggle/context-help-toggle.component.spec.ts
index 5172cfd9913..45995afcd87 100644
--- a/src/app/header/context-help-toggle/context-help-toggle.component.spec.ts
+++ b/src/app/header/context-help-toggle/context-help-toggle.component.spec.ts
@@ -56,10 +56,17 @@ describe('ContextHelpToggleComponent', () => {
});
it('clicking the button should toggle context help icon visibility', fakeAsync(() => {
- fixture.debugElement.query(By.css('a')).nativeElement.click();
+ fixture.debugElement.query(By.css('button')).nativeElement.click();
tick();
expect(contextHelpService.toggleIcons).toHaveBeenCalled();
}));
+
+ it('the toggle should be a real
@if ((active$ | async).valueOf() === true) {
so user agents do not apply native button chrome
+ button.ds-menu-toggler-wrapper {
+ background: none;
+ border: 0;
+ padding: 0;
+ color: inherit;
+ font: inherit;
+ cursor: pointer;
+ }
+
.dropdown-menu {
overflow: hidden;
min-width: 100%;
diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.spec.ts b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.spec.ts
index fb0e66d9e82..5535b3908bf 100644
--- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.spec.ts
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.spec.ts
@@ -57,6 +57,15 @@ describe('ExpandableNavbarSectionComponent', () => {
fixture.detectChanges();
});
+ describe('toggler element', () => {
+ it('should be a real