Make the Gallery a bit more accessible by using FocusList and FocusIt…

…em on the navBar. PiperOrigin-RevId: 225458095
angulardart · Dec 14, 2018 · 937fd39 · 937fd39
1 parent 8f758ec
commit 937fd39
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 3 deletions.
diff --git a/angular_components/lib/css/_color_material.scss b/angular_components/lib/css/_color_material.scss
@@ -514,8 +514,6 @@ $mat-amber: $mat-amber-500;
 // Link colors
 //
 // Prefer the mat-link mixin in _typography.scss.
-//
-// Based on discussion at go/mat-link-colors.
 $mat-link-default: $mat-blue-700;
 $mat-link-visited: $mat-deep-purple-500;
 $mat-link-active: $mat-red-700;

diff --git a/angular_gallery/lib/builder/template/gallery.dart.mustache b/angular_gallery/lib/builder/template/gallery.dart.mustache
@@ -6,6 +6,8 @@ import 'package:angular_forms/angular_forms.dart';
 import 'package:angular_components/app_layout/material_persistent_drawer.dart';
 import 'package:angular_components/content/deferred_content.dart';
 import 'package:angular_components/focus/focus.dart';
+import 'package:angular_components/focus/focus_item.dart';
+import 'package:angular_components/focus/focus_list.dart';
 import 'package:angular_components/highlighted_text/highlighted_value.dart';
 import 'package:angular_components/material_button/material_button.dart';
 import 'package:angular_components/material_checkbox/material_checkbox.dart';
@@ -28,6 +30,8 @@ import 'gallery_route_library.dart';
     directives: [
       AutoFocusDirective,
       DeferredContentDirective,
+      FocusItemDirective,
+      FocusListDirective,
       HighlightedValueComponent,
       MaterialButtonComponent,
       MaterialCheckboxComponent,

diff --git a/angular_gallery/lib/builder/template/gallery.html.mustache b/angular_gallery/lib/builder/template/gallery.html.mustache
@@ -9,10 +9,11 @@
           label="Search"
           [filterable]="exampleOptions">
     </material-select-searchbox>
-    <material-list>
+    <material-list focusList>
       <div group *ngFor="let exampleGroup of exampleOptions.optionGroups">
         <div label *ngIf="searchbox.inputText.isNotEmpty">Search Results</div>
         <material-list-item *ngFor="let example of exampleGroup"
+                            focusItem
                             [routerLink]="example.link"
                             routerLinkActive="router-link-active">
           <highlight-value [value]="example"></highlight-value>