[RFC PATCH widget-toolkit 3/3] form: size field: add optional field description

[Timo Meschkat <timo.meschkat@datenzelt.de>]

The label alone, e.g. 'Memory', does not always tell what the value is
for. Allow describing it, e.g. as the memory of a VM. The description
is shown as tooltip together with the suffix hint and read by screen
readers.

Signed-off-by: Timo Meschkat <timo.meschkat@datenzelt.de>
---
 src/form/SizeUnitField.js | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/form/SizeUnitField.js b/src/form/SizeUnitField.js
index 9fd7308..4e9aef9 100644
--- a/src/form/SizeUnitField.js
+++ b/src/form/SizeUnitField.js
@@ -28,6 +28,9 @@ Ext.define('Proxmox.form.SizeUnitField', {
 
     emptyText: '',
 
+    // shown as tooltip and read by screen readers
+    fieldDescription: undefined,
+
     decimalPrecision: 2,
 
     // otherwise round to whole backend units
@@ -43,9 +46,13 @@ Ext.define('Proxmox.form.SizeUnitField', {
 
         // e.g. '512M, 8G'
         let examples = me.units.slice(0, 2).map((unit, i) => `${i === 0 ? 512 : 8}${unit[0]}`);
-        let hint = Ext.htmlEncode(
-            Ext.String.format(gettext('Also accepts a unit suffix, e.g. {0}'), examples.join(', ')),
+        let hint = Ext.String.format(
+            gettext('Also accepts a unit suffix, e.g. {0}'),
+            examples.join(', '),
         );
+        let descriptions = [me.fieldDescription, hint].filter((text) => !!text);
+        let qtip = descriptions.map((text) => Ext.htmlEncode(text)).join('<br>');
+        let ariaDescription = Ext.htmlEncode(descriptions.join('. '));
 
         me.items = [
             {
@@ -56,7 +63,7 @@ Ext.define('Proxmox.form.SizeUnitField', {
                 flex: 1,
                 // the field label belongs to the container, not the inputs
                 ariaLabel: me.fieldLabel,
-                inputAttrTpl: `data-qtip="${hint}" aria-description="${hint}"`,
+                inputAttrTpl: `data-qtip="${qtip}" aria-description="${ariaDescription}"`,
                 fieldStyle: 'text-align: right',
                 allowBlank: me.allowBlank,
                 emptyText: me.emptyText,
-- 
2.47.3