From 4e8f593a15129a8b8becf46832f9f8778ea55e06 Mon Sep 17 00:00:00 2001
From: gasolin <gasolin@gmail.com>
Date: Fri, 14 Jul 2017 12:03:36 +0800
Subject: [PATCH] Bug 1377289 - [a11y] All tour images should be
 accessible;r=mossop,yzen

MozReview-Commit-ID: APBEXnNgxC4

--HG--
extra : rebase_source : 606a75fd9434868097cc99f89502c0fb12329160
---
 browser/extensions/onboarding/README.md             |  1 +
 browser/extensions/onboarding/content/onboarding.js | 12 ++++++------
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/browser/extensions/onboarding/README.md b/browser/extensions/onboarding/README.md
index f1d9ab2011c1..e9ce5075f66d 100644
--- a/browser/extensions/onboarding/README.md
+++ b/browser/extensions/onboarding/README.md
@@ -27,6 +27,7 @@ We would apply some rules:
 
 * All styles and ids should be formatted as `onboarding-*` to avoid conflict with the origin page.
 * All strings in `locales` should be formatted as `onboarding.*` for consistency.
+* For accessibility, images that are for presentation only should have `role="presentation"` attribute.
 
 ## How to change the order of tours
 
diff --git a/browser/extensions/onboarding/content/onboarding.js b/browser/extensions/onboarding/content/onboarding.js
index f3dbee30226e..d97ec051dabd 100644
--- a/browser/extensions/onboarding/content/onboarding.js
+++ b/browser/extensions/onboarding/content/onboarding.js
@@ -60,7 +60,7 @@ var onboardingTourset = {
           <p data-l10n-id="onboarding.tour-private-browsing.description2"></p>
         </section>
         <section class="onboarding-tour-content">
-          <img src="resource://onboarding/img/figure_private.svg" />
+          <img src="resource://onboarding/img/figure_private.svg" role="presentation"/>
         </section>
         <aside class="onboarding-tour-button-container">
           <button id="onboarding-tour-private-browsing-button" class="onboarding-tour-action-button" data-l10n-id="onboarding.tour-private-browsing.button"></button>
@@ -87,7 +87,7 @@ var onboardingTourset = {
           <p data-l10n-id="onboarding.tour-addons.description2"></p>
         </section>
         <section class="onboarding-tour-content">
-          <img src="resource://onboarding/img/figure_addons.svg" />
+          <img src="resource://onboarding/img/figure_addons.svg" role="presentation"/>
         </section>
         <aside class="onboarding-tour-button-container">
           <button id="onboarding-tour-addons-button" class="onboarding-tour-action-button" data-l10n-id="onboarding.tour-addons.button"></button>
@@ -114,7 +114,7 @@ var onboardingTourset = {
           <p data-l10n-id="onboarding.tour-customize.description2"></p>
         </section>
         <section class="onboarding-tour-content">
-          <img src="resource://onboarding/img/figure_customize.svg" />
+          <img src="resource://onboarding/img/figure_customize.svg" role="presentation"/>
         </section>
         <aside class="onboarding-tour-button-container">
           <button id="onboarding-tour-customize-button" class="onboarding-tour-action-button" data-l10n-id="onboarding.tour-customize.button"></button>
@@ -141,7 +141,7 @@ var onboardingTourset = {
           <p data-l10n-id="onboarding.tour-search.description2"></p>
         </section>
         <section class="onboarding-tour-content">
-          <img src="resource://onboarding/img/figure_search.svg" />
+          <img src="resource://onboarding/img/figure_search.svg" role="presentation"/>
         </section>
         <aside class="onboarding-tour-button-container">
           <button id="onboarding-tour-search-button" class="onboarding-tour-action-button" data-l10n-id="onboarding.tour-search.button"></button>
@@ -173,7 +173,7 @@ var onboardingTourset = {
           <p data-l10n-id="onboarding.tour-default-browser.description2"></p>
         </section>
         <section class="onboarding-tour-content">
-          <img src="resource://onboarding/img/figure_default.svg" />
+          <img src="resource://onboarding/img/figure_default.svg" role="presentation"/>
         </section>
         <aside class="onboarding-tour-button-container">
           <button id="onboarding-tour-default-browser-button" class="onboarding-tour-action-button" data-l10n-id="${defaultBrowserButtonId}"></button>
@@ -213,7 +213,7 @@ var onboardingTourset = {
             <input id="onboarding-tour-sync-email-input" type="email" required="true"></input><br />
             <button id="onboarding-tour-sync-button" class="onboarding-tour-action-button" data-l10n-id="onboarding.tour-sync.button"></button>
           </form>
-          <img src="resource://onboarding/img/figure_sync.svg" />
+          <img src="resource://onboarding/img/figure_sync.svg" role="presentation"/>
         </section>
       `;
       let emailInput = div.querySelector("#onboarding-tour-sync-email-input");