From 49074cc3dfe2529107a4445186c5292dfd49fb08 Mon Sep 17 00:00:00 2001
From: hunicus <93150691+hunicus@users.noreply.github.com>
Date: Sat, 21 May 2022 08:20:35 -0400
Subject: [PATCH] Add role attributes for doc nav elements

To address #1668.
---
 .../code-template/code-template.component.html     | 14 +++++++-------
 frontend/src/app/docs/docs/docs.component.html     | 14 +++++++-------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/frontend/src/app/docs/code-template/code-template.component.html b/frontend/src/app/docs/code-template/code-template.component.html
index 47cea6d03..373f7daf6 100644
--- a/frontend/src/app/docs/code-template/code-template.component.html
+++ b/frontend/src/app/docs/code-template/code-template.component.html
@@ -1,14 +1,14 @@
 <div class="code">
-  <ul ngbNav #navCodeTemplate="ngbNav" class="nav-tabs code-tab">
-    <li ngbNavItem *ngIf="code.codeTemplate.curl && method !== 'websocket'">
-      <a ngbNavLink (click)="adjustContainerHeight( $event )">cURL</a>
+  <ul ngbNav #navCodeTemplate="ngbNav" class="nav-tabs code-tab" role="tablist">
+    <li ngbNavItem *ngIf="code.codeTemplate.curl && method !== 'websocket'" role="presentation">
+      <a ngbNavLink (click)="adjustContainerHeight( $event )" role="tab">cURL</a>
       <ng-template ngbNavContent>
         <div class="subtitle"><ng-container i18n="API Docs code example">Code Example</ng-container> <app-clipboard [text]="wrapCurlTemplate(code)"></app-clipboard></div>
         <pre><code [innerText]="wrapCurlTemplate(code)"></code></pre>
       </ng-template>
     </li>
-    <li ngbNavItem *ngIf="showCodeExample[network]">
-      <a ngbNavLink (click)="adjustContainerHeight( $event )" >CommonJS</a>
+    <li ngbNavItem *ngIf="showCodeExample[network]" role="presentation">
+      <a ngbNavLink (click)="adjustContainerHeight( $event )" role="tab">CommonJS</a>
       <ng-template ngbNavContent>
         <div class="subtitle"><ng-container i18n="API Docs code example">Code Example</ng-container> <app-clipboard [text]="wrapCommonJS(code)"></app-clipboard></div>
         <div class="links">
@@ -17,8 +17,8 @@
         <pre><code [innerText]="wrapCommonJS(code)"></code></pre>
       </ng-template>
     </li>
-    <li ngbNavItem *ngIf="showCodeExample[network]">
-      <a ngbNavLink (click)="adjustContainerHeight( $event )">ES Module</a>
+    <li ngbNavItem *ngIf="showCodeExample[network]" role="presentation">
+      <a ngbNavLink (click)="adjustContainerHeight( $event )" role="tab">ES Module</a>
       <ng-template ngbNavContent>
         <div class="subtitle"><ng-container i18n="API Docs install lib">Install Package</ng-container> <app-clipboard [text]="wrapImportTemplate()"></app-clipboard></div>
         <div class="links">
diff --git a/frontend/src/app/docs/docs/docs.component.html b/frontend/src/app/docs/docs/docs.component.html
index 19a664e46..30692cc42 100644
--- a/frontend/src/app/docs/docs/docs.component.html
+++ b/frontend/src/app/docs/docs/docs.component.html
@@ -3,10 +3,10 @@
 
     <h2 i18n="documentation.title">Documentation</h2>
 
-    <ul ngbNav #nav="ngbNav" [(activeId)]="activeTab" class="nav-tabs">
+    <ul ngbNav #nav="ngbNav" [(activeId)]="activeTab" class="nav-tabs" role="tablist">
 
-      <li [ngbNavItem]="0" *ngIf="showFaqTab">
-        <a ngbNavLink [routerLink]="['/docs/faq' | relativeUrl]">FAQ</a>
+      <li [ngbNavItem]="0" *ngIf="showFaqTab" role="presentation">
+        <a ngbNavLink [routerLink]="['/docs/faq' | relativeUrl]" role="tab">FAQ</a>
         <ng-template ngbNavContent>
 
           <app-api-docs [whichTab]="'faq'"></app-api-docs>
@@ -14,8 +14,8 @@
         </ng-template>
       </li>
 
-      <li [ngbNavItem]="1">
-        <a ngbNavLink [routerLink]="['/docs/api/rest' | relativeUrl]">API - REST</a>
+      <li [ngbNavItem]="1" role="presentation">
+        <a ngbNavLink [routerLink]="['/docs/api/rest' | relativeUrl]" role="tab">API - REST</a>
         <ng-template ngbNavContent>
 
           <app-api-docs [whichTab]="'rest'"></app-api-docs>
@@ -23,8 +23,8 @@
         </ng-template>
       </li>
 
-      <li [ngbNavItem]="2" *ngIf="showWebSocketTab">
-        <a ngbNavLink [routerLink]="['/docs/api/websocket' | relativeUrl]">API - WebSocket</a>
+      <li [ngbNavItem]="2" *ngIf="showWebSocketTab" role="presentation">
+        <a ngbNavLink [routerLink]="['/docs/api/websocket' | relativeUrl]" role="tab">API - WebSocket</a>
         <ng-template ngbNavContent>
 
           <app-api-docs [whichTab]="'websocket'"></app-api-docs>