Add the decription for Textbox

This is for ziolko#25
bayesimpact · Apr 11, 2022 · 04bbaa7 · 04bbaa7
1 parent 3edc3f8
commit 04bbaa7
Showing 1 changed file with 10 additions and 2 deletions.
diff --git a/src/view/renderers/TextBox.tsx b/src/view/renderers/TextBox.tsx
@@ -44,6 +44,7 @@ const ValidityIcon = styled.span<{ invalid: boolean }>`
 
 export default observer(function TextBox({ node }: ComponentProps) {
   const [ref, style] = useFocusable(node);
+  const description = node.description
   let value = node.attributes.htmlValue;
 
   if (node.htmlTag === "input" && node.attributes.htmlType === "password") {
@@ -65,10 +66,17 @@ export default observer(function TextBox({ node }: ComponentProps) {
     <HorizontalBlockTemplate header={node.role ?? `<${node.htmlTag}>`} ref={ref} node={node}>
       {node.hasCustomAccessibleName && (
         <>
-          <HeaderPart>{node.accessibleName}</HeaderPart>{" "}
+          <HeaderPart>
+            {node.accessibleName}
+          </HeaderPart>{" "}
         </>
       )}
-        {spinButtonRange}
+      {description && (
+        node.isFocused ?
+          <HeaderPart>- {description} </HeaderPart> :
+          <HeaderPart title={description}>🛈 </HeaderPart>
+      )}
+      {spinButtonRange}
       <HeaderPart>
         {node.attributes.ariaRequired && "⭐"} <ValidityIcon invalid={!!node.attributes.ariaInvalid} />
       </HeaderPart>