Merge pull request #203 from knittingcodemonkey/iFrameTitlesAndLandmarks

feat(Accessibility): Add titles, values and landmarks

Author: ashwin-sureshkumar

src/app/app.component.html

@@ -2,14 +2,18 @@
   <header>
     <app-toolbar (navToggle)="sidenav.toggle()"></app-toolbar>
   </header>
-  <mat-sidenav-container>
-    <mat-sidenav #sidenav role="navigation">
-      <mat-nav-list (click)="sidenav.toggle()">
-        <a *ngFor="let menu of menus" mat-list-item routerLinkActive="active" [routerLinkActiveOptions]="menu.options" [routerLink]="menu.link">
+  <main>
+    <mat-sidenav-container>
+      <mat-sidenav #sidenav role="navigation">
+        <mat-nav-list (click)="sidenav.toggle()">
+          <a *ngFor="let menu of menus" mat-list-item routerLinkActive="active" [routerLinkActiveOptions]="menu.options" [routerLink]="menu.link">
             {{menu.title}}
           </a>
-      </mat-nav-list>
-    </mat-sidenav>
-    <router-outlet></router-outlet>
-  </mat-sidenav-container>
-</div>
+        </mat-nav-list>
+      </mat-sidenav>
+      <article>
+        <router-outlet></router-outlet>
+      </article>
+    </mat-sidenav-container>
+  </main>
+</div>

src/app/operators/_operator-theme.scss

@@ -2,12 +2,12 @@
 
 $operator-border: #f3f3f3;
 $operator-active: #62757f;
-$link-color: #2196F3;
+$link-color: #2196f3;
 
 @mixin operator-theme($theme) {
   $primary: mat-color(map-get($theme, primary));
   $accent: mat-color(map-get($theme, accent));
-  $operator-active-background: rgba($operator-active, .7);
+  $operator-active-background: rgba($operator-active, 0.7);
 
   rx-marbles > div {
     text-align: center;
@@ -24,6 +24,10 @@ $link-color: #2196F3;
     color: $link-color;
   }
 
+  app-operator a:hover {
+    text-decoration: underline;
+  }
+
   .operator-list {
     a {
       border-bottom: 1px solid $operator-border;

src/app/operators/components/operator-examples/operator-examples.component.html

@@ -1,19 +1,14 @@
 <h2> Examples </h2>
-<div class="code-example"
-     *ngFor="let example of operatorExamples"
-     appHighlightJs>
+<div class="code-example" *ngFor="let example of operatorExamples" appHighlightJs>
   <div class="code-block mat-elevation-z2">
     <div class="example-header">
-      <div class="header-title"
-           [innerHTML]="example.name"></div>
-      <button mat-icon-button
-              (click)="copyToClipboard.emit(example.code)"
-              matTooltip="Copy">
+      <div class="header-title" [innerHTML]="example.name"></div>
+      <button mat-icon-button (click)="copyToClipboard.emit(example.code)" value="Copy" aria-label="Copy" matTooltip="Copy">
         <mat-icon>content_copy</mat-icon>
       </button>
     </div>
     <div class="bin-wrapper">
-      <iframe [src]="example.externalLink.url | safeUrl"></iframe>
+      <iframe [src]="example.externalLink.url | safeUrl" [title]="example.name"></iframe>
     </div>
   </div>
 </div>