Merge pull request #33 from ishythefishy/accessibility-fixes

Accessibility fixes for scale info toggle

Author: whitep4nth3r

apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.html

@@ -11,9 +11,7 @@ <h4 class="scaleMap__title">Degrees</h4>
       </div>
       <button class="scaleDegrees__toggle"
               aria-label="Scale Degrees Info Toggle"
-              aria-controls="scaleMapInfo"
               type="button"
-              [attr.aria-expanded]="showScaleMapInfo"
               (click)="toggleScaleMapInfo()">{{scaleDegreesToggleText}}
       </button>
     </div>
@@ -32,12 +30,11 @@ <h5 class="scaleDisplay__note">
   </div>
 
   <div class="scaleMapInfo"
-       id="scaleMapInfo"
+       [attr.aria-expanded]="showScaleMapInfo"
        *ngIf="showScaleMapInfo">
     <h2 class="scaleMapInfo__title">About Scale Degrees
       <button class="scaleMapInfo__close"
-              aria-label="Scale Degrees Info Toggle"
-              aria-controls="scaleMapInfo"
+              aria-label="Scale Degrees Info Close"
               type="button"
               (click)="toggleScaleMapInfo()">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">

apps/fretonator-web/src/app/pages/home/home-index/__snapshots__/home-index.component.spec.ts.snap

@@ -1057,8 +1057,6 @@ exports[`HomeIndexComponent should create 1`] = `
                     </span>
                   </div>
                   <button
-                    aria-controls="scaleMapInfo"
-                    aria-expanded="false"
                     aria-label="Scale Degrees Info Toggle"
                     class="scaleDegrees__toggle"
                     type="button"