fix: enhance accessibility by adding aria-labelledby to the textarea for improved screen reader support

Signed-off-by: Parth Raiyani <[email protected]>
Change-Id: I0207c7c914034160fa9a01f4135beac2be637cbf

Author: rparth07

browser/src/layer/marker/TextInput.js

@@ -405,6 +405,11 @@ window.L.TextInput = window.L.Layer.extend({
 	_initLayout: function() {
 		this._container = window.L.DomUtil.create('div', 'clipboard-container');
 		this._container.id = 'doc-clipboard-container';
+
+		this._textAreaLabel = window.L.DomUtil.create('label', 'visuallyhidden', this._container);
+		this._textAreaLabel.id = 'clipboard-area-label';
+		this._textAreaLabel.innerHTML = 'clipboard area';
+
 		// The textarea allows the keyboard to pop up and so on.
 		// Note that the contents of the textarea are NOT deleted on each composed
 		// word, in order to make
@@ -416,10 +421,8 @@ window.L.TextInput = window.L.Layer.extend({
 		this._textArea.setAttribute('autocorrect', 'off');
 		this._textArea.setAttribute('autocomplete', 'off');
 		this._textArea.setAttribute('spellcheck', 'false');
+		this._textArea.setAttribute('aria-labelledby', this._textAreaLabel.id);
 
-		this._textAreaLabel = window.L.DomUtil.create('label', 'visuallyhidden', this._container);
-		this._textAreaLabel.setAttribute('for', 'clipboard-area');
-		this._textAreaLabel.innerHTML = 'clipboard area';
 		if (this.hasAccessibilitySupport()) {
 			this._setSelectionFlag(false);
 		}