Stop using InputRoot in Input and Textarea

Author: acelaya

src/components/input/Input.tsx

@@ -1,8 +1,30 @@
+import classnames from 'classnames';
 import type { JSX } from 'preact';
 
 import type { PresentationalProps } from '../../types';
 import { downcastRef } from '../../util/typing';
-import InputRoot from './InputRoot';
+import { inputGroupStyles } from './InputGroup';
+
+export type InputStylesOptions = {
+  classes?: string | string[];
+  feedback?: 'error' | 'warning';
+};
+
+export function inputStyles({ classes, feedback }: InputStylesOptions) {
+  return classnames(
+    'focus-visible-ring ring-inset border rounded w-full p-2',
+    'bg-grey-0 focus:bg-white disabled:bg-grey-1',
+    'placeholder:text-color-grey-5 disabled:placeholder:color-grey-6',
+    {
+      'ring-2': !!feedback,
+      'ring-red-error': feedback === 'error',
+      'ring-yellow-notice': feedback === 'warning',
+    },
+    // Adapt styles when this component is inside an InputGroup
+    inputGroupStyles,
+    classes,
+  );
+}
 
 type ComponentProps = {
   type?: 'text' | 'email' | 'search' | 'number' | 'password' | 'url';
@@ -24,19 +46,30 @@ export type InputProps = PresentationalProps &
 export default function Input({
   elementRef,
   type = 'text',
+  classes,
   feedback,
   hasError,
 
   ...htmlAttributes
 }: InputProps) {
+  /* istanbul ignore next */
+  if (feedback === undefined && hasError) {
+    feedback = 'error';
+  }
+
+  if (!htmlAttributes.id && !htmlAttributes['aria-label']) {
+    console.warn(
+      '`Input` component should have either an `id` or an `aria-label` attribute',
+    );
+  }
+
   return (
-    <InputRoot
+    <input
       data-component="Input"
-      elementRef={downcastRef(elementRef)}
-      type={type}
-      feedback={feedback}
-      hasError={hasError}
       {...htmlAttributes}
+      ref={downcastRef(elementRef)}
+      type={type}
+      className={inputStyles({ classes, feedback })}
     />
   );
 }

src/components/input/InputRoot.tsx

@@ -1,9 +1,8 @@
-import classnames from 'classnames';
 import type { JSX } from 'preact';
 
 import type { PresentationalProps } from '../../types';
 import { downcastRef } from '../../util/typing';
-import { inputGroupStyles } from './InputGroup';
+import { inputStyles } from './Input';
 
 type RootComponentProps = {
   element?: 'input' | 'select' | 'textarea';
@@ -26,6 +25,7 @@ export type InputRootProps = PresentationalProps &
 /**
  * Root component for various input types that applies a consistent design
  * pattern.
+ * @deprecated Only `Select` is using this component. Remove once it is deleted
  */
 export default function InputRoot({
   element: Element = 'input',
@@ -54,19 +54,7 @@ export default function InputRoot({
       {...htmlAttributes}
       // @ts-ignore-next
       ref={downcastRef(elementRef)}
-      className={classnames(
-        'focus-visible-ring ring-inset border rounded w-full p-2',
-        'bg-grey-0 focus:bg-white disabled:bg-grey-1',
-        'placeholder:text-color-grey-5 disabled:placeholder:color-grey-6',
-        {
-          'ring-2': !!feedback,
-          'ring-red-error': feedback === 'error',
-          'ring-yellow-notice': feedback === 'warning',
-        },
-        // Adapt styles when this component is inside an InputGroup
-        inputGroupStyles,
-        classes,
-      )}
+      className={inputStyles({ classes, feedback })}
     >
       {children}
     </Element>

src/components/input/Textarea.tsx

@@ -2,7 +2,7 @@ import type { JSX } from 'preact';
 
 import type { PresentationalProps } from '../../types';
 import { downcastRef } from '../../util/typing';
-import InputRoot from './InputRoot';
+import { inputStyles } from './Input';
 
 type ComponentProps = {
   feedback?: 'error' | 'warning';
@@ -17,19 +17,23 @@ export type TextareaProps = PresentationalProps &
  */
 export default function Textarea({
   elementRef,
-  type = 'text',
   feedback,
+  classes,
 
   ...htmlAttributes
 }: TextareaProps) {
+  if (!htmlAttributes.id && !htmlAttributes['aria-label']) {
+    console.warn(
+      '`Textarea` component should have either an `id` or an `aria-label` attribute',
+    );
+  }
+
   return (
-    <InputRoot
+    <textarea
       data-component="Textarea"
-      element="textarea"
-      elementRef={downcastRef(elementRef)}
-      type={type}
-      feedback={feedback}
       {...htmlAttributes}
+      ref={downcastRef(elementRef)}
+      className={inputStyles({ classes, feedback })}
     />
   );
 }

src/components/input/test/Input-test.js

@@ -9,4 +9,17 @@ const contentFn = (Component, props = {}) => {
 
 describe('Input', () => {
   testPresentationalComponent(Input, { createContent: contentFn });
+
+  it('should warn in console if accessibility attributes are missing', () => {
+    sinon.stub(console, 'warn');
+
+    mount(<Input placeholder="..." />);
+
+    assert.calledWith(
+      console.warn,
+      '`Input` component should have either an `id` or an `aria-label` attribute',
+    );
+
+    console.warn.restore();
+  });
 });

src/components/input/test/Textarea-test.js

@@ -9,4 +9,17 @@ const contentFn = (Component, props = {}) => {
 
 describe('Textarea', () => {
   testPresentationalComponent(Textarea, { createContent: contentFn });
+
+  it('should warn in console if accessibility attributes are missing', () => {
+    sinon.stub(console, 'warn');
+
+    mount(<Textarea placeholder="..." />);
+
+    assert.calledWith(
+      console.warn,
+      '`Textarea` component should have either an `id` or an `aria-label` attribute',
+    );
+
+    console.warn.restore();
+  });
 });