Add keyboard accessible dragondrop to tiles

src/locales/resources_en_US.json

@@ -875,6 +875,14 @@
     "_description": "Label for settings button in the tile",
     "message": "Settings"
   },
+  "tile_grab_handle": {
+    "_description": "Label for grab handle in the tile",
+    "message": "Use arrow keys to reorder. Press up and down arrow keys to change position in column. Press left and right arrow keys to change position to another column."
+  },
+  "tile_moved_assistive_text": {
+    "_description": "Report of the new location of a recently moved tile",
+    "message": "{0} moved. Current column: {1} of {2}. Current position in column: {3} of {4}"
+  },
   "timepicker_button_label": {
     "_description": "Screen reader text for the timepicker component dropdown button",
     "message": "Choose time"

src/modules/tiles/tile-dashboard-config/tile-dashboard-config-reorder-data.ts

@@ -0,0 +1,5 @@
+export interface SkyTileDashboardConfigReorderData {
+  tileDescription: string;
+  column: number;
+  position: number;
+}

src/modules/tiles/tile-dashboard-config/tile-dashboard-config.ts

@@ -1,7 +1,15 @@
-import { SkyTileDashboardConfigLayout } from './tile-dashboard-config-layout';
-import { SkyTileDashboardConfigTile } from './tile-dashboard-config-tile';
+import {
+  SkyTileDashboardConfigLayout
+} from './tile-dashboard-config-layout';
+import {
+  SkyTileDashboardConfigTile
+} from './tile-dashboard-config-tile';
+import {
+  SkyTileDashboardConfigReorderData
+} from './tile-dashboard-config-reorder-data';
 
 export interface SkyTileDashboardConfig {
   tiles: SkyTileDashboardConfigTile[];
   layout: SkyTileDashboardConfigLayout;
+  movedTile?: SkyTileDashboardConfigReorderData;
 }

src/modules/tiles/tile-dashboard/fixtures/tile-dashboard.component.fixture.ts

@@ -1,10 +1,24 @@
-import { Component, ViewChild } from '@angular/core';
+import {
+  Component,
+  ViewChild
+} from '@angular/core';
 
-import { SkyTileDashboardComponent, SkyTileDashboardConfig } from '../../../tiles';
-import { Tile1TestComponent } from './tile1.component.fixture';
-import { Tile2TestComponent } from './tile2.component.fixture';
+import {
+  SkyTileDashboardConfig
+} from '../../tile-dashboard-config';
+import {
+  SkyTileDashboardComponent
+} from '../../tile-dashboard';
 
-import { TileTestContext } from './tile-context.fixture';
+import {
+  Tile1TestComponent
+} from './tile1.component.fixture';
+import {
+  Tile2TestComponent
+} from './tile2.component.fixture';
+import {
+  TileTestContext
+} from './tile-context.fixture';
 
 @Component({
   selector: 'sky-demo-app',
@@ -34,6 +48,30 @@ export class TileDashboardTestComponent {
               }
             }
           ]
+        },
+        {
+          id: 'sky-test-tile-3',
+          componentType: Tile2TestComponent,
+          providers: [
+            {
+              provide: TileTestContext,
+              useValue: {
+                id: 3
+              }
+            }
+          ]
+        },
+        {
+          id: 'sky-test-tile-4',
+          componentType: Tile2TestComponent,
+          providers: [
+            {
+              provide: TileTestContext,
+              useValue: {
+                id: 3
+              }
+            }
+          ]
         }
       ],
       layout: {
@@ -46,6 +84,14 @@ export class TileDashboardTestComponent {
             {
               id: 'sky-test-tile-1',
               isCollapsed: true
+            },
+            {
+              id: 'sky-test-tile-3',
+              isCollapsed: false
+            },
+            {
+              id: 'sky-test-tile-4',
+              isCollapsed: false
             }
           ]
         },
@@ -55,6 +101,14 @@ export class TileDashboardTestComponent {
               {
                 id: 'sky-test-tile-1',
                 isCollapsed: true
+              },
+              {
+                id: 'sky-test-tile-3',
+                isCollapsed: false
+              },
+              {
+                id: 'sky-test-tile-4',
+                isCollapsed: false
               }
             ]
           },

src/modules/tiles/tile-dashboard/tile-dashboard.component.html

@@ -1,3 +1,9 @@
+<span
+  aria-live="assertive"
+  class="sky-assistive-text"
+>
+  {{ tileMovedReport }}
+</span>
 <sky-tile-dashboard-column
   *ngFor="let column of config?.layout?.multiColumn"
   class="sky-tile-dashboard-layout-multi"

src/modules/tiles/tile-dashboard/tile-dashboard.component.scss

@@ -38,3 +38,9 @@
     margin-bottom: 0 !important;
   }
 }
+
+.sky-assistive-text {
+  @media screen {
+    @include sky-screen-reader-only();
+  }
+}

src/modules/tiles/tile-dashboard/tile-dashboard.component.ts

@@ -10,9 +10,23 @@ import {
   ViewChildren
 } from '@angular/core';
 
-import { SkyTileDashboardColumnComponent } from '../tile-dashboard-column';
-import { SkyTileDashboardConfig } from '../tile-dashboard-config';
-import { SkyTileDashboardService } from './tile-dashboard.service';
+import {
+  SkyResources
+} from '../../resources';
+import {
+  SkyMediaQueryService,
+  SkyMediaBreakpoints
+} from '../../media-queries';
+
+import {
+  SkyTileDashboardColumnComponent
+} from '../tile-dashboard-column';
+import {
+  SkyTileDashboardConfig
+} from '../tile-dashboard-config';
+import {
+  SkyTileDashboardService
+} from './tile-dashboard.service';
 
 @Component({
   selector: 'sky-tile-dashboard',
@@ -43,6 +57,8 @@ export class SkyTileDashboardComponent implements AfterViewInit, OnDestroy {
   @ViewChild('singleColumn', {read: SkyTileDashboardColumnComponent})
   public singleColumn: SkyTileDashboardColumnComponent;
 
+  public tileMovedReport: string;
+
   private _config: SkyTileDashboardConfig;
 
   private configSet = false;
@@ -52,10 +68,31 @@ export class SkyTileDashboardComponent implements AfterViewInit, OnDestroy {
   constructor(
     // HACK: This is public so it can be accessed via a unit test due to breaking changes
     // in RC5. https://github.com/angular/angular/issues/10854
-    public dashboardService: SkyTileDashboardService
+    public dashboardService: SkyTileDashboardService,
+    private mediaQuery: SkyMediaQueryService
   ) {
     dashboardService.configChange.subscribe((config: SkyTileDashboardConfig) => {
       this.configChange.emit(config);
+
+      // Update aria live region with tile drag info
+      if (config.movedTile) {
+        let message = SkyResources.getString('tile_moved_assistive_text');
+        message = message.replace('{0}', config.movedTile.tileDescription);
+        message = message.replace('{3}', config.movedTile.position.toString());
+        if (
+          this.mediaQuery.current === SkyMediaBreakpoints.xs ||
+          this.mediaQuery.current === SkyMediaBreakpoints.sm
+        ) {
+          message = message.replace('{1}', '1');
+          message = message.replace('{2}', '1');
+          message = message.replace('{4}', config.layout.singleColumn.tiles.length.toString());
+        } else {
+          message = message.replace('{1}', config.movedTile.column.toString());
+          message = message.replace('{2}', config.layout.multiColumn.length.toString());
+          message = message.replace('{4}', config.layout.multiColumn[config.movedTile.column - 1].tiles.length.toString());
+        }
+        this.tileMovedReport = message;
+      }
     });
   }
 

src/modules/tiles/tile-dashboard/tile-dashboard.module.ts

@@ -6,6 +6,7 @@ import { DragulaService } from 'ng2-dragula/ng2-dragula';
 import { SkyTileDashboardComponent } from './tile-dashboard.component';
 import { SkyTileDashboardColumnModule } from '../tile-dashboard-column';
 import { SkyMediaQueryModule } from '../../media-queries';
+import { SkyResourcesModule } from '../../resources';
 
 @NgModule({
   declarations: [
@@ -17,6 +18,7 @@ import { SkyMediaQueryModule } from '../../media-queries';
   imports: [
     CommonModule,
     SkyTileDashboardColumnModule,
+    SkyResourcesModule,
     SkyMediaQueryModule
   ],
   exports: [