From 412eeb7fa75209dc37173e256734b2b804fa77c7 Mon Sep 17 00:00:00 2001
From: Viktor Lukashov <viktor@vaadin.com>
Date: Mon, 23 Jul 2018 16:56:38 +0300
Subject: [PATCH] add an aria-label to avoid the dialog content being read
 twice

Without an `aria-label` screen readers (NVDA, JAWS, VoiceOver) read the dialog content twice: once as a title and another time as the content.

Depends on https://github.com/vaadin/vaadin-dialog/pull/91
Fixes #29
---
 src/vaadin-confirm-dialog.html | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/vaadin-confirm-dialog.html b/src/vaadin-confirm-dialog.html
index 0b86834..1c5ea9d 100644
--- a/src/vaadin-confirm-dialog.html
+++ b/src/vaadin-confirm-dialog.html
@@ -20,7 +20,12 @@
         display: none;
       }
     </style>
-    <vaadin-dialog id="dialog" opened="{{opened}}" no-close-on-outside-click no-close-on-esc>
+    <vaadin-dialog
+      id="dialog"
+      opened="{{opened}}"
+      aria-label="[[_getAriaLabel(header)]]"
+      no-close-on-outside-click
+      no-close-on-esc>
       <template>
         <div part="header">
           <slot name="header">
@@ -99,7 +104,8 @@ <h3 class="header">[[header]]</h3>
              * Set the confirmation dialog title.
              */
             header: {
-              type: String
+              type: String,
+              value: ""
             },
             /**
              * Set the message or confirmation question.
@@ -216,6 +222,10 @@ <h3 class="header">[[header]]</h3>
           this.dispatchEvent(new CustomEvent('reject'));
           this.opened = false;
         }
+
+        _getAriaLabel(header) {
+          return header || "confirmation";
+        }
       }
 
       customElements.define(ConfirmDialogElement.is, ConfirmDialogElement);