Improve accessibility

6 files changed, 18 insertions, 19 deletions

diff --git a/client/src/app/shared/shared-main/angular/link.component.scss b/client/src/app/shared/shared-main/angular/link.component.scss
index f54240d31..d288afab1 100644
--- a/client/src/app/shared/shared-main/angular/link.component.scss
+++ b/client/src/app/shared/shared-main/angular/link.component.scss
@@ -1,4 +1,4 @@
-.no-class {
+.inherit-parent {
   color: inherit;
   text-decoration: inherit;
   position: inherit;
diff --git a/client/src/app/shared/shared-main/angular/link.component.ts b/client/src/app/shared/shared-main/angular/link.component.ts
index 1f5975589..f2093496f 100644
--- a/client/src/app/shared/shared-main/angular/link.component.ts
+++ b/client/src/app/shared/shared-main/angular/link.component.ts
@@ -14,14 +14,17 @@ export class LinkComponent implements OnInit {
   @Input() title?: string
 
   @Input() className?: string
+  @Input() inheritParentCSS = false
 
   @Input() tabindex: string | number
 
   builtClasses: string
 
   ngOnInit () {
-    this.builtClasses = this.className
-      ? this.className
-      : 'no-class'
+    this.builtClasses = this.className || ''
+
+    if (!this.builtClasses || this.inheritParentCSS) {
+      this.builtClasses += ' inherit-parent'
+    }
   }
 }
diff --git a/client/src/app/shared/shared-main/feeds/feed.component.html b/client/src/app/shared/shared-main/feeds/feed.component.html
index a748be873..7032c4cd0 100644
--- a/client/src/app/shared/shared-main/feeds/feed.component.html
+++ b/client/src/app/shared/shared-main/feeds/feed.component.html
@@ -1,4 +1,4 @@
-<div class="feed" *ngIf="syndicationItems && syndicationItems.length !== 0">
+<button class="feed border-0 p-0" *ngIf="syndicationItems && syndicationItems.length !== 0">
   <my-global-icon
     role="button" aria-label="Open syndication dropdown" i18n-aria-label
     *ngIf="syndicationItems.length !== 0" [ngbPopover]="feedsList" [autoClose]="true" placement="bottom left auto"
@@ -9,4 +9,4 @@
   <ng-template #feedsList>
     <a *ngFor="let item of syndicationItems" [href]="item.url" target="_blank" rel="noopener noreferrer">{{ item.label }}</a>
   </ng-template>
-</div>
+</button>
diff --git a/client/src/app/shared/shared-main/feeds/feed.component.scss b/client/src/app/shared/shared-main/feeds/feed.component.scss
index bf1f4eeeb..25afe9c6c 100644
--- a/client/src/app/shared/shared-main/feeds/feed.component.scss
+++ b/client/src/app/shared/shared-main/feeds/feed.component.scss
@@ -3,15 +3,19 @@
 
 .feed {
   width: 100%;
+  color: inherit;
 
   a {
-    color: #000;
+    color: pvar(--mainForegroundColor);
     display: block;
     min-width: 100px;
+
+    &:hover {
+      text-decoration: underline;
+    }
   }
 }
 
 my-global-icon {
-  cursor: pointer;
   width: 100%;
 }
diff --git a/client/src/app/shared/shared-main/misc/help.component.html b/client/src/app/shared/shared-main/misc/help.component.html
index 360a476f6..0252ad5cb 100644
--- a/client/src/app/shared/shared-main/misc/help.component.html
+++ b/client/src/app/shared/shared-main/misc/help.component.html
@@ -22,11 +22,9 @@
   </p>
 </ng-template>
 
-<span
-  role="button"
-  class="help-tooltip-button"
+<button
+  class="help-tooltip-button p-0 border-0 mx-1"
   [title]="title"
-  tabindex=0
   popoverClass="help-popover"
   [attr.aria-pressed]="isPopoverOpened"
   [ngbPopover]="tooltipTemplate"
@@ -36,4 +34,4 @@
   (onShown)="onPopoverShown()"
 >
   <my-global-icon [iconName]="iconName"></my-global-icon>
-</span>
+</button>
diff --git a/client/src/app/shared/shared-main/misc/help.component.scss b/client/src/app/shared/shared-main/misc/help.component.scss
index 6ccef9f2c..46f533f61 100644
--- a/client/src/app/shared/shared-main/misc/help.component.scss
+++ b/client/src/app/shared/shared-main/misc/help.component.scss
@@ -2,12 +2,6 @@
 @use '_mixins' as *;
 
 .help-tooltip-button {
-  @include disable-outline;
-
-  cursor: pointer;
-  border: 0;
-  margin: 5px;
-
   my-global-icon {
     @include apply-svg-color(pvar(--greyForegroundColor));