From 8fa48910518fd35930ffbb4535a44c31aab07338 Mon Sep 17 00:00:00 2001
From: Marcos Creuz Filho <marcos.creuz.filho@gmail.com>
Date: Fri, 17 Mar 2023 10:17:38 -0300
Subject: [PATCH 1/4] feat(input): add a11y attributes to Input

---
 packages/yoga/src/Input/web/Helper.jsx |  9 +++++-
 packages/yoga/src/Input/web/Input.jsx  | 38 ++++++++++++++++++++++++--
 2 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/packages/yoga/src/Input/web/Helper.jsx b/packages/yoga/src/Input/web/Helper.jsx
index 32abe0930b..55a8bba3b7 100644
--- a/packages/yoga/src/Input/web/Helper.jsx
+++ b/packages/yoga/src/Input/web/Helper.jsx
@@ -47,9 +47,14 @@ const Helper = ({
   maxLength,
   length,
   hideMaxLength,
+  a11yId,
 }) => (
   <Wrapper disabled={disabled} error={error}>
-    {(error || helper) && <Info as="span">{error || helper}</Info>}
+    {(error || helper) && (
+      <Info as="span" aria-live="polite" {...(a11yId && { id: a11yId })}>
+        {error || helper}
+      </Info>
+    )}
     {maxLength && !hideMaxLength && (
       <Info as="span">
         {length}/{maxLength}
@@ -65,6 +70,7 @@ Helper.propTypes = {
   maxLength: number,
   length: number,
   hideMaxLength: bool,
+  a11yId: string,
 };
 
 Helper.defaultProps = {
@@ -74,6 +80,7 @@ Helper.defaultProps = {
   maxLength: undefined,
   length: undefined,
   hideMaxLength: undefined,
+  a11yId: undefined,
 };
 
 export default Helper;
diff --git a/packages/yoga/src/Input/web/Input.jsx b/packages/yoga/src/Input/web/Input.jsx
index 604bd4643c..df19cf4bbe 100644
--- a/packages/yoga/src/Input/web/Input.jsx
+++ b/packages/yoga/src/Input/web/Input.jsx
@@ -96,6 +96,8 @@ const Input = React.forwardRef(
       onClean,
       hideMaxLength,
       rightIcon,
+      a11yId,
+      includeAriaAttributes,
       ...props
     },
     ref,
@@ -112,6 +114,26 @@ const Input = React.forwardRef(
       }
     };
 
+    const hasHelper = helper || maxLength || error;
+
+    const helperA11yId = includeAriaAttributes && a11yId && `${a11yId}-helper`;
+    const labelA11yId = includeAriaAttributes && a11yId && `${a11yId}-label`;
+    let a11yFieldProps;
+
+    if (includeAriaAttributes) {
+      a11yFieldProps = a11yId
+        ? {
+            ...(hasHelper && { 'aria-describedby': helperA11yId }),
+            ...(label && { 'aria-labelledby': labelA11yId }),
+          }
+        : {
+            ...(label && { 'aria-label': label }),
+          };
+      a11yFieldProps['aria-invalid'] = !!error;
+    } else {
+      a11yFieldProps = {};
+    }
+
     return (
       <Control full={full}>
         <Fieldset
@@ -137,12 +159,17 @@ const Input = React.forwardRef(
               ref={inputRef}
               value={value}
               onChange={onChange}
+              {...a11yFieldProps}
             />
           ) : (
             children
           )}
 
-          <Label error={error} disabled={disabled}>
+          <Label
+            error={error}
+            disabled={disabled}
+            {...(labelA11yId && { id: labelA11yId })}
+          >
             {label}
           </Label>
 
@@ -174,7 +201,7 @@ const Input = React.forwardRef(
             </IconWrapper>
           )}
         </Fieldset>
-        {(helper || maxLength || error) && (
+        {hasHelper && (
           <Helper
             error={error}
             helper={helper}
@@ -182,6 +209,7 @@ const Input = React.forwardRef(
             length={value.length}
             disabled={disabled}
             hideMaxLength={hideMaxLength}
+            a11yId={helperA11yId}
           />
         )}
       </Control>
@@ -213,6 +241,10 @@ Input.propTypes = {
   hideMaxLength: bool,
   placeholder: string,
   rightIcon: node,
+  /** a unique prefix to generate HTML IDs to be used for aria-labelledby and aria-describedby */
+  a11yId: string,
+  /** useful for components that extend the Input component and have their own ARIA attributes implementation (e.g. Dropdown) */
+  includeAriaAttributes: bool,
 };
 
 Input.defaultProps = {
@@ -233,6 +265,8 @@ Input.defaultProps = {
   hideMaxLength: false,
   placeholder: undefined,
   rightIcon: undefined,
+  a11yId: undefined,
+  includeAriaAttributes: true,
 };
 
 export default Input;

From c28e8102d757ab7b52335d6066bdf84a76c1f4c6 Mon Sep 17 00:00:00 2001
From: Marcos Creuz Filho <marcos.creuz.filho@gmail.com>
Date: Fri, 17 Mar 2023 10:23:34 -0300
Subject: [PATCH 2/4] feat(input): prevent aria attributes to be added in the
 Input rendered on Dropdown and AutoComplete

---
 packages/yoga/src/AutoComplete/web/AutoComplete.jsx | 1 +
 packages/yoga/src/Dropdown/web/Dropdown.jsx         | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/yoga/src/AutoComplete/web/AutoComplete.jsx b/packages/yoga/src/AutoComplete/web/AutoComplete.jsx
index a950371e70..59d5875841 100644
--- a/packages/yoga/src/AutoComplete/web/AutoComplete.jsx
+++ b/packages/yoga/src/AutoComplete/web/AutoComplete.jsx
@@ -273,6 +273,7 @@ const AutoComplete = React.forwardRef(
                   )
                 }
                 ref={inputRef}
+                includeAriaAttributes={false}
               />
               {isSuggestionsOpen && (
                 <List {...getMenuProps()} full={full} error={!!error}>
diff --git a/packages/yoga/src/Dropdown/web/Dropdown.jsx b/packages/yoga/src/Dropdown/web/Dropdown.jsx
index 050a3d1787..e933d278de 100644
--- a/packages/yoga/src/Dropdown/web/Dropdown.jsx
+++ b/packages/yoga/src/Dropdown/web/Dropdown.jsx
@@ -305,6 +305,7 @@ const Dropdown = React.forwardRef(
                 label={label}
                 full={full}
                 ref={inputRef}
+                includeAriaAttributes={false}
                 {...getInputProps()}
               />
               <Button

From 42fc233816816039d1486f798c695f43ff6cd4aa Mon Sep 17 00:00:00 2001
From: Marcos Creuz Filho <marcos.creuz.filho@gmail.com>
Date: Fri, 17 Mar 2023 10:26:11 -0300
Subject: [PATCH 3/4] test(input): add a11y related snapshot tests to Input

---
 packages/yoga/src/Input/web/Input.test.jsx | 30 ++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/packages/yoga/src/Input/web/Input.test.jsx b/packages/yoga/src/Input/web/Input.test.jsx
index f4921cf7d3..de4bc8a8e6 100644
--- a/packages/yoga/src/Input/web/Input.test.jsx
+++ b/packages/yoga/src/Input/web/Input.test.jsx
@@ -74,6 +74,36 @@ describe('<Input />', () => {
 
       expect(container).toMatchSnapshot();
     });
+
+    it('should match with a11yId', () => {
+      const { container } = render(
+        <ThemeProvider>
+          <Input label="Label" a11yId="id" />
+        </ThemeProvider>,
+      );
+
+      expect(container).toMatchSnapshot();
+    });
+
+    it('should match with a11yId and error', () => {
+      const { container } = render(
+        <ThemeProvider>
+          <Input label="Label" a11yId="id" error="Error message" />
+        </ThemeProvider>,
+      );
+
+      expect(container).toMatchSnapshot();
+    });
+
+    it('should match with includeAriaAttributes set to false', () => {
+      const { container } = render(
+        <ThemeProvider>
+          <Input label="Label" includeAriaAttributes={false} />
+        </ThemeProvider>,
+      );
+
+      expect(container).toMatchSnapshot();
+    });
   });
 
   describe('Events', () => {

From c051f18c32c33432fc7c601571d9e5ff713d0b5d Mon Sep 17 00:00:00 2001
From: Marcos Creuz Filho <marcos.creuz.filho@gmail.com>
Date: Fri, 17 Mar 2023 10:30:34 -0300
Subject: [PATCH 4/4] test(input): update snapshot files

---
 .../web/__snapshots__/Dropdown.test.jsx.snap  |   1 +
 .../web/__snapshots__/Email.test.jsx.snap     |   2 +
 .../web/__snapshots__/Input.test.jsx.snap     | 687 ++++++++++++++++++
 .../web/__snapshots__/Number.test.jsx.snap    |   2 +
 .../web/__snapshots__/Password.test.jsx.snap  |   6 +
 .../web/__snapshots__/Phone.test.jsx.snap     |   7 +
 .../Input/web/__snapshots__/Tel.test.jsx.snap |   2 +
 7 files changed, 707 insertions(+)

diff --git a/packages/yoga/src/Dropdown/web/__snapshots__/Dropdown.test.jsx.snap b/packages/yoga/src/Dropdown/web/__snapshots__/Dropdown.test.jsx.snap
index 265ab31947..985a1d3af3 100644
--- a/packages/yoga/src/Dropdown/web/__snapshots__/Dropdown.test.jsx.snap
+++ b/packages/yoga/src/Dropdown/web/__snapshots__/Dropdown.test.jsx.snap
@@ -1548,6 +1548,7 @@ exports[`<Dropdown /> should match snapshot with error 1`] = `
       class="c11"
     >
       <span
+        aria-live="polite"
         class="c12"
       >
         Please, select one activity
diff --git a/packages/yoga/src/Input/web/__snapshots__/Email.test.jsx.snap b/packages/yoga/src/Input/web/__snapshots__/Email.test.jsx.snap
index 2dde42fc29..d18c603f26 100644
--- a/packages/yoga/src/Input/web/__snapshots__/Email.test.jsx.snap
+++ b/packages/yoga/src/Input/web/__snapshots__/Email.test.jsx.snap
@@ -185,6 +185,8 @@ exports[`<Input.Email /> Snapshots should match with default input 1`] = `
       value=""
     >
       <input
+        aria-invalid="false"
+        aria-label="Label"
         class="c2"
         label="Label"
         type="email"
diff --git a/packages/yoga/src/Input/web/__snapshots__/Input.test.jsx.snap b/packages/yoga/src/Input/web/__snapshots__/Input.test.jsx.snap
index f69718a745..28a5fa5d1e 100644
--- a/packages/yoga/src/Input/web/__snapshots__/Input.test.jsx.snap
+++ b/packages/yoga/src/Input/web/__snapshots__/Input.test.jsx.snap
@@ -1,5 +1,466 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`<Input /> Snapshots should match with a11yId 1`] = `
+.c2 {
+  width: 100%;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-color: transparent;
+  outline: none;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  border: none;
+  box-sizing: border-box;
+  height: 52px;
+  padding-top: 16px;
+  padding-right: 52px;
+  padding-bottom: 16px;
+  padding-left: 16px;
+  color: #231B22;
+  font-family: Rubik,sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.c2:focus {
+  color: #231B22;
+}
+
+.c2:focus ~ legend {
+  max-width: -webkit-max-content;
+  max-width: -moz-max-content;
+  max-width: max-content;
+  -webkit-transition-property: max-width;
+  transition-property: max-width;
+  -webkit-transition-duration: 500ms;
+  transition-duration: 500ms;
+}
+
+.c2:focus ~ label {
+  -webkit-transform: translateY(-24px);
+  -ms-transform: translateY(-24px);
+  transform: translateY(-24px);
+  -webkit-transition-property: -webkit-transform,font-size,color;
+  -webkit-transition-property: transform,font-size,color;
+  transition-property: transform,font-size,color;
+  -webkit-transition-duration: 500ms;
+  transition-duration: 500ms;
+  -webkit-transition-timing-function: cubic-bezier(0,0.75,0.1,1);
+  transition-timing-function: cubic-bezier(0,0.75,0.1,1);
+  font-size: 12px;
+  font-weight: 400;
+  color: #231B22;
+}
+
+.c2:focus::-webkit-input-placeholder {
+  color: #6B6B78;
+}
+
+.c2:focus::-moz-placeholder {
+  color: #6B6B78;
+}
+
+.c2:focus:-ms-input-placeholder {
+  color: #6B6B78;
+}
+
+.c2:focus::placeholder {
+  color: #6B6B78;
+}
+
+.c2:disabled {
+  cursor: not-allowed;
+  color: #D7D7E0;
+  -webkit-text-fill-color: #D7D7E0;
+  opacity: 1;
+}
+
+.c2::-webkit-input-placeholder {
+  color: #6B6B78;
+}
+
+.c2::-moz-placeholder {
+  color: #6B6B78;
+}
+
+.c2:-ms-input-placeholder {
+  color: #6B6B78;
+}
+
+.c2::placeholder {
+  color: #6B6B78;
+}
+
+.c2[type="number"]::-webkit-outer-spin-button,
+.c2[type="number"]::-webkit-inner-spin-button {
+  display: none;
+}
+
+.c2:invalid {
+  box-shadow: none;
+}
+
+.c1 {
+  position: relative;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  width: 320px;
+  height: 52px;
+  padding-left: 12px;
+  border-radius: 8px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D7D7E0;
+}
+
+.c1:hover:not(:disabled),
+.c1:focus-within:not(:disabled) {
+  border-color: #231B22;
+}
+
+.c4 {
+  position: relative;
+  padding: 0;
+  max-width: 0;
+  width: auto;
+  height: 0;
+  font-weight: normal;
+  visibility: hidden;
+  -webkit-transition-property: max-width,padding;
+  transition-property: max-width,padding;
+  font-size: 12px;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  -webkit-transition-duration: 100ms;
+  transition-duration: 100ms;
+}
+
+.c5 {
+  padding-left: 4px;
+  padding-right: 4px;
+}
+
+.c3 {
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  pointer-events: none;
+  position: absolute;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  top: 16px;
+  left: 16px;
+  font-size: 14px;
+  font-weight: 400;
+  color: #6B6B78;
+  -webkit-transition-property: -webkit-transform,font-size;
+  -webkit-transition-property: transform,font-size;
+  transition-property: transform,font-size;
+  -webkit-transition-duration: 500ms;
+  transition-duration: 500ms;
+  -webkit-transition-timing-function: cubic-bezier(0,0.75,0.1,1);
+  transition-timing-function: cubic-bezier(0,0.75,0.1,1);
+}
+
+.c0 {
+  box-sizing: border-box;
+  width: 320px;
+}
+
+<div>
+  <div
+    class="c0"
+  >
+    <fieldset
+      class="c1"
+      label="Label"
+      value=""
+    >
+      <input
+        aria-invalid="false"
+        aria-labelledby="id-label"
+        class="c2"
+        label="Label"
+        value=""
+      />
+      <label
+        class="c3"
+        id="id-label"
+      >
+        Label
+      </label>
+      <legend
+        class="c4"
+      >
+        <span
+          class="c5"
+        >
+          Label
+        </span>
+      </legend>
+      
+    </fieldset>
+  </div>
+</div>
+`;
+
+exports[`<Input /> Snapshots should match with a11yId and error 1`] = `
+.c2 {
+  width: 100%;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-color: transparent;
+  outline: none;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  border: none;
+  box-sizing: border-box;
+  height: 52px;
+  padding-top: 16px;
+  padding-right: 52px;
+  padding-bottom: 16px;
+  padding-left: 16px;
+  color: #231B22;
+  font-family: Rubik,sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.c2:focus {
+  color: #231B22;
+}
+
+.c2:focus ~ legend {
+  max-width: -webkit-max-content;
+  max-width: -moz-max-content;
+  max-width: max-content;
+  -webkit-transition-property: max-width;
+  transition-property: max-width;
+  -webkit-transition-duration: 500ms;
+  transition-duration: 500ms;
+}
+
+.c2:focus ~ label {
+  -webkit-transform: translateY(-24px);
+  -ms-transform: translateY(-24px);
+  transform: translateY(-24px);
+  -webkit-transition-property: -webkit-transform,font-size,color;
+  -webkit-transition-property: transform,font-size,color;
+  transition-property: transform,font-size,color;
+  -webkit-transition-duration: 500ms;
+  transition-duration: 500ms;
+  -webkit-transition-timing-function: cubic-bezier(0,0.75,0.1,1);
+  transition-timing-function: cubic-bezier(0,0.75,0.1,1);
+  font-size: 12px;
+  font-weight: 400;
+  color: #CA4808;
+}
+
+.c2:focus::-webkit-input-placeholder {
+  color: #6B6B78;
+}
+
+.c2:focus::-moz-placeholder {
+  color: #6B6B78;
+}
+
+.c2:focus:-ms-input-placeholder {
+  color: #6B6B78;
+}
+
+.c2:focus::placeholder {
+  color: #6B6B78;
+}
+
+.c2:disabled {
+  cursor: not-allowed;
+  color: #D7D7E0;
+  -webkit-text-fill-color: #D7D7E0;
+  opacity: 1;
+}
+
+.c2::-webkit-input-placeholder {
+  color: #6B6B78;
+}
+
+.c2::-moz-placeholder {
+  color: #6B6B78;
+}
+
+.c2:-ms-input-placeholder {
+  color: #6B6B78;
+}
+
+.c2::placeholder {
+  color: #6B6B78;
+}
+
+.c2[type="number"]::-webkit-outer-spin-button,
+.c2[type="number"]::-webkit-inner-spin-button {
+  display: none;
+}
+
+.c2:invalid {
+  box-shadow: none;
+}
+
+.c6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin-top: 4px;
+  color: #CA4808;
+}
+
+.c7 {
+  margin: 0;
+  padding: 0;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 400;
+  font-family: Rubik;
+  color: #231B22;
+  color: currentColor;
+  font-size: 12px;
+}
+
+.c1 {
+  position: relative;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  width: 320px;
+  height: 52px;
+  padding-left: 12px;
+  border-radius: 8px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #CA4808;
+}
+
+.c1:hover:not(:disabled),
+.c1:focus-within:not(:disabled) {
+  border-color: #CA4808;
+}
+
+.c4 {
+  position: relative;
+  padding: 0;
+  max-width: 0;
+  width: auto;
+  height: 0;
+  font-weight: normal;
+  visibility: hidden;
+  -webkit-transition-property: max-width,padding;
+  transition-property: max-width,padding;
+  font-size: 12px;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  -webkit-transition-duration: 100ms;
+  transition-duration: 100ms;
+}
+
+.c5 {
+  padding-left: 4px;
+  padding-right: 4px;
+}
+
+.c3 {
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  pointer-events: none;
+  position: absolute;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  top: 16px;
+  left: 16px;
+  font-size: 14px;
+  font-weight: 400;
+  color: #6B6B78;
+  -webkit-transition-property: -webkit-transform,font-size;
+  -webkit-transition-property: transform,font-size;
+  transition-property: transform,font-size;
+  -webkit-transition-duration: 500ms;
+  transition-duration: 500ms;
+  -webkit-transition-timing-function: cubic-bezier(0,0.75,0.1,1);
+  transition-timing-function: cubic-bezier(0,0.75,0.1,1);
+}
+
+.c0 {
+  box-sizing: border-box;
+  width: 320px;
+}
+
+<div>
+  <div
+    class="c0"
+  >
+    <fieldset
+      class="c1"
+      label="Label"
+      value=""
+    >
+      <input
+        aria-describedby="id-helper"
+        aria-invalid="true"
+        aria-labelledby="id-label"
+        class="c2"
+        label="Label"
+        value=""
+      />
+      <label
+        class="c3"
+        id="id-label"
+      >
+        Label
+      </label>
+      <legend
+        class="c4"
+      >
+        <span
+          class="c5"
+        >
+          Label
+        </span>
+      </legend>
+      
+    </fieldset>
+    <div
+      class="c6"
+    >
+      <span
+        aria-live="polite"
+        class="c7"
+        id="id-helper"
+      >
+        Error message
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`<Input /> Snapshots should match with default input 1`] = `
 .c2 {
   width: 100%;
@@ -185,6 +646,8 @@ exports[`<Input /> Snapshots should match with default input 1`] = `
       value=""
     >
       <input
+        aria-invalid="false"
+        aria-label="Label"
         class="c2"
         label="Label"
         value=""
@@ -397,6 +860,8 @@ exports[`<Input /> Snapshots should match with disabled input 1`] = `
       value=""
     >
       <input
+        aria-invalid="false"
+        aria-label="Label"
         class="c2"
         disabled=""
         label="Label"
@@ -633,6 +1098,8 @@ exports[`<Input /> Snapshots should match with error 1`] = `
       value=""
     >
       <input
+        aria-invalid="true"
+        aria-label="Label"
         class="c2"
         label="Label"
         value=""
@@ -657,6 +1124,7 @@ exports[`<Input /> Snapshots should match with error 1`] = `
       class="c6"
     >
       <span
+        aria-live="polite"
         class="c7"
       >
         Error message
@@ -851,6 +1319,8 @@ exports[`<Input /> Snapshots should match with full width 1`] = `
       value=""
     >
       <input
+        aria-invalid="false"
+        aria-label="Label"
         class="c2"
         label="Label"
         value=""
@@ -1085,6 +1555,8 @@ exports[`<Input /> Snapshots should match with helper text and max length 1`] =
       value=""
     >
       <input
+        aria-invalid="false"
+        aria-label="Label"
         class="c2"
         label="Label"
         maxlength="20"
@@ -1110,6 +1582,7 @@ exports[`<Input /> Snapshots should match with helper text and max length 1`] =
       class="c6"
     >
       <span
+        aria-live="polite"
         class="c7"
       >
         Helper text
@@ -1336,6 +1809,8 @@ exports[`<Input /> Snapshots should match with helper text, max length and hideM
       value=""
     >
       <input
+        aria-invalid="false"
+        aria-label="Label"
         class="c2"
         label="Label"
         maxlength="20"
@@ -1361,6 +1836,7 @@ exports[`<Input /> Snapshots should match with helper text, max length and hideM
       class="c6"
     >
       <span
+        aria-live="polite"
         class="c7"
       >
         Helper text
@@ -1370,6 +1846,215 @@ exports[`<Input /> Snapshots should match with helper text, max length and hideM
 </div>
 `;
 
+exports[`<Input /> Snapshots should match with includeAriaAttributes set to false 1`] = `
+.c2 {
+  width: 100%;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-color: transparent;
+  outline: none;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  border: none;
+  box-sizing: border-box;
+  height: 52px;
+  padding-top: 16px;
+  padding-right: 52px;
+  padding-bottom: 16px;
+  padding-left: 16px;
+  color: #231B22;
+  font-family: Rubik,sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.c2:focus {
+  color: #231B22;
+}
+
+.c2:focus ~ legend {
+  max-width: -webkit-max-content;
+  max-width: -moz-max-content;
+  max-width: max-content;
+  -webkit-transition-property: max-width;
+  transition-property: max-width;
+  -webkit-transition-duration: 500ms;
+  transition-duration: 500ms;
+}
+
+.c2:focus ~ label {
+  -webkit-transform: translateY(-24px);
+  -ms-transform: translateY(-24px);
+  transform: translateY(-24px);
+  -webkit-transition-property: -webkit-transform,font-size,color;
+  -webkit-transition-property: transform,font-size,color;
+  transition-property: transform,font-size,color;
+  -webkit-transition-duration: 500ms;
+  transition-duration: 500ms;
+  -webkit-transition-timing-function: cubic-bezier(0,0.75,0.1,1);
+  transition-timing-function: cubic-bezier(0,0.75,0.1,1);
+  font-size: 12px;
+  font-weight: 400;
+  color: #231B22;
+}
+
+.c2:focus::-webkit-input-placeholder {
+  color: #6B6B78;
+}
+
+.c2:focus::-moz-placeholder {
+  color: #6B6B78;
+}
+
+.c2:focus:-ms-input-placeholder {
+  color: #6B6B78;
+}
+
+.c2:focus::placeholder {
+  color: #6B6B78;
+}
+
+.c2:disabled {
+  cursor: not-allowed;
+  color: #D7D7E0;
+  -webkit-text-fill-color: #D7D7E0;
+  opacity: 1;
+}
+
+.c2::-webkit-input-placeholder {
+  color: #6B6B78;
+}
+
+.c2::-moz-placeholder {
+  color: #6B6B78;
+}
+
+.c2:-ms-input-placeholder {
+  color: #6B6B78;
+}
+
+.c2::placeholder {
+  color: #6B6B78;
+}
+
+.c2[type="number"]::-webkit-outer-spin-button,
+.c2[type="number"]::-webkit-inner-spin-button {
+  display: none;
+}
+
+.c2:invalid {
+  box-shadow: none;
+}
+
+.c1 {
+  position: relative;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  width: 320px;
+  height: 52px;
+  padding-left: 12px;
+  border-radius: 8px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D7D7E0;
+}
+
+.c1:hover:not(:disabled),
+.c1:focus-within:not(:disabled) {
+  border-color: #231B22;
+}
+
+.c4 {
+  position: relative;
+  padding: 0;
+  max-width: 0;
+  width: auto;
+  height: 0;
+  font-weight: normal;
+  visibility: hidden;
+  -webkit-transition-property: max-width,padding;
+  transition-property: max-width,padding;
+  font-size: 12px;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  -webkit-transition-duration: 100ms;
+  transition-duration: 100ms;
+}
+
+.c5 {
+  padding-left: 4px;
+  padding-right: 4px;
+}
+
+.c3 {
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  pointer-events: none;
+  position: absolute;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  top: 16px;
+  left: 16px;
+  font-size: 14px;
+  font-weight: 400;
+  color: #6B6B78;
+  -webkit-transition-property: -webkit-transform,font-size;
+  -webkit-transition-property: transform,font-size;
+  transition-property: transform,font-size;
+  -webkit-transition-duration: 500ms;
+  transition-duration: 500ms;
+  -webkit-transition-timing-function: cubic-bezier(0,0.75,0.1,1);
+  transition-timing-function: cubic-bezier(0,0.75,0.1,1);
+}
+
+.c0 {
+  box-sizing: border-box;
+  width: 320px;
+}
+
+<div>
+  <div
+    class="c0"
+  >
+    <fieldset
+      class="c1"
+      label="Label"
+      value=""
+    >
+      <input
+        class="c2"
+        label="Label"
+        value=""
+      />
+      <label
+        class="c3"
+      >
+        Label
+      </label>
+      <legend
+        class="c4"
+      >
+        <span
+          class="c5"
+        >
+          Label
+        </span>
+      </legend>
+      
+    </fieldset>
+  </div>
+</div>
+`;
+
 exports[`<Input /> Snapshots should match with label 1`] = `
 .c2 {
   width: 100%;
@@ -1555,6 +2240,8 @@ exports[`<Input /> Snapshots should match with label 1`] = `
       value=""
     >
       <input
+        aria-invalid="false"
+        aria-label="Input"
         class="c2"
         label="Input"
         value=""
diff --git a/packages/yoga/src/Input/web/__snapshots__/Number.test.jsx.snap b/packages/yoga/src/Input/web/__snapshots__/Number.test.jsx.snap
index 24352a168c..a7583632d4 100644
--- a/packages/yoga/src/Input/web/__snapshots__/Number.test.jsx.snap
+++ b/packages/yoga/src/Input/web/__snapshots__/Number.test.jsx.snap
@@ -185,6 +185,8 @@ exports[`<Input.Number /> Snapshots should match with default input 1`] = `
       value=""
     >
       <input
+        aria-invalid="false"
+        aria-label="Label"
         class="c2"
         label="Label"
         type="number"
diff --git a/packages/yoga/src/Input/web/__snapshots__/Password.test.jsx.snap b/packages/yoga/src/Input/web/__snapshots__/Password.test.jsx.snap
index 058701e8f6..28ddaeef81 100644
--- a/packages/yoga/src/Input/web/__snapshots__/Password.test.jsx.snap
+++ b/packages/yoga/src/Input/web/__snapshots__/Password.test.jsx.snap
@@ -219,6 +219,8 @@ exports[`<Input.Password /> Snapshots should match with default input 1`] = `
         value=""
       >
         <input
+          aria-invalid="false"
+          aria-label="Label"
           class="c3 c4"
           label="Label"
           type="password"
@@ -480,6 +482,8 @@ exports[`<Input.Password /> Snapshots should match with disabled input 1`] = `
         value=""
       >
         <input
+          aria-invalid="false"
+          aria-label="Label"
           class="c3 c4"
           disabled=""
           label="Label"
@@ -737,6 +741,8 @@ exports[`<Input.Password /> Snapshots should match with full width 1`] = `
         value=""
       >
         <input
+          aria-invalid="false"
+          aria-label="Label"
           class="c3 c4"
           label="Label"
           type="password"
diff --git a/packages/yoga/src/Input/web/__snapshots__/Phone.test.jsx.snap b/packages/yoga/src/Input/web/__snapshots__/Phone.test.jsx.snap
index cb800a6476..b9de8a7c47 100644
--- a/packages/yoga/src/Input/web/__snapshots__/Phone.test.jsx.snap
+++ b/packages/yoga/src/Input/web/__snapshots__/Phone.test.jsx.snap
@@ -634,6 +634,8 @@ exports[`<Input.Phone /> Snapshots should match with disabled input 1`] = `
         value=""
       >
         <input
+          aria-invalid="false"
+          aria-label="Label"
           class="c3 c4"
           disabled=""
           label="Label"
@@ -881,6 +883,8 @@ exports[`<Input.Phone /> Snapshots should match with error 1`] = `
       value=""
     >
       <input
+        aria-invalid="true"
+        aria-label="Label"
         class="c2"
         label="Label"
         value=""
@@ -905,6 +909,7 @@ exports[`<Input.Phone /> Snapshots should match with error 1`] = `
       class="c6"
     >
       <span
+        aria-live="polite"
         class="c7"
       >
         Error message
@@ -1134,6 +1139,8 @@ exports[`<Input.Phone /> Snapshots should match with full width 1`] = `
         value=""
       >
         <input
+          aria-invalid="false"
+          aria-label="Label"
           class="c3 c4"
           label="Label"
           type="password"
diff --git a/packages/yoga/src/Input/web/__snapshots__/Tel.test.jsx.snap b/packages/yoga/src/Input/web/__snapshots__/Tel.test.jsx.snap
index f325ff0d6c..ea4d9b8a5a 100644
--- a/packages/yoga/src/Input/web/__snapshots__/Tel.test.jsx.snap
+++ b/packages/yoga/src/Input/web/__snapshots__/Tel.test.jsx.snap
@@ -185,6 +185,8 @@ exports[`<Input.Tel /> Snapshots should match with default input 1`] = `
       value=""
     >
       <input
+        aria-invalid="false"
+        aria-label="Label"
         class="c2"
         label="Label"
         type="tel"