Dental representation updates

Author: alopezo

src/app/benefits-demo/clinical-record/clinical-record.component.html

@@ -47,7 +47,7 @@ <h1>{{ getPatientDisplayName(patient) }}</h1>
       class="module-option"
       [class.active]="selectedModule === 'dentistry'"
       (click)="setSelectedModule('dentistry')">
-      Dentistry
+      Dental
     </button>
     <button
       mat-stroked-button

src/app/benefits-demo/dentistry-record/dentistry-odontogram-anatomic/dentistry-odontogram-anatomic.component.css

@@ -29,11 +29,6 @@
   transition: color 0.16s ease;
 }
 
-.tooth:focus-visible {
-  color: #5361e6;
-  outline: none;
-}
-
 .tooth:hover {
   color: #6678ea;
 }

src/app/benefits-demo/dentistry-record/dentistry-odontogram-anatomic/dentistry-odontogram-anatomic.component.html

@@ -102,15 +102,11 @@
         [class.selected]="isSelected(tooth.id)"
         [attr.aria-label]="'Tooth ' + tooth.notations.fdi"
         [attr.aria-selected]="isSelected(tooth.id)"
-        role="option"
-        tabindex="0"
         (mousedown)="$event.preventDefault()"
         (click)="onPinTooth(tooth)"
         (mouseenter)="onMouseEnter(tooth, $event)"
         (mousemove)="toothMouseMove.emit($event)"
-        (mouseleave)="toothMouseLeave.emit()"
-        (keydown.enter)="onPinTooth(tooth)"
-        (keydown.space)="onPinTooth(tooth); $event.preventDefault()">
+        (mouseleave)="toothMouseLeave.emit()">
         <path class="tooth-outline" [attr.d]="tooth.outlinePath"></path>
         <path class="tooth-shadow" [attr.d]="tooth.shadowPath"></path>
         <ng-container *ngFor="let option of surfaceOptions">

src/app/benefits-demo/dentistry-record/dentistry-odontogram-root-surface/dentistry-odontogram-root-surface.component.css

@@ -51,9 +51,8 @@
   color: #2f49d1;
 }
 
-.root-tooth:focus-visible {
-  outline: none;
-  color: #5361e6;
+.root-tooth.selected .tooth-node {
+  fill: rgba(47, 73, 209, 0.24);
 }
 
 .tooth-node {
@@ -96,7 +95,7 @@
 
 .tooth-label {
   fill: #2f3847;
-  font-size: 6px;
+  font-size: 12px;
   font-weight: 700;
   text-anchor: middle;
   user-select: none;

src/app/benefits-demo/dentistry-record/dentistry-odontogram-root-surface/dentistry-odontogram-root-surface.component.html

@@ -25,15 +25,11 @@ <h3>Root Surface Odontogram (Dennison)</h3>
         class="root-tooth"
         [class.selected]="isSelected(positioned.tooth.id)"
         [attr.transform]="'translate(' + positioned.x + ',' + positioned.y + ') scale(' + getToothScale(positioned.tooth) + ')'"
-        role="option"
-        tabindex="0"
         [attr.aria-label]="'Tooth ' + positioned.tooth.notations.fdi"
         [attr.aria-selected]="isSelected(positioned.tooth.id)"
         (mouseenter)="onMouseEnter(positioned.tooth, $event)"
         (mousemove)="toothMouseMove.emit($event)"
-        (mouseleave)="toothMouseLeave.emit()"
-        (keydown.enter)="onPinTooth(positioned.tooth)"
-        (keydown.space)="onPinTooth(positioned.tooth); $event.preventDefault()">
+        (mouseleave)="toothMouseLeave.emit()">
         <circle
           class="tooth-node"
           cx="0"
@@ -72,15 +68,11 @@ <h3>Root Surface Odontogram (Dennison)</h3>
         class="root-tooth"
         [class.selected]="isSelected(positioned.tooth.id)"
         [attr.transform]="'translate(' + positioned.x + ',' + positioned.y + ') scale(' + getToothScale(positioned.tooth) + ')'"
-        role="option"
-        tabindex="0"
         [attr.aria-label]="'Tooth ' + positioned.tooth.notations.fdi"
         [attr.aria-selected]="isSelected(positioned.tooth.id)"
         (mouseenter)="onMouseEnter(positioned.tooth, $event)"
         (mousemove)="toothMouseMove.emit($event)"
-        (mouseleave)="toothMouseLeave.emit()"
-        (keydown.enter)="onPinTooth(positioned.tooth)"
-        (keydown.space)="onPinTooth(positioned.tooth); $event.preventDefault()">
+        (mouseleave)="toothMouseLeave.emit()">
         <circle
           class="tooth-node"
           cx="0"
@@ -119,15 +111,11 @@ <h3>Root Surface Odontogram (Dennison)</h3>
         class="root-tooth"
         [class.selected]="isSelected(positioned.tooth.id)"
         [attr.transform]="'translate(' + positioned.x + ',' + positioned.y + ') scale(' + getToothScale(positioned.tooth) + ')'"
-        role="option"
-        tabindex="0"
         [attr.aria-label]="'Tooth ' + positioned.tooth.notations.fdi"
         [attr.aria-selected]="isSelected(positioned.tooth.id)"
         (mouseenter)="onMouseEnter(positioned.tooth, $event)"
         (mousemove)="toothMouseMove.emit($event)"
-        (mouseleave)="toothMouseLeave.emit()"
-        (keydown.enter)="onPinTooth(positioned.tooth)"
-        (keydown.space)="onPinTooth(positioned.tooth); $event.preventDefault()">
+        (mouseleave)="toothMouseLeave.emit()">
         <circle
           class="tooth-node"
           cx="0"
@@ -166,15 +154,11 @@ <h3>Root Surface Odontogram (Dennison)</h3>
         class="root-tooth"
         [class.selected]="isSelected(positioned.tooth.id)"
         [attr.transform]="'translate(' + positioned.x + ',' + positioned.y + ') scale(' + getToothScale(positioned.tooth) + ')'"
-        role="option"
-        tabindex="0"
         [attr.aria-label]="'Tooth ' + positioned.tooth.notations.fdi"
         [attr.aria-selected]="isSelected(positioned.tooth.id)"
         (mouseenter)="onMouseEnter(positioned.tooth, $event)"
         (mousemove)="toothMouseMove.emit($event)"
-        (mouseleave)="toothMouseLeave.emit()"
-        (keydown.enter)="onPinTooth(positioned.tooth)"
-        (keydown.space)="onPinTooth(positioned.tooth); $event.preventDefault()">
+        (mouseleave)="toothMouseLeave.emit()">
         <circle
           class="tooth-node"
           cx="0"

src/app/benefits-demo/dentistry-record/dentistry-odontogram-root-surface/dentistry-odontogram-root-surface.component.ts

@@ -74,13 +74,8 @@ export class DentistryOdontogramRootSurfaceComponent implements OnInit, OnChange
   }
 
   getToothScale(tooth: OdontogramTooth): number {
-    if (this.isMolar(tooth)) {
-      return 1.12;
-    }
-    if (this.isPremolar(tooth)) {
-      return 1;
-    }
-    return 0.9;
+    void tooth;
+    return 1;
   }
 
   getCenterPolygonPoints(tooth: OdontogramTooth): string {