Make the description label an HTML label element.

Also, set the ‘for’ attribute correctly for accessibility.

jupyter-js-widgets/css/widgets-base.css

@@ -261,6 +261,11 @@
 
 /* Widget Label Styling */
 
+/* Override Bootstrap label css */
+.jupyter-widgets label.widget-label {
+    margin-bottom: initial;
+}
+
 .widget-label-basic {
     /* Basic Label */
     color: var(--jp-widgets-label-color);

jupyter-js-widgets/src/widget_color.ts

@@ -9,6 +9,10 @@ import {
     DescriptionView
 } from './widget_description';
 
+import {
+    uuid
+} from './utils';
+
 import * as _ from 'underscore';
 
 
@@ -38,6 +42,7 @@ class ColorPickerView extends DescriptionView {
 
         this._textbox = document.createElement('input');
         this._textbox.setAttribute('type', 'text');
+        this._textbox.id = this.label.htmlFor = uuid();
 
         this._color_container.appendChild(this._textbox);
         this._textbox.value = this.model.get('value');

jupyter-js-widgets/src/widget_date.ts

@@ -9,6 +9,10 @@ import {
     CoreDescriptionModel
 } from './widget_core';
 
+import {
+    uuid
+} from './utils';
+
 import {
     ManagerBase
 } from './manager-base'
@@ -86,6 +90,8 @@ class DatePickerView extends DescriptionView {
 
         this._datepicker = document.createElement('input');
         this._datepicker.setAttribute('type', 'date');
+        this._datepicker.id = this.label.htmlFor = uuid();
+
         this.el.appendChild(this._datepicker);
 
         this.listenTo(this.model, 'change:value', this._update_value);

jupyter-js-widgets/src/widget_description.ts

@@ -39,7 +39,7 @@ export
 class DescriptionView extends DOMWidgetView {
 
     render() {
-        this.label = document.createElement('div');
+        this.label = document.createElement('label');
         this.el.appendChild(this.label);
         this.label.className = 'widget-label';
         this.label.style.display = 'none';
@@ -60,7 +60,7 @@ class DescriptionView extends DOMWidgetView {
         this.label.title = description;
     }
 
-    label: HTMLDivElement;
+    label: HTMLLabelElement;
 }
 
 /**

jupyter-js-widgets/src/widget_int.ts

@@ -13,6 +13,10 @@ import {
     DOMWidgetView
 } from './widget';
 
+import {
+    uuid
+} from './utils';
+
 import * as _ from 'underscore';
 import * as $ from 'jquery';
 import 'jquery-ui/ui/widgets/slider';
@@ -485,6 +489,7 @@ class IntTextView extends DescriptionView {
 
         this.textbox = document.createElement('input');
         this.textbox.setAttribute('type', 'text');
+        this.textbox.id = this.label.htmlFor = uuid();
         this.el.appendChild(this.textbox);
 
         this.update(); // Set defaults.

jupyter-js-widgets/src/widget_selection.ts

@@ -9,6 +9,10 @@ import {
     DescriptionView
 } from './widget_description';
 
+import {
+    uuid
+} from './utils';
+
 import {
     unpack_models, ViewList
 } from './widget';
@@ -78,6 +82,7 @@ class DropdownView extends DescriptionView {
         this.el.classList.add('widget-dropdown');
 
         this.listbox = document.createElement('select');
+        this.listbox.id = this.label.htmlFor = uuid();
         this.el.appendChild(this.listbox);
         this._updateOptions();
         this.update();
@@ -160,6 +165,7 @@ class SelectView extends DescriptionView {
         this.el.classList.add('widget-select');
 
         this.listbox = document.createElement('select');
+        this.listbox.id = this.label.htmlFor = uuid();
         this.el.appendChild(this.listbox);
         this._updateOptions();
         this.update();

jupyter-js-widgets/src/widget_string.ts

@@ -9,6 +9,10 @@ import {
     DescriptionView
 } from './widget_description';
 
+import {
+    uuid
+} from './utils';
+
 import * as _ from 'underscore';
 
 export
@@ -160,6 +164,7 @@ class TextareaView extends DescriptionView {
 
         this.textbox = document.createElement('textarea');
         this.textbox.setAttribute('rows', '5');
+        this.textbox.id = this.label.htmlFor = uuid();
         this.el.appendChild(this.textbox);
 
         this.update(); // Set defaults.
@@ -278,6 +283,7 @@ class TextView extends DescriptionView {
 
         this.textbox = document.createElement('input');
         this.textbox.setAttribute('type', this.inputType);
+        this.textbox.id = this.label.htmlFor = uuid();
         this.el.appendChild(this.textbox);
 
         this.update(); // Set defaults.