From 716db3857dc9529884d3812d7a0106bcbc825d3d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pekka=20Maanp=C3=A4=C3=A4?= <pekkamaa@vaadin.com>
Date: Tue, 9 Mar 2021 15:20:41 +0200
Subject: [PATCH 1/2] fix: set text-area's aria-label as property

fixes #54
---
 src/vaadin-message-input-text-area.d.ts |  2 +-
 src/vaadin-message-input-text-area.js   | 13 +++++++++++--
 src/vaadin-message-input.js             |  8 ++------
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/vaadin-message-input-text-area.d.ts b/src/vaadin-message-input-text-area.d.ts
index 5f4ab2a..c75a415 100644
--- a/src/vaadin-message-input-text-area.d.ts
+++ b/src/vaadin-message-input-text-area.d.ts
@@ -11,7 +11,7 @@ import { TextAreaElement } from '@vaadin/vaadin-text-field/src/vaadin-text-area.
  * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin#readme)
  */
 declare class MessageInputTextAreaElement extends TextAreaElement {
-  _setAriaLabel(message: string): void;
+  ariaLabel: string;
 }
 
 declare global {
diff --git a/src/vaadin-message-input-text-area.js b/src/vaadin-message-input-text-area.js
index 132f298..f9a2fc4 100644
--- a/src/vaadin-message-input-text-area.js
+++ b/src/vaadin-message-input-text-area.js
@@ -39,6 +39,15 @@ class MessageInputTextAreaElement extends TextAreaElement {
     return '2.0.0-alpha1';
   }
 
+  static get properties() {
+    return {
+      ariaLabel: {
+        type: String,
+        observer: '__ariaLabelChanged'
+      }
+    };
+  }
+
   ready() {
     super.ready();
 
@@ -59,9 +68,9 @@ class MessageInputTextAreaElement extends TextAreaElement {
     });
   }
 
-  _setAriaLabel(message) {
+  __ariaLabelChanged(ariaLabel) {
     // Set aria-label to provide an accessible name for the labelless input
-    this.inputElement.setAttribute('aria-label', message);
+    this.inputElement.setAttribute('aria-label', ariaLabel);
   }
 }
 
diff --git a/src/vaadin-message-input.js b/src/vaadin-message-input.js
index 5a8db29..8099dfc 100644
--- a/src/vaadin-message-input.js
+++ b/src/vaadin-message-input.js
@@ -59,8 +59,7 @@ class MessageInputElement extends ElementMixin(ThemableMixin(PolymerElement)) {
         value: () => ({
           send: 'Send',
           message: 'Message'
-        }),
-        observer: '__i18nChanged'
+        })
       },
 
       /**
@@ -91,6 +90,7 @@ class MessageInputElement extends ElementMixin(ThemableMixin(PolymerElement)) {
         disabled="[[disabled]]"
         value="{{value}}"
         placeholder="[[i18n.message]]"
+        aria-label="[[i18n.message]]"
         on-enter="__submit"
       ></vaadin-message-input-text-area>
       <vaadin-message-input-button disabled="[[disabled]]" theme="primary contained" on-click="__submit"
@@ -120,10 +120,6 @@ class MessageInputElement extends ElementMixin(ThemableMixin(PolymerElement)) {
     }
     this.shadowRoot.querySelector('vaadin-message-input-text-area').focus();
   }
-
-  __i18nChanged(i18n) {
-    this.shadowRoot.querySelector('vaadin-message-input-text-area')._setAriaLabel(i18n.message);
-  }
 }
 
 customElements.define(MessageInputElement.is, MessageInputElement);

From 0125ae5f1c3f51b99b711192019cecdaaf00f4bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pekka=20Maanp=C3=A4=C3=A4?= <pekkamaa@vaadin.com>
Date: Tue, 9 Mar 2021 15:48:45 +0200
Subject: [PATCH 2/2] Remove aria-label attribute when property is falsy

---
 src/vaadin-message-input-text-area.js | 6 +++++-
 test/message-input.test.js            | 5 +++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/vaadin-message-input-text-area.js b/src/vaadin-message-input-text-area.js
index f9a2fc4..3e51a27 100644
--- a/src/vaadin-message-input-text-area.js
+++ b/src/vaadin-message-input-text-area.js
@@ -70,7 +70,11 @@ class MessageInputTextAreaElement extends TextAreaElement {
 
   __ariaLabelChanged(ariaLabel) {
     // Set aria-label to provide an accessible name for the labelless input
-    this.inputElement.setAttribute('aria-label', ariaLabel);
+    if (ariaLabel) {
+      this.inputElement.setAttribute('aria-label', ariaLabel);
+    } else {
+      this.inputElement.removeAttribute('aria-label');
+    }
   }
 }
 
diff --git a/test/message-input.test.js b/test/message-input.test.js
index 7239beb..bd066b8 100644
--- a/test/message-input.test.js
+++ b/test/message-input.test.js
@@ -105,6 +105,11 @@ describe('message-input', () => {
       messageInput.i18n = { ...messageInput.i18n, message: 'Viesti' };
       expect(textArea.inputElement.getAttribute('aria-label')).to.be.equal('Viesti');
     });
+
+    it('should remove aria-label attribute when translation not defined', () => {
+      messageInput.i18n = {};
+      expect(textArea.inputElement.hasAttribute('aria-label')).to.equal(false);
+    });
   });
 
   describe('disabled property', () => {