refactor(value-editor): drop the E2E textarea fork

The E2E ? textarea : Highlight fork was added in 2022 as a TestCafe
workaround. Playwright landed in March and drives a contenteditable with
fill(), so every E2E assertion about this editor has been running against
a textarea that only exists during tests.

placeholder and readOnly only ever worked on that textarea, so they go
with it, along with the three call sites passing them.

Highlight takes role and aria-readonly from the caller rather than
deriving them from onChange, so ValueEditor can name its read-only
editors while the code blocks that also use Highlight stay unlabelled.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: talissoncosta

frontend/documentation/components/ValueEditor.stories.tsx

@@ -19,7 +19,12 @@ const Interactive = ({
   const [value, setValue] = useState(initialValue)
   return (
     <div style={{ maxWidth: width, padding: 16 }}>
-      <ValueEditor {...props} value={value} onChange={setValue} />
+      <ValueEditor
+        data-test='valueEditor'
+        {...props}
+        value={value}
+        onChange={setValue}
+      />
     </div>
   )
 }

frontend/web/components/Highlight.js

@@ -158,10 +158,12 @@ class Highlight extends React.Component {
             data-test={this.props['data-test']}
             id={this.props.id}
             aria-labelledby={this.props['aria-labelledby']}
-            // Without a role a contenteditable is announced as plain text, and
-            // aria-labelledby has nothing to name.
-            role={this.props.onChange ? 'textbox' : undefined}
-            aria-multiline={this.props.onChange ? true : undefined}
+            // Set by the caller: a value field wants role=textbox so its label
+            // names it, while the code blocks that also use Highlight are not
+            // form controls and pass nothing.
+            role={this.props.role}
+            aria-readonly={this.props['aria-readonly']}
+            aria-multiline={this.props.role === 'textbox' ? true : undefined}
             contentEditable={!!this.props.onChange}
             onBlur={this.onBlur}
             onFocus={this.onFocus}

frontend/web/components/SegmentOverrides.js

@@ -280,7 +280,6 @@ const SegmentOverrideInner = class Override extends React.Component {
               <div className='flex-fill overflow-hidden'>
                 <ValueEditor
                   label='Value'
-                  readOnly={readOnly}
                   disabled={readOnly}
                   value={v.value}
                   data-test={`segment-override-value-${index}`}
@@ -304,7 +303,6 @@ const SegmentOverrideInner = class Override extends React.Component {
                 label={`Segment Control Value - ${controlPercent}%`}
                 value={v.value}
                 data-test={`segment-override-value-${index}`}
-                placeholder="Value e.g. 'big' "
                 disabled={readOnly}
                 onChange={
                   readOnly

frontend/web/components/ValueEditor/ValueEditor.tsx

@@ -19,14 +19,8 @@ export interface ValueEditorProps {
   label?: ReactNode
   labelTooltip?: string
   language?: ValueEditorLanguage
-  name?: string
   onBlur?: () => void
   onChange?: (value: string) => void
-  // placeholder and readOnly only reach the editor under E2E, which swaps
-  // Highlight for a plain textarea. Highlight renders its own
-  // 'Enter a value...' and stops accepting input while disabled.
-  placeholder?: string
-  readOnly?: boolean
   value?: FlagsmithValue
 }
 
@@ -36,11 +30,8 @@ const ValueEditor: FC<ValueEditorProps> = ({
   label,
   labelTooltip,
   language: languageProp,
-  name,
   onBlur,
   onChange,
-  placeholder,
-  readOnly,
   value,
   ...rest
 }) => {
@@ -96,32 +87,19 @@ const ValueEditor: FC<ValueEditorProps> = ({
       <div className='value-editor__field'>
         {showControls && <CopyValueButton value={text} />}
 
-        {E2E ? (
-          <textarea
-            aria-labelledby={label ? labelId : undefined}
-            data-test={rest['data-test']}
-            disabled={disabled}
-            id={editorId}
-            name={name}
-            onBlur={onBlur}
-            onChange={(e) => onChange?.(e.target.value)}
-            placeholder={placeholder}
-            readOnly={readOnly}
-            value={text}
-          />
-        ) : (
-          <Highlight
-            aria-labelledby={label ? labelId : undefined}
-            data-test={E2E ? rest['data-test'] : ''}
-            disabled={disabled}
-            id={editorId}
-            onChange={disabled ? null : onChange}
-            onBlur={disabled ? null : onBlur}
-            className={language}
-          >
-            {text}
-          </Highlight>
-        )}
+        <Highlight
+          aria-labelledby={label ? labelId : undefined}
+          aria-readonly={disabled || undefined}
+          data-test={rest['data-test']}
+          disabled={disabled}
+          id={editorId}
+          onChange={disabled ? null : onChange}
+          onBlur={disabled ? null : onBlur}
+          role='textbox'
+          className={language}
+        >
+          {text}
+        </Highlight>
       </div>
     </div>
   )

frontend/web/components/modals/create-feature/tabs/FeatureValueTab.tsx

@@ -379,7 +379,6 @@ const FeatureValueTab: FC<FeatureValueTabProps> = ({
               label={valueTitle}
               labelTooltip={getValueTooltip(hasVariations, isEdit)}
               data-test='featureValue'
-              name='featureValue'
               className={`full-width${hasVariations ? ' code-medium' : ''}`}
               value={`${
                 typeof initial_value === 'undefined' || initial_value === null
@@ -392,7 +391,6 @@ const FeatureValueTab: FC<FeatureValueTabProps> = ({
                 })
               }}
               disabled={isDisabled}
-              placeholder="e.g. 'big' "
             />
           </div>
           {canCompareValue && (

frontend/web/components/mv/VariationValueInput/VariationValueInput.tsx

@@ -76,7 +76,6 @@ export const VariationValueInput: React.FC<VariationValueProps> = ({
             data-test={`featureVariationValue${
               Utils.featureStateToValue(value) || index
             }`}
-            name='featureValue'
             className='full-width code-medium'
             value={Utils.getTypedValue(Utils.featureStateToValue(value))}
             disabled={!canCreateFeature || disabled || readOnly}
@@ -97,7 +96,6 @@ export const VariationValueInput: React.FC<VariationValueProps> = ({
                 ...Utils.valueToFeatureState(newValue, false),
               })
             }}
-            placeholder="e.g. 'big' "
           />,
         )}
       </div>