Merge "Fix some inconsistencies in the scouting web page"
diff --git a/scouting/scouting_test.ts b/scouting/scouting_test.ts
index 8623fa1..cbeffc1 100644
--- a/scouting/scouting_test.ts
+++ b/scouting/scouting_test.ts
@@ -327,7 +327,7 @@
     // Navigate to Notes Page.
     await loadPage();
     await element(by.cssContainingText('.nav-link', 'Notes')).click();
-    expect(await element(by.id('page-title')).getText()).toEqual('Notes');
+    expect(await getHeadingText()).toEqual('Notes');
 
     // Add first team.
     await setTextboxByIdTo('team_number_notes', '1234');
@@ -336,7 +336,7 @@
     // Add note and select keyword for first team.
     expect(await element(by.id('team-key-1')).getText()).toEqual('1234');
     await element(by.id('text-input-1')).sendKeys('Good Driving');
-    await element(by.id('Good Driving_0')).click();
+    await element(by.id('good_driving_0')).click();
 
     // Navigate to add team selection and add another team.
     await element(by.id('add-team-button')).click();
@@ -346,7 +346,7 @@
     // Add note and select keyword for second team.
     expect(await element(by.id('team-key-2')).getText()).toEqual('1235');
     await element(by.id('text-input-2')).sendKeys('Bad Driving');
-    await element(by.id('Bad Driving_1')).click();
+    await element(by.id('bad_driving_1')).click();
 
     // Submit Notes.
     await element(by.buttonText('Submit')).click();
@@ -359,7 +359,7 @@
     // Navigate to Notes Page.
     await loadPage();
     await element(by.cssContainingText('.nav-link', 'Notes')).click();
-    expect(await element(by.id('page-title')).getText()).toEqual('Notes');
+    expect(await getHeadingText()).toEqual('Notes');
 
     // Add first team.
     await setTextboxByIdTo('team_number_notes', '1234');
@@ -395,9 +395,7 @@
     // Navigate to Driver Ranking Page.
     await loadPage();
     await element(by.cssContainingText('.nav-link', 'Driver Ranking')).click();
-    expect(await element(by.id('page-title')).getText()).toEqual(
-      'Driver Ranking'
-    );
+    expect(await getHeadingText()).toEqual('Driver Ranking');
 
     // Input match and team numbers.
     await setTextboxByIdTo('match_number_selection', '11');
diff --git a/scouting/www/driver_ranking/driver_ranking.ng.html b/scouting/www/driver_ranking/driver_ranking.ng.html
index 452359c..1fa1bc8 100644
--- a/scouting/www/driver_ranking/driver_ranking.ng.html
+++ b/scouting/www/driver_ranking/driver_ranking.ng.html
@@ -1,4 +1,6 @@
-<h2 id="page-title">Driver Ranking</h2>
+<div class="header">
+  <h2>Driver Ranking</h2>
+</div>
 
 <ng-container [ngSwitch]="section">
   <div *ngSwitchCase="'TeamSelection'">
diff --git a/scouting/www/notes/notes.component.ts b/scouting/www/notes/notes.component.ts
index f503e2d..c746ef9 100644
--- a/scouting/www/notes/notes.component.ts
+++ b/scouting/www/notes/notes.component.ts
@@ -175,4 +175,8 @@
     this.errorMessage = '';
     this.section = 'TeamSelection';
   }
+
+  labelToId(label: String): String {
+    return label.replaceAll(' ', '_').toLowerCase();
+  }
 }
diff --git a/scouting/www/notes/notes.ng.html b/scouting/www/notes/notes.ng.html
index b51a7ce..cb5e8ef 100644
--- a/scouting/www/notes/notes.ng.html
+++ b/scouting/www/notes/notes.ng.html
@@ -1,4 +1,6 @@
-<h2 id="page-title">Notes</h2>
+<div class="header">
+  <h2>Notes</h2>
+</div>
 
 <ng-container [ngSwitch]="section">
   <div *ngSwitchCase="'TeamSelection'">
@@ -58,7 +60,7 @@
                 class="form-check-input"
                 [(ngModel)]="newData[i]['keywordsData'][key]"
                 type="checkbox"
-                id="{{KEYWORD_CHECKBOX_LABELS[key]}}_{{i}}"
+                id="{{labelToId(KEYWORD_CHECKBOX_LABELS[key])}}_{{i}}"
                 name="{{KEYWORD_CHECKBOX_LABELS[key]}}"
               />
               <label
@@ -81,7 +83,7 @@
                 class="form-check-input"
                 [(ngModel)]="newData[i]['keywordsData'][key]"
                 type="checkbox"
-                id="{{KEYWORD_CHECKBOX_LABELS[key]}}"
+                id="{{labelToId(KEYWORD_CHECKBOX_LABELS[key])}}"
                 name="{{KEYWORD_CHECKBOX_LABELS[key]}}"
               />
               <label
diff --git a/tsconfig.json b/tsconfig.json
index aed3439..16fe795 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,8 +3,8 @@
     "experimentalDecorators": true,
     "strict": false,
     "noImplicitAny": false,
-    "target": "es6",
-    "lib": ["es6", "dom", "dom.iterable"],
+    "target": "es2021",
+    "lib": ["es2021", "dom", "dom.iterable"],
     "moduleResolution": "node"
   },
   "bazelOptions": {