Merge pull request #696 from SolidOS/profileEditA11y

fix date entry issue

Author: bourgeoa

src/tabs.ts

@@ -178,7 +178,7 @@ export function tabWidget (options: TabWidgetOptions) {
   const onClose = options.onClose
 
   const [selectedColor, color] = getColors(backgroundColor)
-  const bodyMainStyle = `flex: 2; width: auto; height: 100%; border: 0.1em; border-style: solid; border-color: ${selectedColor}; padding: 1em;`
+  const bodyMainStyle = `display: grid; width: auto; height: 100%; border: 0.1em; border-style: solid; border-color: ${selectedColor}; padding: 1em;`
   const rootElement: TabWidgetElement = dom.createElement('div') // 20200117a
 
   rootElement.setAttribute('style', style.tabsRootElement)

src/widgets/forms.js

@@ -712,16 +712,40 @@ field[ns.ui('Classifier').uri] = function (
     if (!ok) return callbackFunction(ok, body)
     return callbackFunction(ok, body)
   }
-  const box = makeSelectForNestedCategory(
+  // Create container for label and select
+  const outerBox = dom.createElement('div')
+  outerBox.setAttribute('class', 'classifierBox')
+  // Render label
+  const labelDiv = dom.createElement('div')
+  labelDiv.setAttribute('class', 'formFieldName classifierBox-label')
+  // Use fieldLabel to render ui:label if present
+  labelDiv.appendChild(fieldLabel(dom, category, form))
+  outerBox.appendChild(labelDiv)
+  // Render select
+  const selectBox = dom.createElement('div')
+  selectBox.setAttribute('class', 'formFieldValue classifierBox-selectBox')
+  const selectElement = makeSelectForNestedCategory(
     dom,
     kb,
     subject,
     category,
     dataDoc,
     checkOptions
   )
-  if (container) container.appendChild(box)
-  return box
+  // Set readonly if not editable
+  if (selectElement && selectElement.querySelectorAll) {
+    const selects = selectElement.querySelectorAll('select')
+    if (selects.length && !kb.updater.editable(dataDoc.uri)) {
+      selects.forEach(select => {
+        select.readOnly = true
+        select.style = style.textInputStyleUneditable
+      })
+    }
+  }
+  selectBox.appendChild(selectElement)
+  outerBox.appendChild(selectBox)
+  if (container) container.appendChild(outerBox)
+  return outerBox
 }
 
 /**         Choice field

test/unit/__snapshots__/tabs.test.ts.snap

@@ -8,7 +8,7 @@ exports[`tabWidget minimal setup of options renders content for first tab 1`] =
     style="height: 100%; width: 100%;"
   >
     <main
-      style="flex: 2; width: auto; height: 100%; border: 0.1em; border-style: solid; border-color: #e7e7db; padding: 1em;"
+      style="display: grid; width: auto; height: 100%; border: 0.1em; border-style: solid; border-color: #e7e7db; padding: 1em;"
     />
   </div>
   <div