Delete tooltip concept from FieldLabel, convert two uses to description (#2475)

* delete tooltip concept from FieldLabel, convert two uses to description

* fix instance create test

* use instance name as placeholder for hostname input

Author: david-crespo

app/components/form/fields/FileField.tsx

@@ -25,7 +25,6 @@ export function FileField<
   id,
   name,
   label,
-  tooltipText,
   control,
   required = false,
   accept,
@@ -49,7 +48,7 @@ export function FileField<
   return (
     <div>
       <div className="mb-2">
-        <FieldLabel id={`${id}-label`} htmlFor={id} tip={tooltipText} optional={!required}>
+        <FieldLabel id={`${id}-label`} htmlFor={id} optional={!required}>
           {label}
         </FieldLabel>
         {description && <TextInputHint id={`${id}-help-text`}>{description}</TextInputHint>}

app/components/form/fields/ListboxField.tsx

@@ -28,7 +28,6 @@ export type ListboxFieldProps<
   label?: string
   required?: boolean
   description?: string | React.ReactNode
-  tooltipText?: string
   control: Control<TFieldValues>
   disabled?: boolean
   items: ListboxItem[]
@@ -48,7 +47,6 @@ export function ListboxField<
   label = capitalize(name),
   disabled,
   required,
-  tooltipText,
   description,
   className,
   control,
@@ -65,7 +63,6 @@ export function ListboxField<
       <Listbox
         description={description}
         label={label}
-        tooltipText={tooltipText}
         required={required}
         placeholder={placeholder}
         noItemsPlaceholder={noItemsPlaceholder}

app/components/form/fields/NumberField.tsx

@@ -25,7 +25,6 @@ export function NumberField<
   name,
   label = capitalize(name),
   units,
-  tooltipText,
   description,
   required,
   ...props
@@ -35,7 +34,7 @@ export function NumberField<
   return (
     <div className="max-w-lg">
       <div className="mb-2">
-        <FieldLabel htmlFor={id} id={`${id}-label`} tip={tooltipText} optional={!required}>
+        <FieldLabel htmlFor={id} id={`${id}-label`} optional={!required}>
           {label} {units && <span className="ml-1 text-secondary">({units})</span>}
         </FieldLabel>
         {description && (
@@ -67,7 +66,6 @@ export const NumberFieldInner = <
   label = capitalize(name),
   validate,
   control,
-  tooltipText,
   required,
   id: idProp,
   disabled,
@@ -98,8 +96,7 @@ export const NumberFieldInner = <
       <NumberInput
         id={id}
         error={!!error}
-        aria-labelledby={cn(`${id}-label`, !!tooltipText && `${id}-help-text`)}
-        aria-describedby={tooltipText ? `${id}-label-tip` : undefined}
+        aria-labelledby={cn(`${id}-label`)}
         isDisabled={disabled}
         maxValue={max ? Number(max) : undefined}
         minValue={min !== undefined ? Number(min) : undefined}

app/components/form/fields/RadioField.tsx

@@ -35,15 +35,6 @@ export type RadioFieldProps<
    * label when using a screen reader.
    */
   description?: string | React.ReactNode
-  /**
-   * Displayed in a tooltip beside the title. This field should be used
-   * for auxiliary context that helps users understand extra context about
-   * a field but isn't specifically required to know how to complete the input.
-   * This is announced as an `aria-description`
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-description
-   */
-  tooltipText?: string
   placeholder?: string
   units?: string
   control: Control<TFieldValues>
@@ -66,7 +57,6 @@ export function RadioField<
   name,
   label = capitalize(name),
   description,
-  tooltipText,
   units,
   control,
   items,
@@ -79,7 +69,7 @@ export function RadioField<
     <div>
       <div className="mb-2">
         {label && (
-          <FieldLabel id={`${id}-label`} tip={tooltipText}>
+          <FieldLabel id={`${id}-label`}>
             {label} {units && <span className="ml-1 text-secondary">({units})</span>}
           </FieldLabel>
         )}
@@ -88,10 +78,7 @@ export function RadioField<
       </div>
       <RadioGroup
         defaultChecked={field.value}
-        aria-labelledby={cn(`${id}-label`, {
-          [`${id}-help-text`]: !!tooltipText,
-        })}
-        aria-describedby={tooltipText ? `${id}-label-tip` : undefined}
+        aria-labelledby={`${id}-label`}
         onChange={(e) =>
           parseValue ? field.onChange(parseValue(e.target.value)) : field.onChange(e)
         }
@@ -130,7 +117,6 @@ export function RadioFieldDyn<
   name,
   label = capitalize(name),
   description,
-  tooltipText,
   units,
   control,
   children,
@@ -142,7 +128,7 @@ export function RadioFieldDyn<
     <div>
       <div className="mb-2">
         {label && (
-          <FieldLabel id={`${id}-label`} tip={tooltipText}>
+          <FieldLabel id={`${id}-label`}>
             {label} {units && <span className="ml-1 text-secondary">({units})</span>}
           </FieldLabel>
         )}
@@ -151,8 +137,7 @@ export function RadioFieldDyn<
       </div>
       <RadioGroup
         defaultChecked={field.value}
-        aria-labelledby={cn(`${id}-label`, !!tooltipText && `${id}-help-text`)}
-        aria-describedby={tooltipText ? `${id}-label-tip` : undefined}
+        aria-labelledby={cn(`${id}-label`)}
         onChange={field.onChange}
         name={field.name}
         {...props}

app/components/form/fields/TextField.tsx

@@ -42,15 +42,6 @@ export interface TextFieldProps<
    * label when using a screen reader.
    */
   description?: string | React.ReactNode
-  /**
-   * Displayed in a tooltip beside the title. This field should be used
-   * for auxiliary context that helps users understand extra context about
-   * a field but isn't specifically required to know how to complete the input.
-   * This is announced as an `aria-description`, immediately following the aria-labelledby text.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-description
-   */
-  tooltipText?: string
   placeholder?: string
   units?: string
   validate?: Validate<FieldPathValue<TFieldValues, TName>, TFieldValues>
@@ -66,7 +57,6 @@ export function TextField<
   name,
   label = capitalize(name),
   units,
-  tooltipText,
   description,
   required,
   ...props
@@ -76,7 +66,7 @@ export function TextField<
   return (
     <div className="max-w-lg">
       <div className="mb-2">
-        <FieldLabel htmlFor={id} id={`${id}-label`} tip={tooltipText} optional={!required}>
+        <FieldLabel htmlFor={id} id={`${id}-label`} optional={!required}>
           {label} {units && <span className="ml-1 text-secondary">({units})</span>}
         </FieldLabel>
         {description && (
@@ -86,7 +76,7 @@ export function TextField<
         )}
       </div>
       {/* passing the generated id is very important for a11y */}
-      <TextFieldInner name={name} {...props} id={id} tooltipText={tooltipText} />
+      <TextFieldInner name={name} {...props} id={id} />
     </div>
   )
 }
@@ -109,7 +99,6 @@ export const TextFieldInner = <
   label = capitalize(name),
   validate,
   control,
-  tooltipText,
   required,
   id: idProp,
   transform,
@@ -129,16 +118,10 @@ export const TextFieldInner = <
         type={type}
         error={!!error}
         aria-labelledby={`${id}-label ${id}-help-text`}
-        aria-describedby={tooltipText ? `${id}-tooltipText` : undefined}
         onChange={(e) => onChange(transform ? transform(e.target.value) : e.target.value)}
         {...fieldRest}
         {...props}
       />
-      {tooltipText && (
-        <div className="sr-only" id={`${id}-tooltipText`}>
-          {tooltipText}
-        </div>
-      )}
       <ErrorMessage error={error} label={label} />
     </>
   )

app/forms/instance-create.tsx

@@ -269,7 +269,8 @@ export function CreateInstanceForm() {
         key="bootDiskName"
         name="bootDiskName"
         label="Disk name"
-        tooltipText="Will be autogenerated if name not provided"
+        // TODO: would be cool to generate the name already and use it as a placeholder
+        description="A name will be generated if left blank"
         required={false}
         control={control}
         disabled={isSubmitting}
@@ -624,6 +625,8 @@ const AdvancedAccordion = ({
   const defaultPool = siloPools.find((pool) => pool.isDefault)?.name
   const attachedFloatingIps = (externalIps.field.value || []).filter(isFloating)
 
+  const instanceName = useWatch({ control, name: 'name' })
+
   const { project } = useProjectSelector()
   const { data: floatingIpList } = usePrefetchedApiQuery('floatingIpList', {
     query: { project, limit: ALL_ISH },
@@ -692,9 +695,10 @@ const AdvancedAccordion = ({
         <div className="py-2">
           <TextField
             name="hostname"
-            tooltipText="Will be generated if not provided"
+            description="Will be set to instance name if left blank"
             control={control}
             disabled={isSubmitting}
+            placeholder={instanceName}
           />
         </div>
 

app/ui/lib/Combobox.tsx

@@ -33,7 +33,6 @@ export type ComboboxBaseProps = {
   label: string
   placeholder?: string
   required?: boolean
-  tooltipText?: string
   ariaLabel?: string
   hideOptionalTag?: boolean
   /**
@@ -61,7 +60,6 @@ export const Combobox = ({
   selected,
   label,
   placeholder,
-  tooltipText,
   required,
   hasError,
   disabled,
@@ -95,12 +93,7 @@ export const Combobox = ({
         {label && (
           // TODO: FieldLabel needs a real ID
           <div className="mb-2">
-            <FieldLabel
-              id="FieldLabel"
-              as="div"
-              tip={tooltipText}
-              optional={!required && !hideOptionalTag}
-            >
+            <FieldLabel id="FieldLabel" as="div" optional={!required && !hideOptionalTag}>
               <Label>{label}</Label>
             </FieldLabel>
             {description && <TextInputHint id="TextInputHint">{description}</TextInputHint>}

app/ui/lib/FieldLabel.stories.tsx

@@ -9,17 +9,10 @@ import { FieldLabel } from './FieldLabel'
 
 export const Default = () => <FieldLabel id="hi">hello world</FieldLabel>
 
-export const WithTip = () => (
-  <FieldLabel
-    id="hi"
-    tip="This is often used as the greeting from a new programming language"
-  >
-    hello world
-  </FieldLabel>
-)
+export const WithTip = () => <FieldLabel id="hi">hello world</FieldLabel>
 
 export const AsLegend = () => (
-  <FieldLabel id="hi" tip="This component is literally a <legend> element" as="legend">
+  <FieldLabel id="hi" as="legend">
     I am legend
   </FieldLabel>
 )

app/ui/lib/FieldLabel.tsx

@@ -8,13 +8,10 @@
 import cn from 'classnames'
 import type { ElementType, PropsWithChildren } from 'react'
 
-import { TipIcon } from './TipIcon'
-
 interface FieldLabelProps {
   id: string
   as?: ElementType
   htmlFor?: string
-  tip?: string
   optional?: boolean
   className?: string
 }
@@ -23,7 +20,6 @@ export const FieldLabel = ({
   id,
   children,
   htmlFor,
-  tip,
   optional,
   as,
   className,
@@ -41,7 +37,6 @@ export const FieldLabel = ({
           </span>
         )}
       </Component>
-      {tip && <TipIcon>{tip}</TipIcon>}
     </div>
   )
 }

app/ui/lib/Listbox.tsx

@@ -38,7 +38,6 @@ export interface ListboxProps<Value extends string = string> {
   hasError?: boolean
   name?: string
   label?: React.ReactNode
-  tooltipText?: string
   description?: React.ReactNode
   required?: boolean
   isLoading?: boolean
@@ -57,7 +56,6 @@ export const Listbox = <Value extends string = string>({
   onChange,
   hasError = false,
   label,
-  tooltipText,
   description,
   required,
   disabled,
@@ -85,12 +83,7 @@ export const Listbox = <Value extends string = string>({
           <>
             {label && (
               <div className="mb-2">
-                <FieldLabel
-                  id={``}
-                  as="div"
-                  tip={tooltipText}
-                  optional={!required && !hideOptionalTag}
-                >
+                <FieldLabel id={``} as="div" optional={!required && !hideOptionalTag}>
                   <Label>{label}</Label>
                 </FieldLabel>
                 {description && <TextInputHint id={``}>{description}</TextInputHint>}