From 2378e50c4f8bcac9dbf0fda0420e0b9ab436e8c7 Mon Sep 17 00:00:00 2001
From: shaharzil <shaharzi@monday.com>
Date: Wed, 10 Apr 2024 11:18:30 +0300
Subject: [PATCH 1/9] docs: change npm to yarn (#2054)

---
 packages/core/CONTRIBUTING.md             | 10 +++++-----
 packages/core/README.md                   |  2 +-
 packages/core/TESTING_README.md           |  2 +-
 packages/storybook-blocks/CONTRIBUTING.md |  8 ++++----
 packages/storybook-blocks/README.md       |  2 +-
 packages/style/README.md                  |  2 +-
 6 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/core/CONTRIBUTING.md b/packages/core/CONTRIBUTING.md
index 546aa8ec9b..bf75570de0 100644
--- a/packages/core/CONTRIBUTING.md
+++ b/packages/core/CONTRIBUTING.md
@@ -8,11 +8,11 @@ This library is open-sourced, and we encourage everyone to use and contribute in
 
 1. Create a fork of this repository
 2. Please use the correct node version it is listed in the `.nvmrc` file (you can use `nvm use` in order to switch to the right node version).
-3. Install dependencies with `npm install` command
+3. Install dependencies with `yarn install` command
 4. Sync from upstream if needed
-5. Run Storybook environment locally with `npm run storybook` command.
-6. Make sure all components behave as expected by running all Jest tests locally with 'npm run test'.
-7. If there are changes in some of the library snapshot tests, make sure all changes are intentional. If they are, update them with 'npm run test:update'.
+5. Run Storybook environment locally with `yarn storybook` command.
+6. Make sure all components behave as expected by running all Jest tests locally with 'yarn test'.
+7. If there are changes in some of the library snapshot tests, make sure all changes are intentional. If they are, update them with 'yarn test:update'.
 8. Commit to your local fork using [Semantic Commit Messages](https://seesparkbox.com/foundry/semantic_commit_messages)
 9. Create a PR with title based using [Semantic Commit Messages](https://seesparkbox.com/foundry/semantic_commit_messages)
    For example: `feat: add new TextArea component`
@@ -24,7 +24,7 @@ This library is open-sourced, and we encourage everyone to use and contribute in
 
 ### Creating new files in the library
 
-Our code generator, Plop, is designed to simplify the creation of frequently used boilerplate code. To utilize it, execute the command `npm run plop`. If you want to learn more about Plop, you can find additional information [here](https://plopjs.com/).
+Our code generator, Plop, is designed to simplify the creation of frequently used boilerplate code. To utilize it, execute the command `yarn plop`. If you want to learn more about Plop, you can find additional information [here](https://plopjs.com/).
 Currently, our Plop code generator supports the creation of the following:
 
 1. Tests
diff --git a/packages/core/README.md b/packages/core/README.md
index 559a6997a4..f5de9dfa99 100644
--- a/packages/core/README.md
+++ b/packages/core/README.md
@@ -48,7 +48,7 @@ We are using storybook in order to develop the components independently of any c
 run this to build & run the storybook locally:
 
 ```bash
-npm run storybook
+yarn storybook
 ```
 
 the storybook will be served on `http://localhost:7007`
diff --git a/packages/core/TESTING_README.md b/packages/core/TESTING_README.md
index 4a3d54fdc4..7a266a3705 100644
--- a/packages/core/TESTING_README.md
+++ b/packages/core/TESTING_README.md
@@ -62,7 +62,7 @@ describe("Tipseen tests", () => {
 
 ### Running Vibe tests
 **Snapshot and Behavior Tests:**
-To run all snapshot and behavior tests locally, use the command: `npm run test`.
+To run all snapshot and behavior tests locally, use the command: `yarn test`.
 
 **Local Storybook Interaction Tests:**
 To check interaction tests for a specific story in Storybook:
diff --git a/packages/storybook-blocks/CONTRIBUTING.md b/packages/storybook-blocks/CONTRIBUTING.md
index 29dbea92de..fd897bae5f 100644
--- a/packages/storybook-blocks/CONTRIBUTING.md
+++ b/packages/storybook-blocks/CONTRIBUTING.md
@@ -7,11 +7,11 @@ This library is open-sourced, and we encourage everyone to use and contribute in
 
 1. Create a fork of this repository
 2. Please use the correct node version it is listed in the `.nvmrc` file (you can use `nvm use` in order to switch to the right node version).
-3. Install dependencies with `npm install` command
+3. Install dependencies with `yarn install` command
 4. Sync from upstream if needed
-5. Run Storybook environment locally with `npm run storybook` command.
-6. Make sure all components behave as expected by running all Jest tests locally with 'npm run test'.
-7. If there are changes in some of the library snapshot tests, make sure all changes are intentional. If they are, update them with 'npm run test:update'.
+5. Run Storybook environment locally with `yarn storybook` command.
+6. Make sure all components behave as expected by running all Jest tests locally with 'yarn test'.
+7. If there are changes in some of the library snapshot tests, make sure all changes are intentional. If they are, update them with 'yarn test:update'.
 8. Commit to your local fork using [Semantic Commit Messages](https://seesparkbox.com/foundry/semantic_commit_messages)
 9. Create a PR with title based using [Semantic Commit Messages](https://seesparkbox.com/foundry/semantic_commit_messages)
    For example: `docs: add <ComponentName> story page`
diff --git a/packages/storybook-blocks/README.md b/packages/storybook-blocks/README.md
index 6baafd9322..0bad1254a9 100644
--- a/packages/storybook-blocks/README.md
+++ b/packages/storybook-blocks/README.md
@@ -84,7 +84,7 @@ Most of the components have a `className` prop that can be used to style them. T
 To run the storybook locally run this command:
 
 ```
-npm run storybook
+yarn storybook
 ```
 
 the storybook will hosted on http://localhost:6005
diff --git a/packages/style/README.md b/packages/style/README.md
index d1cf3d1a96..ee6d333b93 100644
--- a/packages/style/README.md
+++ b/packages/style/README.md
@@ -50,7 +50,7 @@ We maintain a metadata file for each icon, it helps our icon library be more rea
 
 How to add a new icon?
 Add the icon in SVG format under the src/Icons folder (size 20x20)
-then run `npm run generate-meta` and fill in the relevant information (you can add multiple icons and run the command once)
+then run `yarn generate-meta` and fill in the relevant information (you can add multiple icons and run the command once)
 
 ### Icon colors
 

From cc740bb612a50f2a78d167b7691ce59a44f1cb27 Mon Sep 17 00:00:00 2001
From: Tal Koren <talko@monday.com>
Date: Wed, 10 Apr 2024 13:41:54 +0300
Subject: [PATCH 2/9] docs: fix related components link (#2056)

---
 .../descriptions/dialog-description/dialog-description.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/storybook/components/related-components/descriptions/dialog-description/dialog-description.tsx b/packages/core/src/storybook/components/related-components/descriptions/dialog-description/dialog-description.tsx
index c658a1ab56..3664c65d1e 100644
--- a/packages/core/src/storybook/components/related-components/descriptions/dialog-description/dialog-description.tsx
+++ b/packages/core/src/storybook/components/related-components/descriptions/dialog-description/dialog-description.tsx
@@ -43,7 +43,7 @@ export const DialogDescription = () => {
     <RelatedComponent
       component={component}
       title="Dialog"
-      href="/?path=/docs/components-dialog-dialog--docs"
+      href="/?path=/docs/popover-dialog--docs"
       description="The dialog component's purpose is to position a popup component nearby another element, such as any kind of a button."
     />
   );

From 7c35041363e880667899df8f033b117058be3a25 Mon Sep 17 00:00:00 2001
From: shaharzil <shaharzi@monday.com>
Date: Wed, 10 Apr 2024 14:02:54 +0300
Subject: [PATCH 3/9] fix(DatePicker): added min width to buttons inside year
 picker (#2050)

---
 .../DatePicker/YearPicker/YearPicker.module.scss      |  4 ++++
 .../components/DatePicker/YearPicker/YearsList.tsx    | 11 ++++++++++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/components/DatePicker/YearPicker/YearPicker.module.scss b/packages/core/src/components/DatePicker/YearPicker/YearPicker.module.scss
index 3c2818b722..5f9c0c7a4a 100644
--- a/packages/core/src/components/DatePicker/YearPicker/YearPicker.module.scss
+++ b/packages/core/src/components/DatePicker/YearPicker/YearPicker.module.scss
@@ -38,6 +38,10 @@
     position: absolute;
     top: 55px;
     pointer-events: all;
+
+    .pickerOption {
+      min-width: 66px;
+    }
   }
 
   :global(.CalendarYear--blocked) {
diff --git a/packages/core/src/components/DatePicker/YearPicker/YearsList.tsx b/packages/core/src/components/DatePicker/YearPicker/YearsList.tsx
index 342c30d9a6..84c2e1efc2 100644
--- a/packages/core/src/components/DatePicker/YearPicker/YearsList.tsx
+++ b/packages/core/src/components/DatePicker/YearPicker/YearsList.tsx
@@ -1,4 +1,5 @@
 import Button from "../../Button/Button";
+import styles from "./YearPicker.module.scss";
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const NOOP = () => {};
@@ -19,7 +20,15 @@ const YearsList = ({ yearsItems, isYearBlocked, onSelect, selectedYear }: YearsL
         const kind = parseInt(selectedYear, 10) === currYear ? Button?.kinds?.PRIMARY : Button?.kinds?.TERTIARY;
 
         return (
-          <Button key={currYear} kind={kind} onClick={onClick} disabled={shouldBlockYear} marginLeft marginRight>
+          <Button
+            className={styles.pickerOption}
+            key={currYear}
+            kind={kind}
+            onClick={onClick}
+            disabled={shouldBlockYear}
+            marginLeft
+            marginRight
+          >
             {currYear.toString()}
           </Button>
         );

From d40b49efc63fe943a71bf9ba643b513cf5f66d97 Mon Sep 17 00:00:00 2001
From: chensara <chensara0@gmail.com>
Date: Wed, 10 Apr 2024 15:28:01 +0300
Subject: [PATCH 4/9] feat: add autoFocus to RadioButton (#2057)

---
 .../components/RadioButton/RadioButton.tsx    |   5 +
 .../radioButton-snapshot-tests.jest.tsx.snap  |  26 ++++
 .../radioButton-snapshot-tests.jest.tsx       |   6 +-
 .../__tests__/radioButton-tests.jest.tsx      | 119 ++++++++++--------
 4 files changed, 106 insertions(+), 50 deletions(-)

diff --git a/packages/core/src/components/RadioButton/RadioButton.tsx b/packages/core/src/components/RadioButton/RadioButton.tsx
index a845dd55bf..b4405ed854 100644
--- a/packages/core/src/components/RadioButton/RadioButton.tsx
+++ b/packages/core/src/components/RadioButton/RadioButton.tsx
@@ -27,6 +27,8 @@ export interface RadioButtonProps extends VibeComponentProps {
   value?: string;
   /** A string specifying a name for the input control. This name is submitted along with the control's value when the form data is submitted. */
   name?: string;
+  /** is autoFocus */
+  autoFocus?: boolean;
   /** is disabled */
   disabled?: boolean;
   /** why the input is disabled */
@@ -64,6 +66,7 @@ const RadioButton: VibeComponent<RadioButtonProps, HTMLElement> & object = forwa
        */
       radioButtonClassName,
       disabled = false,
+      autoFocus,
       disabledReason,
       defaultChecked = false,
       children,
@@ -80,6 +83,7 @@ const RadioButton: VibeComponent<RadioButtonProps, HTMLElement> & object = forwa
     const inputRef = useRef<HTMLInputElement | null>();
     const mergedRef = useMergeRef(ref, inputRef);
     const overrideClassName = backwardCompatibilityForProperties([className, componentClassName]);
+
     const onChildClick = useCallback(() => {
       if (disabled || !retainChildClick) return;
       if (inputRef.current) {
@@ -114,6 +118,7 @@ const RadioButton: VibeComponent<RadioButtonProps, HTMLElement> & object = forwa
               type="radio"
               value={value}
               name={name}
+              autoFocus={autoFocus}
               disabled={disabled}
               {...checkedProps}
               onChange={onSelect}
diff --git a/packages/core/src/components/RadioButton/__tests__/__snapshots__/radioButton-snapshot-tests.jest.tsx.snap b/packages/core/src/components/RadioButton/__tests__/__snapshots__/radioButton-snapshot-tests.jest.tsx.snap
index afbe409e9c..44d8af9e62 100644
--- a/packages/core/src/components/RadioButton/__tests__/__snapshots__/radioButton-snapshot-tests.jest.tsx.snap
+++ b/packages/core/src/components/RadioButton/__tests__/__snapshots__/radioButton-snapshot-tests.jest.tsx.snap
@@ -1,5 +1,31 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`RadioButton renders correctly when autoFocus 1`] = `
+<label
+  className="radioButton"
+  data-testid="radio-button"
+>
+  <span
+    className="inputContainer"
+  >
+    <input
+      autoFocus={true}
+      className="input"
+      defaultChecked={false}
+      disabled={false}
+      name=""
+      type="radio"
+      value=""
+    />
+    <span
+      className="control labelAnimation"
+      data-testid="radio-button-control"
+    />
+  </span>
+  
+</label>
+`;
+
 exports[`RadioButton renders correctly when checked 1`] = `
 <label
   className="radioButton"
diff --git a/packages/core/src/components/RadioButton/__tests__/radioButton-snapshot-tests.jest.tsx b/packages/core/src/components/RadioButton/__tests__/radioButton-snapshot-tests.jest.tsx
index 647ebedbd0..1b8d5c25c4 100644
--- a/packages/core/src/components/RadioButton/__tests__/radioButton-snapshot-tests.jest.tsx
+++ b/packages/core/src/components/RadioButton/__tests__/radioButton-snapshot-tests.jest.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import renderer from "react-test-renderer";
 import RadioButton from "../RadioButton";
 
@@ -33,6 +32,11 @@ describe("RadioButton renders correctly", () => {
     expect(tree).toMatchSnapshot();
   });
 
+  it("when autoFocus", () => {
+    const tree = renderer.create(<RadioButton autoFocus />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
   it("when unchecked", () => {
     const tree = renderer.create(<RadioButton checked={false} />).toJSON();
     expect(tree).toMatchSnapshot();
diff --git a/packages/core/src/components/RadioButton/__tests__/radioButton-tests.jest.tsx b/packages/core/src/components/RadioButton/__tests__/radioButton-tests.jest.tsx
index 9ad0aed30d..baf6a3f509 100644
--- a/packages/core/src/components/RadioButton/__tests__/radioButton-tests.jest.tsx
+++ b/packages/core/src/components/RadioButton/__tests__/radioButton-tests.jest.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import "@testing-library/jest-dom";
 import { fireEvent, render, cleanup, screen } from "@testing-library/react";
 import RadioButton from "../RadioButton";
 
@@ -17,60 +17,81 @@ describe("RadioButton tests", () => {
   let onChangeMock2: jest.Mock;
   let onChangeMock3: jest.Mock;
 
-  beforeEach(() => {
-    onChangeMock1 = jest.fn();
-    onChangeMock2 = jest.fn();
-    onChangeMock3 = jest.fn();
+  describe("With one of the radio buttons is checked by default", () => {
+    beforeEach(() => {
+      onChangeMock1 = jest.fn();
+      onChangeMock2 = jest.fn();
+      onChangeMock3 = jest.fn();
 
-    render(
-      <form name={formName}>
-        <RadioButton
-          name={radiosName}
-          value={option1Value}
-          text={option1Text}
-          onSelect={onChangeMock1}
-          defaultChecked={true}
-        />
-        <RadioButton name={radiosName} value={option2Value} text={option2Text} onSelect={onChangeMock2} />
-        <RadioButton name={radiosName} value={option3Value} text={option3Text} onSelect={onChangeMock3} />
-      </form>
-    );
-  });
+      render(
+        <form name={formName}>
+          <RadioButton
+            name={radiosName}
+            value={option1Value}
+            text={option1Text}
+            onSelect={onChangeMock1}
+            defaultChecked
+          />
+          <RadioButton name={radiosName} value={option2Value} text={option2Text} onSelect={onChangeMock2} />
+          <RadioButton name={radiosName} value={option3Value} text={option3Text} onSelect={onChangeMock3} />
+        </form>
+      );
+    });
 
-  afterEach(() => {
-    cleanup();
-  });
+    afterEach(() => {
+      cleanup();
+    });
 
-  it("should default select 1st option", () => {
-    const option1: HTMLInputElement = screen.getByLabelText(option1Text);
-    const option2: HTMLInputElement = screen.getByLabelText(option2Text);
-    const option3: HTMLInputElement = screen.getByLabelText(option3Text);
-    expect(option1.checked).toBeTruthy();
-    expect(option2.checked).toBeFalsy();
-    expect(option3.checked).toBeFalsy();
-  });
+    it("should default select 1st option", () => {
+      const option1: HTMLInputElement = screen.getByLabelText(option1Text);
+      const option2: HTMLInputElement = screen.getByLabelText(option2Text);
+      const option3: HTMLInputElement = screen.getByLabelText(option3Text);
+      expect(option1.checked).toBeTruthy();
+      expect(option2.checked).toBeFalsy();
+      expect(option3.checked).toBeFalsy();
+    });
 
-  it("should select 2nd option", () => {
-    const option1: HTMLInputElement = screen.getByLabelText(option1Text);
-    const option2: HTMLInputElement = screen.getByLabelText(option2Text);
-    const option3: HTMLInputElement = screen.getByLabelText(option3Text);
-    fireEvent.click(option2);
-    expect(option1.checked).toBeFalsy();
-    expect(option2.checked).toBeTruthy();
-    expect(option3.checked).toBeFalsy();
-  });
+    it("should select 2nd option", () => {
+      const option1: HTMLInputElement = screen.getByLabelText(option1Text);
+      const option2: HTMLInputElement = screen.getByLabelText(option2Text);
+      const option3: HTMLInputElement = screen.getByLabelText(option3Text);
+      fireEvent.click(option2);
+      expect(option1.checked).toBeFalsy();
+      expect(option2.checked).toBeTruthy();
+      expect(option3.checked).toBeFalsy();
+    });
+
+    it("should call the onChange callback when clicked", () => {
+      const option2 = screen.getByLabelText(option2Text);
+      fireEvent.click(option2);
+      expect(onChangeMock2.mock.calls.length).toBe(1);
+      expect(onChangeMock2.mock.calls[0]).toBeTruthy();
+    });
 
-  it("should call the onChange callback when clicked", () => {
-    const option2 = screen.getByLabelText(option2Text);
-    fireEvent.click(option2);
-    expect(onChangeMock2.mock.calls.length).toBe(1);
-    expect(onChangeMock2.mock.calls[0]).toBeTruthy();
+    it("should be the same text", () => {
+      const text = "test text";
+      const { getByText } = render(<RadioButton text={text} />);
+      const radioButtonComponentText = getByText(text);
+      expect(radioButtonComponentText).toBeTruthy();
+    });
   });
 
-  it("should be the same text", () => {
-    const text = "test text";
-    const { getByText } = render(<RadioButton text={text} />);
-    const radioButtonComponentText = getByText(text);
-    expect(radioButtonComponentText).toBeTruthy();
+  describe("When all radio buttons are unchecked", () => {
+    it("should auto focus 2nd option", () => {
+      render(
+        <form name={formName}>
+          <RadioButton text={option1Text} />
+          <RadioButton text={option2Text} autoFocus />
+          <RadioButton text={option3Text} />
+        </form>
+      );
+
+      const option1: HTMLInputElement = screen.getByLabelText(option1Text);
+      const option2: HTMLInputElement = screen.getByLabelText(option2Text);
+      const option3: HTMLInputElement = screen.getByLabelText(option3Text);
+      expect(option1).not.toHaveFocus();
+      expect(option2).toHaveFocus();
+      expect(option3).not.toHaveFocus();
+    });
   });
 });

From 38bbb5cb77163b05c8239fc043330166219082bc Mon Sep 17 00:00:00 2001
From: ci <deploy@monday.com>
Date: Wed, 10 Apr 2024 12:41:37 +0000
Subject: [PATCH 5/9] Publish

 - monday-ui-react-core@2.101.0
 - vibe-storybook-components@0.18.1
 - monday-ui-style@0.4.1
---
 packages/core/CHANGELOG.md             | 16 ++++++++++++++++
 packages/core/package.json             |  6 +++---
 packages/storybook-blocks/CHANGELOG.md |  8 ++++++++
 packages/storybook-blocks/package.json |  2 +-
 packages/style/CHANGELOG.md            |  8 ++++++++
 packages/style/package.json            |  2 +-
 6 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
index 71c3ca3a26..852cd76fe3 100644
--- a/packages/core/CHANGELOG.md
+++ b/packages/core/CHANGELOG.md
@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.101.0](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-react-core@2.100.1...monday-ui-react-core@2.101.0) (2024-04-10)
+
+
+### Bug Fixes
+
+* **DatePicker:** added min width to buttons inside year picker ([#2050](https://github.com/mondaycom/monday-ui-react-core/issues/2050)) ([7c35041](https://github.com/mondaycom/monday-ui-react-core/commit/7c35041363e880667899df8f033b117058be3a25))
+
+
+### Features
+
+* add autoFocus to RadioButton ([#2057](https://github.com/mondaycom/monday-ui-react-core/issues/2057)) ([d40b49e](https://github.com/mondaycom/monday-ui-react-core/commit/d40b49efc63fe943a71bf9ba643b513cf5f66d97))
+
+
+
+
+
 ## [2.100.1](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-react-core@2.100.0...monday-ui-react-core@2.100.1) (2024-04-07)
 
 
diff --git a/packages/core/package.json b/packages/core/package.json
index 26ff71d84c..fadbfcfa93 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "monday-ui-react-core",
-  "version": "2.100.1",
+  "version": "2.101.0",
   "description": "Official monday.com UI resources for application development in React.js",
   "main": "./dist/main.js",
   "types": "./dist/types.d.ts",
@@ -109,7 +109,7 @@
     "classnames": "^2.3.2",
     "framer-motion": "^6.5.1",
     "lodash-es": "^4.17.21",
-    "monday-ui-style": "0.4.0",
+    "monday-ui-style": "0.4.1",
     "prop-types": "^15.8.1",
     "react-dates": "21.8.0",
     "react-inlinesvg": "^3.0.1",
@@ -121,7 +121,7 @@
     "react-window": "^1.8.7",
     "react-windowed-select": "^2.0.4",
     "style-inject": "^0.3.0",
-    "vibe-storybook-components": "0.18.0"
+    "vibe-storybook-components": "0.18.1"
   },
   "devDependencies": {
     "@babel/core": "^7.23.2",
diff --git a/packages/storybook-blocks/CHANGELOG.md b/packages/storybook-blocks/CHANGELOG.md
index 7c83e8b37b..deb9293c40 100644
--- a/packages/storybook-blocks/CHANGELOG.md
+++ b/packages/storybook-blocks/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.18.1](https://github.com/mondaycom/monday-ui-react-core/compare/vibe-storybook-components@0.18.0...vibe-storybook-components@0.18.1) (2024-04-10)
+
+**Note:** Version bump only for package vibe-storybook-components
+
+
+
+
+
 # [0.18.0](https://github.com/mondaycom/monday-ui-react-core/compare/vibe-storybook-components@0.17.2...vibe-storybook-components@0.18.0) (2024-04-03)
 
 
diff --git a/packages/storybook-blocks/package.json b/packages/storybook-blocks/package.json
index 455b737c4a..c3840e3622 100644
--- a/packages/storybook-blocks/package.json
+++ b/packages/storybook-blocks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vibe-storybook-components",
-  "version": "0.18.0",
+  "version": "0.18.1",
   "description": "Collection of Vibe's Storybook components",
   "license": "MIT",
   "repository": {
diff --git a/packages/style/CHANGELOG.md b/packages/style/CHANGELOG.md
index 589c2541a6..4eecd9c6fb 100644
--- a/packages/style/CHANGELOG.md
+++ b/packages/style/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.4.1](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-style@0.4.0...monday-ui-style@0.4.1) (2024-04-10)
+
+**Note:** Version bump only for package monday-ui-style
+
+
+
+
+
 # [0.4.0](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-style@0.3.0...monday-ui-style@0.4.0) (2024-04-03)
 
 
diff --git a/packages/style/package.json b/packages/style/package.json
index bcb72a8d47..6ab7d59898 100644
--- a/packages/style/package.json
+++ b/packages/style/package.json
@@ -1,6 +1,6 @@
 {
   "name": "monday-ui-style",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Monday UI CSS Foundations",
   "main": "dist/index.css",
   "scripts": {

From cd26e7cf7b666da211efc7dd7af4f58a25a1b7a0 Mon Sep 17 00:00:00 2001
From: chensara <chensara0@gmail.com>
Date: Thu, 11 Apr 2024 11:10:08 +0300
Subject: [PATCH 6/9] feat: add autoFocus to CheckBox (#2059)

Co-authored-by: Yossi Saadi <yossisaadi@gmail.com>
---
 .../core/src/components/Checkbox/Checkbox.tsx |  4 +
 .../checkbox-snapshot-tests.jest.tsx.snap     | 47 +++++++++++
 .../checkbox-snapshot-tests.jest.tsx          |  5 ++
 .../__tests__/checkbox-tests.jest.tsx         | 80 ++++++++++++++-----
 4 files changed, 115 insertions(+), 21 deletions(-)

diff --git a/packages/core/src/components/Checkbox/Checkbox.tsx b/packages/core/src/components/Checkbox/Checkbox.tsx
index b1954d63ac..9836f9bc6e 100644
--- a/packages/core/src/components/Checkbox/Checkbox.tsx
+++ b/packages/core/src/components/Checkbox/Checkbox.tsx
@@ -36,6 +36,8 @@ export interface CheckBoxProps extends VibeComponentProps {
   checked?: boolean;
   /** An in between state to display a non selected */
   indeterminate?: boolean;
+  /** is autoFocus */
+  autoFocus?: boolean;
   /** Set the option to be disabled */
   disabled?: boolean;
   /** the default value which the checkbox will start from  */
@@ -63,6 +65,7 @@ const Checkbox: VibeComponent<CheckBoxProps, HTMLInputElement> = forwardRef(
       ariaLabelledBy,
       onChange = NOOP,
       checked,
+      autoFocus,
       indeterminate = false,
       disabled = false,
       defaultChecked,
@@ -127,6 +130,7 @@ const Checkbox: VibeComponent<CheckBoxProps, HTMLInputElement> = forwardRef(
           value={value}
           name={name}
           type="checkbox"
+          autoFocus={autoFocus}
           onChange={onChange}
           defaultChecked={overrideDefaultChecked}
           disabled={disabled}
diff --git a/packages/core/src/components/Checkbox/__tests__/__snapshots__/checkbox-snapshot-tests.jest.tsx.snap b/packages/core/src/components/Checkbox/__tests__/__snapshots__/checkbox-snapshot-tests.jest.tsx.snap
index c3d6b4bd7f..49a900db2a 100644
--- a/packages/core/src/components/Checkbox/__tests__/__snapshots__/checkbox-snapshot-tests.jest.tsx.snap
+++ b/packages/core/src/components/Checkbox/__tests__/__snapshots__/checkbox-snapshot-tests.jest.tsx.snap
@@ -1,5 +1,52 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Checkbox renders correctly when autoFocus 1`] = `
+<label
+  className="wrapper"
+  data-testid="checkbox"
+  onClickCapture={[Function]}
+  onMouseUp={[Function]}
+>
+  <input
+    aria-label=""
+    autoFocus={true}
+    className="input"
+    defaultChecked={false}
+    disabled={false}
+    name=""
+    onChange={[Function]}
+    type="checkbox"
+    value=""
+  />
+  <div
+    className="checkbox"
+    data-testid="checkbox-checkbox"
+  >
+    <svg
+      aria-hidden={true}
+      className="icon icon noFocusStyle"
+      data-testid="icon"
+      fill="currentColor"
+      height="16"
+      onClick={[Function]}
+      viewBox="0 0 20 20"
+      width="16"
+    >
+      <path
+        clipRule="evenodd"
+        d="M8.53033 14.2478L8 13.7175L7.46967 14.2478C7.76256 14.5407 8.23744 14.5407 8.53033 14.2478ZM8 12.6569L4.53033 9.18718C4.23744 8.89429 3.76256 8.89429 3.46967 9.18718C3.17678 9.48008 3.17678 9.95495 3.46967 10.2478L7.46967 14.2478L8 13.7175L8.53033 14.2478L16.2478 6.53033C16.5407 6.23743 16.5407 5.76256 16.2478 5.46967C15.955 5.17677 15.4801 5.17677 15.1872 5.46967L8 12.6569Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  </div>
+  <span
+    className="typography primary start singleLineEllipsis text text2Normal label"
+    data-testid="checkbox-label"
+  />
+</label>
+`;
+
 exports[`Checkbox renders correctly when checked 1`] = `
 <label
   className="wrapper"
diff --git a/packages/core/src/components/Checkbox/__tests__/checkbox-snapshot-tests.jest.tsx b/packages/core/src/components/Checkbox/__tests__/checkbox-snapshot-tests.jest.tsx
index 855419df9b..b8277699aa 100644
--- a/packages/core/src/components/Checkbox/__tests__/checkbox-snapshot-tests.jest.tsx
+++ b/packages/core/src/components/Checkbox/__tests__/checkbox-snapshot-tests.jest.tsx
@@ -25,6 +25,11 @@ describe("Checkbox renders correctly", () => {
     expect(tree).toMatchSnapshot();
   });
 
+  it("when autoFocus", () => {
+    const tree = renderer.create(<Checkbox autoFocus />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
   it("with name", () => {
     const tree = renderer.create(<Checkbox name="checkbox" />).toJSON();
     expect(tree).toMatchSnapshot();
diff --git a/packages/core/src/components/Checkbox/__tests__/checkbox-tests.jest.tsx b/packages/core/src/components/Checkbox/__tests__/checkbox-tests.jest.tsx
index 1bab9d84e5..fe562b49ca 100644
--- a/packages/core/src/components/Checkbox/__tests__/checkbox-tests.jest.tsx
+++ b/packages/core/src/components/Checkbox/__tests__/checkbox-tests.jest.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import "@testing-library/jest-dom";
 import { fireEvent, render, cleanup, screen } from "@testing-library/react";
 import Checkbox from "../Checkbox";
 
@@ -39,6 +40,8 @@ type RenderHelper = {
   option3Text: string;
   option3Value: string;
   onChangeMock3: jest.MockedFunction<MockedFunction>;
+  defaultChecked?: boolean;
+  autoFocus?: boolean;
 };
 
 function renderCheckboxes({
@@ -54,7 +57,9 @@ function renderCheckboxes({
   checkbox3Name,
   option3Text,
   option3Value,
-  onChangeMock3
+  onChangeMock3,
+  defaultChecked,
+  autoFocus
 }: RenderHelper) {
   render(
     <form name={formName}>
@@ -62,8 +67,9 @@ function renderCheckboxes({
         name={checkbox1Name}
         value={option1Value}
         label={option1Text}
-        defaultChecked={true}
+        defaultChecked={defaultChecked}
         onChange={onChangeMock1}
+        autoFocus={autoFocus}
       />
       <Checkbox name={checkbox2Name} value={option2Value} label={option2Text} onChange={onChangeMock2} />
       <Checkbox name={checkbox3Name} value={option3Value} label={option3Text} onChange={onChangeMock3} />
@@ -87,23 +93,24 @@ function testUnselectFirstOption(
 }
 
 describe("Checkbox tests", () => {
-  describe("regular checkbox tests", () => {
-    const {
-      formName,
-      checkbox1Name,
-      option1Value,
-      option1Text,
-      checkbox2Name,
-      option2Value,
-      option2Text,
-      checkbox3Name,
-      option3Value,
-      option3Text
-    } = createCheckboxesVariables();
+  const {
+    formName,
+    checkbox1Name,
+    option1Value,
+    option1Text,
+    checkbox2Name,
+    option2Value,
+    option2Text,
+    checkbox3Name,
+    option3Value,
+    option3Text
+  } = createCheckboxesVariables();
 
-    let onChangeMock1: jest.MockedFunction<MockedFunction>,
-      onChangeMock2: jest.MockedFunction<MockedFunction>,
-      onChangeMock3: jest.MockedFunction<MockedFunction>;
+  let onChangeMock1: jest.MockedFunction<MockedFunction>,
+    onChangeMock2: jest.MockedFunction<MockedFunction>,
+    onChangeMock3: jest.MockedFunction<MockedFunction>;
+
+  describe("regular checkbox tests with default checked", () => {
     beforeEach(() => {
       onChangeMock1 = jest.fn();
       onChangeMock2 = jest.fn();
@@ -122,7 +129,8 @@ describe("Checkbox tests", () => {
         option1Value,
         checkbox1Name,
         checkbox2Name,
-        checkbox3Name
+        checkbox3Name,
+        defaultChecked: true
       });
     });
 
@@ -139,7 +147,7 @@ describe("Checkbox tests", () => {
       expect(option3.checked).toBeFalsy();
     });
 
-    it("should unselect  1st option", () => {
+    it("should unselect 1st option", () => {
       testUnselectFirstOption(option1Text, option2Text, option3Text);
     });
 
@@ -179,6 +187,35 @@ describe("Checkbox tests", () => {
       });
     });
   });
+
+  describe("regular checkbox tests with no default checked", () => {
+    it("should auto focus 1st checkbox", () => {
+      renderCheckboxes({
+        formName,
+        onChangeMock1,
+        onChangeMock2,
+        onChangeMock3,
+        option3Text,
+        option3Value,
+        option2Text,
+        option2Value,
+        option1Text,
+        option1Value,
+        checkbox1Name,
+        checkbox2Name,
+        checkbox3Name,
+        autoFocus: true
+      });
+
+      const option1 = screen.getByLabelText<HTMLInputElement>(option1Text);
+      const option2 = screen.getByLabelText<HTMLInputElement>(option2Text);
+      const option3 = screen.getByLabelText<HTMLInputElement>(option3Text);
+      expect(option1).toHaveFocus();
+      expect(option2).not.toHaveFocus();
+      expect(option3).not.toHaveFocus();
+    });
+  });
+
   describe("specific firefox checkbox tests", () => {
     const {
       formName,
@@ -230,7 +267,8 @@ describe("Checkbox tests", () => {
         option1Value,
         checkbox1Name,
         checkbox2Name,
-        checkbox3Name
+        checkbox3Name,
+        defaultChecked: true
       });
     });
 

From d3335ceab46352c9cf6daef506246b30cbb3d84b Mon Sep 17 00:00:00 2001
From: ci <deploy@monday.com>
Date: Thu, 11 Apr 2024 08:24:27 +0000
Subject: [PATCH 7/9] Publish

 - monday-ui-react-core@2.102.0
---
 packages/core/CHANGELOG.md | 11 +++++++++++
 packages/core/package.json |  2 +-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
index 852cd76fe3..fafa334f24 100644
--- a/packages/core/CHANGELOG.md
+++ b/packages/core/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.102.0](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-react-core@2.101.0...monday-ui-react-core@2.102.0) (2024-04-11)
+
+
+### Features
+
+* add autoFocus to CheckBox ([#2059](https://github.com/mondaycom/monday-ui-react-core/issues/2059)) ([cd26e7c](https://github.com/mondaycom/monday-ui-react-core/commit/cd26e7cf7b666da211efc7dd7af4f58a25a1b7a0))
+
+
+
+
+
 # [2.101.0](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-react-core@2.100.1...monday-ui-react-core@2.101.0) (2024-04-10)
 
 
diff --git a/packages/core/package.json b/packages/core/package.json
index fadbfcfa93..c51ccbfa14 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "monday-ui-react-core",
-  "version": "2.101.0",
+  "version": "2.102.0",
   "description": "Official monday.com UI resources for application development in React.js",
   "main": "./dist/main.js",
   "types": "./dist/types.d.ts",

From e395bc158c4b1d0deacd6cda7975891af08811c8 Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Mon, 15 Apr 2024 11:24:37 +0300
Subject: [PATCH 8/9] docs: allow having Internal section with stories only
 visible for dev mode (#2062)

---
 packages/core/.storybook/manager.jsx                 | 12 +++++++++++-
 packages/core/.storybook/preview.tsx                 |  1 +
 .../catalog/catalog.stories.tsx                      |  3 ++-
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/core/.storybook/manager.jsx b/packages/core/.storybook/manager.jsx
index 18d90f52a1..1d2cbde815 100644
--- a/packages/core/.storybook/manager.jsx
+++ b/packages/core/.storybook/manager.jsx
@@ -1,8 +1,9 @@
-import { addons } from "@storybook/manager-api";
 import React from "react";
+import { addons } from "@storybook/manager-api";
 import { SidebarItem } from "vibe-storybook-components";
 import "vibe-storybook-components/index.css";
 import theme from "./theme";
+import isChromatic from "chromatic/isChromatic";
 
 window.STORYBOOK_GA_ID = "UA-308574295";
 window.STORYBOOK_REACT_GA_OPTIONS = {};
@@ -24,6 +25,15 @@ addons.setConfig({
       }
 
       return <SidebarItem status={parameters.status}>{name.replace(storyStatus, "").trim()}</SidebarItem>;
+    },
+    filters: {
+      patterns: filterStory
     }
   }
 });
+
+function filterStory(item) {
+  const isDev = isChromatic() || process.env.NODE_ENV === "development";
+  const isInternal = !item.tags?.includes?.("internal") && !item.title?.startsWith?.("Internal");
+  return isDev || isInternal;
+}
diff --git a/packages/core/.storybook/preview.tsx b/packages/core/.storybook/preview.tsx
index 5323cb1a33..51f0a67a7d 100644
--- a/packages/core/.storybook/preview.tsx
+++ b/packages/core/.storybook/preview.tsx
@@ -97,6 +97,7 @@ const preview: Preview = {
           "Catalog",
           "Change Log",
           "Typography Migration Guide",
+          "Internal",
           "Foundations",
           "Buttons",
           "Inputs",
diff --git a/packages/core/src/storybook/stand-alone-documentaion/catalog/catalog.stories.tsx b/packages/core/src/storybook/stand-alone-documentaion/catalog/catalog.stories.tsx
index ce32929ce5..c0e93821f8 100644
--- a/packages/core/src/storybook/stand-alone-documentaion/catalog/catalog.stories.tsx
+++ b/packages/core/src/storybook/stand-alone-documentaion/catalog/catalog.stories.tsx
@@ -1,7 +1,8 @@
 import { CatalogTemplate } from "./Catalog/Catalog.stories.templates";
 
 export default {
-  title: "Catalog"
+  title: "Catalog",
+  tags: ["internal"]
 };
 
 export const Catalog = {

From de99f06b472b350cba6f43d960505f430769fb9e Mon Sep 17 00:00:00 2001
From: Or Nuri <ornu@monday.com>
Date: Mon, 15 Apr 2024 11:37:27 +0300
Subject: [PATCH 9/9] feat: Dropdown and TextFeild accessibility improvements
 (#1898)

---
 .../combobox-snapshot-tests.jest.js.snap      | 48 ++++++++-----
 .../core/src/components/Dropdown/Dropdown.jsx | 33 ++++++++-
 .../components/Dropdown/DropdownConstants.js  |  2 +
 .../dropdown-snapshot-tests.jest.js.snap      | 63 +++++++++++++++++
 .../Dropdown/components/menu/menu.jsx         | 15 +++-
 .../Dropdown/components/option/option.jsx     | 12 +++-
 .../search-snapshot-tests.jest.js.snap        | 37 ++++++----
 .../src/components/TextField/TextField.tsx    | 39 ++++++++---
 .../textField-snapshot-tests.jest.js.snap     | 70 +++++++++++++------
 9 files changed, 253 insertions(+), 66 deletions(-)

diff --git a/packages/core/src/components/Combobox/__tests__/__snapshots__/combobox-snapshot-tests.jest.js.snap b/packages/core/src/components/Combobox/__tests__/__snapshots__/combobox-snapshot-tests.jest.js.snap
index c3794a99ab..19ebd9424d 100644
--- a/packages/core/src/components/Combobox/__tests__/__snapshots__/combobox-snapshot-tests.jest.js.snap
+++ b/packages/core/src/components/Combobox/__tests__/__snapshots__/combobox-snapshot-tests.jest.js.snap
@@ -28,9 +28,10 @@ exports[`Combobox renders correctly when disabled 1`] = `
         >
           <input
             aria-activedescendant=""
-            aria-invalid={null}
+            aria-invalid={false}
             aria-label="Search for content"
             aria-owns=""
+            aria-required={false}
             autoComplete="off"
             className="comboboxSearch search input inputHasIcon"
             data-testid="search_combobox-search"
@@ -148,9 +149,10 @@ exports[`Combobox renders correctly with another noResultsMessage 1`] = `
         >
           <input
             aria-activedescendant=""
-            aria-invalid={null}
+            aria-invalid={false}
             aria-label="Search for content"
             aria-owns=""
+            aria-required={false}
             autoComplete="off"
             className="comboboxSearch search input inputHasIcon"
             data-testid="search_combobox-search"
@@ -268,9 +270,10 @@ exports[`Combobox renders correctly with autoFocus 1`] = `
         >
           <input
             aria-activedescendant=""
-            aria-invalid={null}
+            aria-invalid={false}
             aria-label="Search for content"
             aria-owns=""
+            aria-required={false}
             autoComplete="off"
             className="comboboxSearch search input inputHasIcon"
             data-testid="search_combobox-search"
@@ -388,9 +391,10 @@ exports[`Combobox renders correctly with className 1`] = `
         >
           <input
             aria-activedescendant=""
-            aria-invalid={null}
+            aria-invalid={false}
             aria-label="Search for content"
             aria-owns=""
+            aria-required={false}
             autoComplete="off"
             className="comboboxSearch search input inputHasIcon"
             data-testid="search_combobox-search"
@@ -508,9 +512,10 @@ exports[`Combobox renders correctly with custom search icon 1`] = `
         >
           <input
             aria-activedescendant=""
-            aria-invalid={null}
+            aria-invalid={false}
             aria-label="Search for content"
             aria-owns=""
+            aria-required={false}
             autoComplete="off"
             className="comboboxSearch search input inputHasIcon"
             data-testid="search_combobox-search"
@@ -628,9 +633,10 @@ exports[`Combobox renders correctly with divider 1`] = `
         >
           <input
             aria-activedescendant=""
-            aria-invalid={null}
+            aria-invalid={false}
             aria-label="Search for content"
             aria-owns=""
+            aria-required={false}
             autoComplete="off"
             className="comboboxSearch search input inputHasIcon"
             data-testid="search_combobox-search"
@@ -846,9 +852,10 @@ exports[`Combobox renders correctly with divider and colored categories 1`] = `
         >
           <input
             aria-activedescendant=""
-            aria-invalid={null}
+            aria-invalid={false}
             aria-label="Search for content"
             aria-owns=""
+            aria-required={false}
             autoComplete="off"
             className="comboboxSearch search input inputHasIcon"
             data-testid="search_combobox-search"
@@ -1074,9 +1081,10 @@ exports[`Combobox renders correctly with empty props 1`] = `
         >
           <input
             aria-activedescendant=""
-            aria-invalid={null}
+            aria-invalid={false}
             aria-label="Search for content"
             aria-owns=""
+            aria-required={false}
             autoComplete="off"
             className="comboboxSearch search input inputHasIcon"
             data-testid="search_combobox-search"
@@ -1194,9 +1202,10 @@ exports[`Combobox renders correctly with id 1`] = `
         >
           <input
             aria-activedescendant=""
-            aria-invalid={null}
+            aria-invalid={false}
             aria-label="Search for content"
             aria-owns=""
+            aria-required={false}
             autoComplete="off"
             className="comboboxSearch search input inputHasIcon"
             data-testid="search_combobox-search"
@@ -1314,9 +1323,10 @@ exports[`Combobox renders correctly with loading 1`] = `
         >
           <input
             aria-activedescendant=""
-            aria-invalid={null}
+            aria-invalid={false}
             aria-label="Search for content"
             aria-owns=""
+            aria-required={false}
             autoComplete="off"
             className="comboboxSearch search input inputHasIcon"
             data-testid="search_combobox-search"
@@ -1463,9 +1473,10 @@ exports[`Combobox renders correctly with optionClassName 1`] = `
         >
           <input
             aria-activedescendant=""
-            aria-invalid={null}
+            aria-invalid={false}
             aria-label="Search for content"
             aria-owns=""
+            aria-required={false}
             autoComplete="off"
             className="comboboxSearch search input inputHasIcon"
             data-testid="search_combobox-search"
@@ -1583,9 +1594,10 @@ exports[`Combobox renders correctly with optionLineHeight 1`] = `
         >
           <input
             aria-activedescendant=""
-            aria-invalid={null}
+            aria-invalid={false}
             aria-label="Search for content"
             aria-owns=""
+            aria-required={false}
             autoComplete="off"
             className="comboboxSearch search input inputHasIcon"
             data-testid="search_combobox-search"
@@ -1703,9 +1715,10 @@ exports[`Combobox renders correctly with optionRenderer 1`] = `
         >
           <input
             aria-activedescendant=""
-            aria-invalid={null}
+            aria-invalid={false}
             aria-label="Search for content"
             aria-owns=""
+            aria-required={false}
             autoComplete="off"
             className="comboboxSearch search input inputHasIcon"
             data-testid="search_combobox-search"
@@ -1876,9 +1889,10 @@ exports[`Combobox renders correctly with optionsListHeight 1`] = `
         >
           <input
             aria-activedescendant=""
-            aria-invalid={null}
+            aria-invalid={false}
             aria-label="Search for content"
             aria-owns=""
+            aria-required={false}
             autoComplete="off"
             className="comboboxSearch search input inputHasIcon"
             data-testid="search_combobox-search"
@@ -1996,9 +2010,10 @@ exports[`Combobox renders correctly with placeholder 1`] = `
         >
           <input
             aria-activedescendant=""
-            aria-invalid={null}
+            aria-invalid={false}
             aria-label="Search for content"
             aria-owns=""
+            aria-required={false}
             autoComplete="off"
             className="comboboxSearch search input inputHasIcon"
             data-testid="search_combobox-search"
@@ -2116,9 +2131,10 @@ exports[`Combobox renders correctly with size 1`] = `
         >
           <input
             aria-activedescendant=""
-            aria-invalid={null}
+            aria-invalid={false}
             aria-label="Search for content"
             aria-owns=""
+            aria-required={false}
             autoComplete="off"
             className="comboboxSearch search input inputHasIcon"
             data-testid="search_combobox-search"
diff --git a/packages/core/src/components/Dropdown/Dropdown.jsx b/packages/core/src/components/Dropdown/Dropdown.jsx
index f689669cce..55c7c334ad 100644
--- a/packages/core/src/components/Dropdown/Dropdown.jsx
+++ b/packages/core/src/components/Dropdown/Dropdown.jsx
@@ -19,6 +19,8 @@ import {
   defaultCustomStyles,
   DROPDOWN_CHIP_COLORS,
   DROPDOWN_ID,
+  DROPDOWN_MENU_ID,
+  DROPDOWN_MENU_ARIA_LABEL,
   DROPDOWN_MENU_PLACEMENT,
   DROPDOWN_MENU_POSITION
 } from "./DropdownConstants";
@@ -69,6 +71,8 @@ const Dropdown = forwardRef(
       menuIsOpen,
       tabIndex,
       id,
+      menuId,
+      menuAriaLabel,
       autoFocus,
       multi = false,
       multiline = false,
@@ -178,9 +182,15 @@ const Dropdown = forwardRef(
 
     const Menu = useCallback(
       props => (
-        <MenuComponent {...props} Renderer={menuRenderer} dropdownMenuWrapperClassName={dropdownMenuWrapperClassName} />
+        <MenuComponent
+          {...props}
+          id={menuId}
+          ariaLabel={menuAriaLabel}
+          Renderer={menuRenderer}
+          dropdownMenuWrapperClassName={dropdownMenuWrapperClassName}
+        />
       ),
-      [dropdownMenuWrapperClassName, menuRenderer]
+      [dropdownMenuWrapperClassName, menuRenderer, menuId, menuAriaLabel]
     );
 
     const DropdownIndicator = useCallback(props => <DropdownIndicatorComponent {...props} size={size} />, [size]);
@@ -192,7 +202,10 @@ const Dropdown = forwardRef(
       [finalOptionRenderer, optionWrapperClassName]
     );
 
-    const Input = useCallback(props => <components.Input {...props} aria-label="Dropdown input" />, []);
+    const Input = useCallback(
+      props => <components.Input {...props} aria-label="Dropdown input" aria-controls={menuId} />,
+      [menuId]
+    );
 
     const SingleValue = useCallback(
       props => (
@@ -334,6 +347,10 @@ const Dropdown = forwardRef(
         aria-readonly={readOnly}
         aria-label={overrideAriaLabel}
         aria-details={tooltipContent}
+        aria-expanded={!readOnly && menuIsOpen}
+        aria-haspopup="listbox"
+        aria-activedescendant
+        role="combobox"
         defaultValue={defaultValue}
         value={value}
         onMenuOpen={onMenuOpen}
@@ -406,6 +423,8 @@ Dropdown.defaultProps = {
   tabIndex: "0",
   onOptionRemove: undefined,
   id: DROPDOWN_ID,
+  menuId: DROPDOWN_MENU_ID,
+  menuAriaLabel: DROPDOWN_MENU_ARIA_LABEL,
   autoFocus: false,
   closeMenuOnSelect: undefined,
   closeMenuOnScroll: false,
@@ -599,6 +618,14 @@ Dropdown.propTypes = {
    * ID for the select container
    */
   id: PropTypes.string,
+  /**
+   * ID for the menu container
+   */
+  menuId: PropTypes.string,
+  /**
+   * aria-label attribute for the menu container
+   */
+  menuAriaLabel: PropTypes.string,
   /**
    * focusAuto when component mount
    */
diff --git a/packages/core/src/components/Dropdown/DropdownConstants.js b/packages/core/src/components/Dropdown/DropdownConstants.js
index 39bd886060..d36a81f45f 100644
--- a/packages/core/src/components/Dropdown/DropdownConstants.js
+++ b/packages/core/src/components/Dropdown/DropdownConstants.js
@@ -3,6 +3,8 @@ export const defaultCustomStyles = baseStyles => baseStyles;
 export const ADD_AUTO_HEIGHT_COMPONENTS = ["container", "control", "valueContainer"];
 
 export const DROPDOWN_ID = "dropdown-menu-id";
+export const DROPDOWN_MENU_ID = "dropdown-menu-list-id";
+export const DROPDOWN_MENU_ARIA_LABEL = "Dropdown menu";
 
 export const DROPDOWN_CHIP_COLORS = {
   PRIMARY: "PRIMARY",
diff --git a/packages/core/src/components/Dropdown/__tests__/__snapshots__/dropdown-snapshot-tests.jest.js.snap b/packages/core/src/components/Dropdown/__tests__/__snapshots__/dropdown-snapshot-tests.jest.js.snap
index 7d3b3360d7..2337f53106 100644
--- a/packages/core/src/components/Dropdown/__tests__/__snapshots__/dropdown-snapshot-tests.jest.js.snap
+++ b/packages/core/src/components/Dropdown/__tests__/__snapshots__/dropdown-snapshot-tests.jest.js.snap
@@ -40,6 +40,7 @@ exports[`Dropdown renders correctly snapshot driver should open menu on click if
             >
               <input
                 aria-autocomplete="list"
+                aria-controls="dropdown-menu-list-id"
                 aria-label="Dropdown input"
                 autocapitalize="none"
                 autocomplete="off"
@@ -96,8 +97,10 @@ exports[`Dropdown renders correctly snapshot driver should open menu on click if
         class=" css-bknh9q-Component"
       >
         <div
+          aria-selected="false"
           class="optionReset css-1iwu591-option"
           id="react-select-32-option-0"
+          role="option"
           tabindex="-1"
         >
           <div
@@ -108,8 +111,10 @@ exports[`Dropdown renders correctly snapshot driver should open menu on click if
           </div>
         </div>
         <div
+          aria-selected="false"
           class="optionReset css-qj04r2-option"
           id="react-select-32-option-1"
+          role="option"
           tabindex="-1"
         >
           <div
@@ -120,8 +125,10 @@ exports[`Dropdown renders correctly snapshot driver should open menu on click if
           </div>
         </div>
         <div
+          aria-selected="false"
           class="optionReset css-6ztf41-option"
           id="react-select-32-option-2"
+          role="option"
           tabindex="-1"
         >
           <div
@@ -132,8 +139,10 @@ exports[`Dropdown renders correctly snapshot driver should open menu on click if
           </div>
         </div>
         <div
+          aria-selected="false"
           class="optionReset css-6ztf41-option"
           id="react-select-32-option-3"
+          role="option"
           tabindex="-1"
         >
           <div
@@ -144,8 +153,10 @@ exports[`Dropdown renders correctly snapshot driver should open menu on click if
           </div>
         </div>
         <div
+          aria-selected="false"
           class="optionReset css-6ztf41-option"
           id="react-select-32-option-4"
+          role="option"
           tabindex="-1"
         >
           <div
@@ -156,8 +167,10 @@ exports[`Dropdown renders correctly snapshot driver should open menu on click if
           </div>
         </div>
         <div
+          aria-selected="false"
           class="optionReset css-6ztf41-option"
           id="react-select-32-option-5"
+          role="option"
           tabindex="-1"
         >
           <div
@@ -213,6 +226,7 @@ exports[`Dropdown renders correctly snapshot driver should open menu on focus if
             >
               <input
                 aria-autocomplete="list"
+                aria-controls="dropdown-menu-list-id"
                 aria-label="Dropdown input"
                 autocapitalize="none"
                 autocomplete="off"
@@ -291,6 +305,7 @@ exports[`Dropdown renders correctly snapshot driver should render correctly for
             >
               <input
                 aria-autocomplete="list"
+                aria-controls="dropdown-menu-list-id"
                 aria-label="Dropdown input"
                 autocapitalize="none"
                 autocomplete="off"
@@ -369,6 +384,7 @@ exports[`Dropdown renders correctly snapshot driver should render correctly for
             >
               <input
                 aria-autocomplete="list"
+                aria-controls="dropdown-menu-list-id"
                 aria-label="Dropdown input"
                 autocapitalize="none"
                 autocomplete="off"
@@ -447,6 +463,7 @@ exports[`Dropdown renders correctly snapshot driver should render correctly for
             >
               <input
                 aria-autocomplete="list"
+                aria-controls="dropdown-menu-list-id"
                 aria-label="Dropdown input"
                 autocapitalize="none"
                 autocomplete="off"
@@ -525,6 +542,7 @@ exports[`Dropdown renders correctly snapshot driver should render correctly for
             >
               <input
                 aria-autocomplete="list"
+                aria-controls="dropdown-menu-list-id"
                 aria-label="Dropdown input"
                 autocapitalize="none"
                 autocomplete="off"
@@ -603,6 +621,7 @@ exports[`Dropdown renders correctly snapshot driver should render correctly for
             >
               <input
                 aria-autocomplete="list"
+                aria-controls="dropdown-menu-list-id"
                 aria-label="Dropdown input"
                 autocapitalize="none"
                 autocomplete="off"
@@ -681,6 +700,7 @@ exports[`Dropdown renders correctly snapshot driver should render correctly with
             >
               <input
                 aria-autocomplete="list"
+                aria-controls="dropdown-menu-list-id"
                 aria-label="Dropdown input"
                 autocapitalize="none"
                 autocomplete="off"
@@ -774,6 +794,7 @@ exports[`Dropdown renders correctly snapshot driver should use async if set 1`]
             >
               <input
                 aria-autocomplete="list"
+                aria-controls="dropdown-menu-list-id"
                 aria-label="Dropdown input"
                 autocapitalize="none"
                 autocomplete="off"
@@ -881,6 +902,7 @@ exports[`Dropdown renders correctly snapshot driver should use virtualization if
             >
               <input
                 aria-autocomplete="list"
+                aria-controls="dropdown-menu-list-id"
                 aria-label="Dropdown input"
                 autocapitalize="none"
                 autocomplete="off"
@@ -945,8 +967,10 @@ exports[`Dropdown renders correctly snapshot driver should use virtualization if
           >
             <div>
               <div
+                aria-selected="false"
                 class="optionReset css-1iwu591-option"
                 id="react-select-29-option-0"
+                role="option"
                 tabindex="-1"
               >
                 <div
@@ -963,8 +987,10 @@ exports[`Dropdown renders correctly snapshot driver should use virtualization if
           >
             <div>
               <div
+                aria-selected="false"
                 class="optionReset css-6ztf41-option"
                 id="react-select-29-option-1"
+                role="option"
                 tabindex="-1"
               >
                 <div
@@ -981,8 +1007,10 @@ exports[`Dropdown renders correctly snapshot driver should use virtualization if
           >
             <div>
               <div
+                aria-selected="false"
                 class="optionReset css-6ztf41-option"
                 id="react-select-29-option-2"
+                role="option"
                 tabindex="-1"
               >
                 <div
@@ -999,8 +1027,10 @@ exports[`Dropdown renders correctly snapshot driver should use virtualization if
           >
             <div>
               <div
+                aria-selected="false"
                 class="optionReset css-6ztf41-option"
                 id="react-select-29-option-3"
+                role="option"
                 tabindex="-1"
               >
                 <div
@@ -1017,8 +1047,10 @@ exports[`Dropdown renders correctly snapshot driver should use virtualization if
           >
             <div>
               <div
+                aria-selected="false"
                 class="optionReset css-6ztf41-option"
                 id="react-select-29-option-4"
+                role="option"
                 tabindex="-1"
               >
                 <div
@@ -1035,8 +1067,10 @@ exports[`Dropdown renders correctly snapshot driver should use virtualization if
           >
             <div>
               <div
+                aria-selected="false"
                 class="optionReset css-6ztf41-option"
                 id="react-select-29-option-5"
+                role="option"
                 tabindex="-1"
               >
                 <div
@@ -1053,8 +1087,10 @@ exports[`Dropdown renders correctly snapshot driver should use virtualization if
           >
             <div>
               <div
+                aria-selected="false"
                 class="optionReset css-6ztf41-option"
                 id="react-select-29-option-6"
+                role="option"
                 tabindex="-1"
               >
                 <div
@@ -1071,8 +1107,10 @@ exports[`Dropdown renders correctly snapshot driver should use virtualization if
           >
             <div>
               <div
+                aria-selected="false"
                 class="optionReset css-6ztf41-option"
                 id="react-select-29-option-7"
+                role="option"
                 tabindex="-1"
               >
                 <div
@@ -1089,8 +1127,10 @@ exports[`Dropdown renders correctly snapshot driver should use virtualization if
           >
             <div>
               <div
+                aria-selected="false"
                 class="optionReset css-6ztf41-option"
                 id="react-select-29-option-8"
+                role="option"
                 tabindex="-1"
               >
                 <div
@@ -1107,8 +1147,10 @@ exports[`Dropdown renders correctly snapshot driver should use virtualization if
           >
             <div>
               <div
+                aria-selected="false"
                 class="optionReset css-6ztf41-option"
                 id="react-select-29-option-9"
+                role="option"
                 tabindex="-1"
               >
                 <div
@@ -1125,8 +1167,10 @@ exports[`Dropdown renders correctly snapshot driver should use virtualization if
           >
             <div>
               <div
+                aria-selected="false"
                 class="optionReset css-6ztf41-option"
                 id="react-select-29-option-10"
+                role="option"
                 tabindex="-1"
               >
                 <div
@@ -1178,6 +1222,7 @@ exports[`Dropdown renders correctly when disabled 1`] = `
           >
             <input
               aria-autocomplete="list"
+              aria-controls="dropdown-menu-list-id"
               aria-label="Dropdown input"
               autoCapitalize="none"
               autoComplete="off"
@@ -1366,6 +1411,7 @@ exports[`Dropdown renders correctly when rtl 1`] = `
           >
             <input
               aria-autocomplete="list"
+              aria-controls="dropdown-menu-list-id"
               aria-label="Dropdown input"
               autoCapitalize="none"
               autoComplete="off"
@@ -1483,6 +1529,7 @@ exports[`Dropdown renders correctly with autoFocus 1`] = `
           >
             <input
               aria-autocomplete="list"
+              aria-controls="dropdown-menu-list-id"
               aria-label="Dropdown input"
               autoCapitalize="none"
               autoComplete="off"
@@ -1785,6 +1832,7 @@ exports[`Dropdown renders correctly with chip colors 1`] = `
                 >
                   <input
                     aria-autocomplete="list"
+                    aria-controls="dropdown-menu-list-id"
                     aria-label="Dropdown input"
                     autoCapitalize="none"
                     autoComplete="off"
@@ -1932,6 +1980,7 @@ exports[`Dropdown renders correctly with className 1`] = `
           >
             <input
               aria-autocomplete="list"
+              aria-controls="dropdown-menu-list-id"
               aria-label="Dropdown input"
               autoCapitalize="none"
               autoComplete="off"
@@ -2055,6 +2104,7 @@ exports[`Dropdown renders correctly with defaultValue 1`] = `
           >
             <input
               aria-autocomplete="list"
+              aria-controls="dropdown-menu-list-id"
               aria-label="Dropdown input"
               autoCapitalize="none"
               autoComplete="off"
@@ -2198,6 +2248,7 @@ exports[`Dropdown renders correctly with empty props 1`] = `
           >
             <input
               aria-autocomplete="list"
+              aria-controls="dropdown-menu-list-id"
               aria-label="Dropdown input"
               autoCapitalize="none"
               autoComplete="off"
@@ -2315,6 +2366,7 @@ exports[`Dropdown renders correctly with id 1`] = `
           >
             <input
               aria-autocomplete="list"
+              aria-controls="dropdown-menu-list-id"
               aria-label="Dropdown input"
               autoCapitalize="none"
               autoComplete="off"
@@ -2520,6 +2572,7 @@ exports[`Dropdown renders correctly with leftAvatar 1`] = `
                 >
                   <input
                     aria-autocomplete="list"
+                    aria-controls="dropdown-menu-list-id"
                     aria-label="Dropdown input"
                     autoCapitalize="none"
                     autoComplete="off"
@@ -2749,6 +2802,7 @@ exports[`Dropdown renders correctly with leftIcon 1`] = `
                 >
                   <input
                     aria-autocomplete="list"
+                    aria-controls="dropdown-menu-list-id"
                     aria-label="Dropdown input"
                     autoCapitalize="none"
                     autoComplete="off"
@@ -2910,6 +2964,7 @@ exports[`Dropdown renders correctly with multi 1`] = `
                 >
                   <input
                     aria-autocomplete="list"
+                    aria-controls="dropdown-menu-list-id"
                     aria-label="Dropdown input"
                     autoCapitalize="none"
                     autoComplete="off"
@@ -3076,6 +3131,7 @@ exports[`Dropdown renders correctly with multi and disabled 1`] = `
                 >
                   <input
                     aria-autocomplete="list"
+                    aria-controls="dropdown-menu-list-id"
                     aria-label="Dropdown input"
                     autoCapitalize="none"
                     autoComplete="off"
@@ -3317,6 +3373,7 @@ exports[`Dropdown renders correctly with multiline 1`] = `
           >
             <input
               aria-autocomplete="list"
+              aria-controls="dropdown-menu-list-id"
               aria-label="Dropdown input"
               autoCapitalize="none"
               autoComplete="off"
@@ -3434,6 +3491,7 @@ exports[`Dropdown renders correctly with options 1`] = `
           >
             <input
               aria-autocomplete="list"
+              aria-controls="dropdown-menu-list-id"
               aria-label="Dropdown input"
               autoCapitalize="none"
               autoComplete="off"
@@ -3551,6 +3609,7 @@ exports[`Dropdown renders correctly with placeholder 1`] = `
           >
             <input
               aria-autocomplete="list"
+              aria-controls="dropdown-menu-list-id"
               aria-label="Dropdown input"
               autoCapitalize="none"
               autoComplete="off"
@@ -3668,6 +3727,7 @@ exports[`Dropdown renders correctly with tabIndex 1`] = `
           >
             <input
               aria-autocomplete="list"
+              aria-controls="dropdown-menu-list-id"
               aria-label="Dropdown input"
               autoCapitalize="none"
               autoComplete="off"
@@ -3794,6 +3854,7 @@ exports[`Dropdown renders correctly with tooltipContent 1`] = `
           >
             <input
               aria-autocomplete="list"
+              aria-controls="dropdown-menu-list-id"
               aria-label="Dropdown input"
               autoCapitalize="none"
               autoComplete="off"
@@ -3917,6 +3978,7 @@ exports[`Dropdown renders correctly with value 1`] = `
           >
             <input
               aria-autocomplete="list"
+              aria-controls="dropdown-menu-list-id"
               aria-label="Dropdown input"
               autoCapitalize="none"
               autoComplete="off"
@@ -4060,6 +4122,7 @@ exports[`Dropdown renders correctly without clear button 1`] = `
           >
             <input
               aria-autocomplete="list"
+              aria-controls="dropdown-menu-list-id"
               aria-label="Dropdown input"
               autoCapitalize="none"
               autoComplete="off"
diff --git a/packages/core/src/components/Dropdown/components/menu/menu.jsx b/packages/core/src/components/Dropdown/components/menu/menu.jsx
index ccf4c1f9e8..72b68f9b21 100644
--- a/packages/core/src/components/Dropdown/components/menu/menu.jsx
+++ b/packages/core/src/components/Dropdown/components/menu/menu.jsx
@@ -3,8 +3,19 @@ import React from "react";
 import { components } from "react-select";
 import styles from "./menu.module.scss";
 
-const Menu = ({ children, Renderer, selectProps, dropdownMenuWrapperClassName, ...props }) => {
-  const rendererProps = { children, selectProps, ...props };
+const Menu = ({ children, Renderer, selectProps, dropdownMenuWrapperClassName, id, ariaLabel, ...props }) => {
+  const rendererProps = {
+    children,
+    selectProps,
+    ...props,
+    innerProps: {
+      ...props.innerProps,
+      id,
+      role: "listbox",
+      "aria-label": ariaLabel
+    }
+  };
+
   const withFixedPosition =
     selectProps?.selectProps?.insideOverflowContainer || selectProps?.selectProps?.insideOverflowWithTransformContainer;
 
diff --git a/packages/core/src/components/Dropdown/components/option/option.jsx b/packages/core/src/components/Dropdown/components/option/option.jsx
index 54dd72d7a9..a2df696094 100644
--- a/packages/core/src/components/Dropdown/components/option/option.jsx
+++ b/packages/core/src/components/Dropdown/components/option/option.jsx
@@ -7,7 +7,17 @@ import styles from "./option.module.scss";
 
 const Option = ({ Renderer, data, children, optionWrapperClassName, ...props }) => {
   const tooltipProps = data?.tooltipProps || {};
-  const rendererProps = { children, data, ...props };
+  const rendererProps = {
+    children,
+    data,
+    ...props,
+    innerProps: {
+      ...props.innerProps,
+      role: "option",
+      "aria-selected": props.isSelected
+    }
+  };
+
   return (
     <Tooltip {...tooltipProps} position={Tooltip.positions.RIGHT}>
       {Renderer ? (
diff --git a/packages/core/src/components/Search/__tests__/__snapshots__/search-snapshot-tests.jest.js.snap b/packages/core/src/components/Search/__tests__/__snapshots__/search-snapshot-tests.jest.js.snap
index 60d8af4b87..4a7785b4dc 100644
--- a/packages/core/src/components/Search/__tests__/__snapshots__/search-snapshot-tests.jest.js.snap
+++ b/packages/core/src/components/Search/__tests__/__snapshots__/search-snapshot-tests.jest.js.snap
@@ -14,9 +14,10 @@ exports[`Search renders correctly when disabled 1`] = `
     >
       <input
         aria-activedescendant=""
-        aria-invalid={null}
+        aria-invalid={false}
         aria-label=""
         aria-owns=""
+        aria-required={false}
         autoComplete="off"
         className="search input inputHasIcon"
         data-testid="search_search"
@@ -114,9 +115,10 @@ exports[`Search renders correctly when underline 1`] = `
     >
       <input
         aria-activedescendant=""
-        aria-invalid={null}
+        aria-invalid={false}
         aria-label=""
         aria-owns=""
+        aria-required={false}
         autoComplete="off"
         className="search input inputHasIcon"
         data-testid="search_search"
@@ -214,9 +216,10 @@ exports[`Search renders correctly with className 1`] = `
     >
       <input
         aria-activedescendant=""
-        aria-invalid={null}
+        aria-invalid={false}
         aria-label=""
         aria-owns=""
+        aria-required={false}
         autoComplete="off"
         className="testClassName search input inputHasIcon"
         data-testid="search_search"
@@ -314,9 +317,10 @@ exports[`Search renders correctly with icon 1`] = `
     >
       <input
         aria-activedescendant=""
-        aria-invalid={null}
+        aria-invalid={false}
         aria-label=""
         aria-owns=""
+        aria-required={false}
         autoComplete="off"
         className="search input inputHasIcon"
         data-testid="search_search"
@@ -404,9 +408,10 @@ exports[`Search renders correctly with id 1`] = `
     >
       <input
         aria-activedescendant=""
-        aria-invalid={null}
+        aria-invalid={false}
         aria-label=""
         aria-owns=""
+        aria-required={false}
         autoComplete="off"
         className="search input inputHasIcon"
         data-testid="search_testId"
@@ -504,9 +509,10 @@ exports[`Search renders correctly with loading 1`] = `
     >
       <input
         aria-activedescendant=""
-        aria-invalid={null}
+        aria-invalid={false}
         aria-label=""
         aria-owns=""
+        aria-required={false}
         autoComplete="off"
         className="search input inputHasIcon"
         data-testid="search_search"
@@ -633,9 +639,10 @@ exports[`Search renders correctly with placeholder 1`] = `
     >
       <input
         aria-activedescendant=""
-        aria-invalid={null}
+        aria-invalid={false}
         aria-label="placeholder"
         aria-owns=""
+        aria-required={false}
         autoComplete="off"
         className="search input inputHasIcon"
         data-testid="search_search"
@@ -733,9 +740,10 @@ exports[`Search renders correctly with secondaryIconName 1`] = `
     >
       <input
         aria-activedescendant=""
-        aria-invalid={null}
+        aria-invalid={false}
         aria-label=""
         aria-owns=""
+        aria-required={false}
         autoComplete="off"
         className="search input inputHasIcon"
         data-testid="search_search"
@@ -823,9 +831,10 @@ exports[`Search renders correctly with underline type 1`] = `
     >
       <input
         aria-activedescendant=""
-        aria-invalid={null}
+        aria-invalid={false}
         aria-label=""
         aria-owns=""
+        aria-required={false}
         autoComplete="off"
         className="search input inputHasIcon"
         data-testid="search_search"
@@ -926,6 +935,7 @@ exports[`Search renders correctly with validation 1`] = `
         aria-invalid={true}
         aria-label=""
         aria-owns=""
+        aria-required={false}
         autoComplete="off"
         className="search input inputHasIcon"
         data-testid="search_search"
@@ -1023,9 +1033,10 @@ exports[`Search renders correctly with value 1`] = `
     >
       <input
         aria-activedescendant=""
-        aria-invalid={null}
+        aria-invalid={false}
         aria-label=""
         aria-owns=""
+        aria-required={false}
         autoComplete="off"
         className="search input inputHasIcon"
         data-testid="search_search"
@@ -1123,9 +1134,10 @@ exports[`Search renders correctly with wrapperClassName 1`] = `
     >
       <input
         aria-activedescendant=""
-        aria-invalid={null}
+        aria-invalid={false}
         aria-label=""
         aria-owns=""
+        aria-required={false}
         autoComplete="off"
         className="search input inputHasIcon"
         data-testid="search_search"
@@ -1223,9 +1235,10 @@ exports[`Search renders correctly without props 1`] = `
     >
       <input
         aria-activedescendant=""
-        aria-invalid={null}
+        aria-invalid={false}
         aria-label=""
         aria-owns=""
+        aria-required={false}
         autoComplete="off"
         className="search input inputHasIcon"
         data-testid="search_search"
diff --git a/packages/core/src/components/TextField/TextField.tsx b/packages/core/src/components/TextField/TextField.tsx
index 518d7d4ed2..e553463d20 100644
--- a/packages/core/src/components/TextField/TextField.tsx
+++ b/packages/core/src/components/TextField/TextField.tsx
@@ -1,5 +1,5 @@
 import cx from "classnames";
-import React, { forwardRef, useCallback, useEffect, useMemo, useRef } from "react";
+import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import useDebounceEvent from "../../hooks/useDebounceEvent";
 import Icon from "../Icon/Icon";
 import { backwardCompatibilityForProperties } from "../../helpers/backwardCompatibilityForProperties";
@@ -70,6 +70,7 @@ export interface TextFieldProps extends VibeComponentProps {
   role?: string;
   /** adds required to the input element */
   required?: boolean;
+  requiredErrorText?: string;
   /** shows loading animation */
   loading?: boolean;
   /**
@@ -128,6 +129,7 @@ const TextField: VibeComponent<TextFieldProps, unknown> & {
       trim = false,
       role = "",
       required = false,
+      requiredErrorText = "",
       loading = false,
       requiredAsterisk = false,
       dataTestId: backwardCompatibilityDataTestId,
@@ -140,6 +142,8 @@ const TextField: VibeComponent<TextFieldProps, unknown> & {
     },
     ref
   ) => {
+    const [isRequiredAndEmpty, setIsRequiredAndEmpty] = useState(false);
+
     const overrideDataTestId = backwardCompatibilityForProperties(
       [dataTestId, backwardCompatibilityDataTestId],
       getTestId(ComponentDefaultTestId.TEXT_FIELD, id)
@@ -147,11 +151,24 @@ const TextField: VibeComponent<TextFieldProps, unknown> & {
     const inputRef = useRef(null);
     const mergedRef = useMergeRef(ref, inputRef, setRef);
 
+    const onBlurCallback = useCallback(
+      (e: React.FocusEvent<HTMLInputElement>) => {
+        if (required && !e.target.value) {
+          setIsRequiredAndEmpty(true);
+        }
+        onBlur(e);
+      },
+      [onBlur, required]
+    );
+
     const onChangeCallback = useCallback(
       (value: string) => {
+        if (isRequiredAndEmpty && value) {
+          setIsRequiredAndEmpty(false);
+        }
         onChange(value, { target: inputRef.current });
       },
-      [onChange]
+      [onChange, isRequiredAndEmpty]
     );
 
     const { inputValue, onEventChanged, clearValue } = useDebounceEvent({
@@ -185,14 +202,15 @@ const TextField: VibeComponent<TextFieldProps, unknown> & {
     }, [inputRef, disabled, clearOnIconClick, onIconClick, currentStateIconName, clearValue]);
 
     const validationClass = useMemo(() => {
-      if (!validation || !validation.status) {
+      if ((!validation || !validation.status) && !isRequiredAndEmpty) {
         return "";
       }
-      return FEEDBACK_CLASSES[validation.status];
-    }, [validation]);
+      const status = isRequiredAndEmpty ? "error" : validation.status;
+      return FEEDBACK_CLASSES[status];
+    }, [validation, isRequiredAndEmpty]);
 
     const hasIcon = iconName || secondaryIconName;
-    const shouldShowExtraText = showCharCount || (validation && validation.text);
+    const shouldShowExtraText = showCharCount || (validation && validation.text) || isRequiredAndEmpty;
     const isSecondary = secondaryIconName === currentStateIconName;
     const isPrimary = iconName === currentStateIconName;
     const shouldFocusOnSecondaryIcon = secondaryIconName && isSecondary && !!inputValue;
@@ -246,16 +264,17 @@ const TextField: VibeComponent<TextFieldProps, unknown> & {
               id={id}
               data-testid={overrideDataTestId}
               name={name}
-              onBlur={onBlur}
+              onBlur={onBlurCallback}
               onFocus={onFocus}
               onKeyDown={onKeyDown}
               onWheel={onWheel}
               maxLength={maxLength}
               role={searchResultsContainerId && "combobox"} // For voice reader
               aria-label={inputAriaLabel || placeholder}
-              aria-invalid={validation && validation.status === "error"}
+              aria-invalid={(validation && validation.status === "error") || isRequiredAndEmpty}
               aria-owns={searchResultsContainerId}
               aria-activedescendant={activeDescendant}
+              aria-required={required}
               required={required}
               tabIndex={tabIndex}
             />
@@ -313,7 +332,9 @@ const TextField: VibeComponent<TextFieldProps, unknown> & {
           {shouldShowExtraText && (
             <Text type={Text.types.TEXT2} color={Text.colors.SECONDARY} className={cx(styles.subTextContainer)}>
               {validation && validation.text && (
-                <span className={cx(styles.subTextContainerStatus)}>{validation.text}</span>
+                <span className={cx(styles.subTextContainerStatus)}>
+                  {isRequiredAndEmpty ? requiredErrorText : validation.text}
+                </span>
               )}
               {showCharCount && (
                 <span className={cx(styles.counter)} aria-label={TextFieldAriaLabel.CHAR}>
diff --git a/packages/core/src/components/TextField/__tests__/__snapshots__/textField-snapshot-tests.jest.js.snap b/packages/core/src/components/TextField/__tests__/__snapshots__/textField-snapshot-tests.jest.js.snap
index e9ba5b8ffc..1f064fb67b 100644
--- a/packages/core/src/components/TextField/__tests__/__snapshots__/textField-snapshot-tests.jest.js.snap
+++ b/packages/core/src/components/TextField/__tests__/__snapshots__/textField-snapshot-tests.jest.js.snap
@@ -14,9 +14,10 @@ exports[`TextField renders correctly when disabled 1`] = `
     >
       <input
         aria-activedescendant=""
-        aria-invalid={null}
+        aria-invalid={false}
         aria-label=""
         aria-owns=""
+        aria-required={false}
         autoComplete="off"
         className="input"
         data-testid="text-field_input"
@@ -76,9 +77,10 @@ exports[`TextField renders correctly when loading 1`] = `
     >
       <input
         aria-activedescendant=""
-        aria-invalid={null}
+        aria-invalid={false}
         aria-label=""
         aria-owns=""
+        aria-required={false}
         autoComplete="off"
         className="input"
         data-testid="text-field_input"
@@ -167,9 +169,10 @@ exports[`TextField renders correctly when readonly 1`] = `
     >
       <input
         aria-activedescendant=""
-        aria-invalid={null}
+        aria-invalid={false}
         aria-label=""
         aria-owns=""
+        aria-required={false}
         autoComplete="off"
         className="input readOnly"
         data-testid="text-field_input"
@@ -229,9 +232,10 @@ exports[`TextField renders correctly when required 1`] = `
     >
       <input
         aria-activedescendant=""
-        aria-invalid={null}
+        aria-invalid={false}
         aria-label=""
         aria-owns=""
+        aria-required={true}
         autoComplete="off"
         className="input"
         data-testid="text-field_input"
@@ -291,9 +295,10 @@ exports[`TextField renders correctly with another type 1`] = `
     >
       <input
         aria-activedescendant=""
-        aria-invalid={null}
+        aria-invalid={false}
         aria-label=""
         aria-owns=""
+        aria-required={false}
         autoComplete="off"
         className="input"
         data-testid="text-field_input"
@@ -353,9 +358,10 @@ exports[`TextField renders correctly with className 1`] = `
     >
       <input
         aria-activedescendant=""
-        aria-invalid={null}
+        aria-invalid={false}
         aria-label=""
         aria-owns=""
+        aria-required={false}
         autoComplete="off"
         className="testClassName input"
         data-testid="text-field_input"
@@ -415,9 +421,10 @@ exports[`TextField renders correctly with className 2`] = `
     >
       <input
         aria-activedescendant=""
-        aria-invalid={null}
+        aria-invalid={false}
         aria-label=""
         aria-owns=""
+        aria-required={false}
         autoComplete="off"
         className="testClassName input"
         data-testid="text-field_input"
@@ -477,9 +484,10 @@ exports[`TextField renders correctly with date type 1`] = `
     >
       <input
         aria-activedescendant=""
-        aria-invalid={null}
+        aria-invalid={false}
         aria-label=""
         aria-owns=""
+        aria-required={false}
         autoComplete="off"
         className="input"
         data-testid="text-field_input"
@@ -539,9 +547,10 @@ exports[`TextField renders correctly with date-time type 1`] = `
     >
       <input
         aria-activedescendant=""
-        aria-invalid={null}
+        aria-invalid={false}
         aria-label=""
         aria-owns=""
+        aria-required={false}
         autoComplete="off"
         className="input"
         data-testid="text-field_input"
@@ -601,9 +610,10 @@ exports[`TextField renders correctly with email type 1`] = `
     >
       <input
         aria-activedescendant=""
-        aria-invalid={null}
+        aria-invalid={false}
         aria-label=""
         aria-owns=""
+        aria-required={false}
         autoComplete="off"
         className="input"
         data-testid="text-field_input"
@@ -663,9 +673,10 @@ exports[`TextField renders correctly with icon 1`] = `
     >
       <input
         aria-activedescendant=""
-        aria-invalid={null}
+        aria-invalid={false}
         aria-label=""
         aria-owns=""
+        aria-required={false}
         autoComplete="off"
         className="input inputHasIcon"
         data-testid="text-field_input"
@@ -734,9 +745,10 @@ exports[`TextField renders correctly with iconsNames 1`] = `
     >
       <input
         aria-activedescendant=""
-        aria-invalid={null}
+        aria-invalid={false}
         aria-label=""
         aria-owns=""
+        aria-required={false}
         autoComplete="off"
         className="input"
         data-testid="text-field_input"
@@ -796,9 +808,10 @@ exports[`TextField renders correctly with id 1`] = `
     >
       <input
         aria-activedescendant=""
-        aria-invalid={null}
+        aria-invalid={false}
         aria-label=""
         aria-owns=""
+        aria-required={false}
         autoComplete="off"
         className="input"
         data-testid="text-field_testId"
@@ -858,9 +871,10 @@ exports[`TextField renders correctly with labelIconName 1`] = `
     >
       <input
         aria-activedescendant=""
-        aria-invalid={null}
+        aria-invalid={false}
         aria-label=""
         aria-owns=""
+        aria-required={false}
         autoComplete="off"
         className="input"
         data-testid="text-field_input"
@@ -920,9 +934,10 @@ exports[`TextField renders correctly with large size 1`] = `
     >
       <input
         aria-activedescendant=""
-        aria-invalid={null}
+        aria-invalid={false}
         aria-label=""
         aria-owns=""
+        aria-required={false}
         autoComplete="off"
         className="input"
         data-testid="text-field_input"
@@ -982,9 +997,10 @@ exports[`TextField renders correctly with placeholder 1`] = `
     >
       <input
         aria-activedescendant=""
-        aria-invalid={null}
+        aria-invalid={false}
         aria-label="placeholder"
         aria-owns=""
+        aria-required={false}
         autoComplete="off"
         className="input"
         data-testid="text-field_input"
@@ -1044,9 +1060,10 @@ exports[`TextField renders correctly with role 1`] = `
     >
       <input
         aria-activedescendant=""
-        aria-invalid={null}
+        aria-invalid={false}
         aria-label=""
         aria-owns=""
+        aria-required={false}
         autoComplete="off"
         className="input"
         data-testid="text-field_input"
@@ -1106,9 +1123,10 @@ exports[`TextField renders correctly with secondaryIconName 1`] = `
     >
       <input
         aria-activedescendant=""
-        aria-invalid={null}
+        aria-invalid={false}
         aria-label=""
         aria-owns=""
+        aria-required={false}
         autoComplete="off"
         className="input inputHasIcon"
         data-testid="text-field_input"
@@ -1177,9 +1195,10 @@ exports[`TextField renders correctly with showCharCount 1`] = `
     >
       <input
         aria-activedescendant=""
-        aria-invalid={null}
+        aria-invalid={false}
         aria-label=""
         aria-owns=""
+        aria-required={false}
         autoComplete="off"
         className="input"
         data-testid="text-field_input"
@@ -1250,9 +1269,10 @@ exports[`TextField renders correctly with tel type 1`] = `
     >
       <input
         aria-activedescendant=""
-        aria-invalid={null}
+        aria-invalid={false}
         aria-label=""
         aria-owns=""
+        aria-required={false}
         autoComplete="off"
         className="input"
         data-testid="text-field_input"
@@ -1312,9 +1332,10 @@ exports[`TextField renders correctly with url type 1`] = `
     >
       <input
         aria-activedescendant=""
-        aria-invalid={null}
+        aria-invalid={false}
         aria-label=""
         aria-owns=""
+        aria-required={false}
         autoComplete="off"
         className="input"
         data-testid="text-field_input"
@@ -1377,6 +1398,7 @@ exports[`TextField renders correctly with validation 1`] = `
         aria-invalid={true}
         aria-label=""
         aria-owns=""
+        aria-required={false}
         autoComplete="off"
         className="input"
         data-testid="text-field_input"
@@ -1446,9 +1468,10 @@ exports[`TextField renders correctly with value 1`] = `
     >
       <input
         aria-activedescendant=""
-        aria-invalid={null}
+        aria-invalid={false}
         aria-label=""
         aria-owns=""
+        aria-required={false}
         autoComplete="off"
         className="input"
         data-testid="text-field_input"
@@ -1508,9 +1531,10 @@ exports[`TextField renders correctly with wrapperClassName 1`] = `
     >
       <input
         aria-activedescendant=""
-        aria-invalid={null}
+        aria-invalid={false}
         aria-label=""
         aria-owns=""
+        aria-required={false}
         autoComplete="off"
         className="input"
         data-testid="text-field_input"