From 9a4da0fcd56d565beb7f939350595c748f503588 Mon Sep 17 00:00:00 2001
From: Felix Zapata <fzberlinches@gmail.com>
Date: Sun, 19 Feb 2017 18:36:22 +0100
Subject: [PATCH] feat(announcer): add iron-a11y-announcer component to advise
 when the category has changed

---
 bower.json           | 1 +
 src/news-app.html    | 4 ++++
 src/news-header.html | 9 ++++++++-
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/bower.json b/bower.json
index fd71a256..d29975b0 100644
--- a/bower.json
+++ b/bower.json
@@ -9,6 +9,7 @@
     "polymer": "polymer/polymer#^1.4.0",
     "app-layout": "polymerelements/app-layout#master",
     "app-route": "polymerelements/app-route#^0.9.1",
+    "iron-a11y-announcer": "PolymerElements/iron-a11y-announcer#^1.0.5",
     "iron-flex-layout": "polymerelements/iron-flex-layout#^1.0.0",
     "iron-icon": "polymerelements/iron-icon#^1.0.0",
     "iron-iconset-svg": "polymerelements/iron-iconset-svg#^1.0.0",
diff --git a/src/news-app.html b/src/news-app.html
index 85da1de8..68b5bcd2 100644
--- a/src/news-app.html
+++ b/src/news-app.html
@@ -13,6 +13,7 @@
 <link rel="import" href="../bower_components/app-route/app-location.html">
 <link rel="import" href="../bower_components/app-route/app-route.html">
 <link rel="import" href="../bower_components/iron-pages/iron-pages.html">
+<link rel="import" href="../bower_components/iron-a11y-announcer/iron-a11y-announcer.html">
 
 <link rel="import" href="news-data.html">
 <link rel="import" href="news-nav.html">
@@ -224,6 +225,9 @@
       },
 
       attached: function() {
+
+        Polymer.IronA11yAnnouncer.requestAvailability();
+
         Polymer.RenderStatus.afterNextRender(this, function() {
           this.listen(window, 'online', '_notifyNetworkStatus');
           this.listen(window, 'offline', '_notifyNetworkStatus');
diff --git a/src/news-header.html b/src/news-header.html
index af820d17..21a0f8f6 100644
--- a/src/news-header.html
+++ b/src/news-header.html
@@ -319,7 +319,10 @@
 
         categories: Array,
 
-        category: Object,
+        category: {
+          type: Object,
+          observer: '_categoryChanged'
+        },
 
         smallScreen: Boolean,
 
@@ -330,6 +333,10 @@
 
       },
 
+      _categoryChanged: function(value) {
+        this.fire('iron-announce', { text: value.title + ' page loaded' }, { bubbles: true });
+      },
+
       _menuIcon: function(drawerOpened) {
         return drawerOpened ? 'close' : 'menu';
       },