chore: address next round of comments and minor changes spotted

playwright/components/step-flow/index.ts

@@ -1,6 +1,5 @@
 import { Page } from "playwright-core";
 import {
-  STEP_FLOW_COMPONENT,
   STEP_FLOW_PROGRESS_INDICATOR,
   STEP_FLOW_CATEGORY_TEXT,
   STEP_FLOW_TITLE_TEXT_WRAPPER,
@@ -12,9 +11,6 @@ import {
 } from "./locators";
 
 // component preview locators
-export const stepFlowComponent = (page: Page) =>
-  page.locator(STEP_FLOW_COMPONENT);
-
 export const stepFlowProgressIndicator = (page: Page) =>
   page.locator(STEP_FLOW_PROGRESS_INDICATOR);
 

playwright/components/step-flow/locators.ts

@@ -1,4 +1,3 @@
-export const STEP_FLOW_COMPONENT = '[data-component="step-flow"]';
 export const STEP_FLOW_PROGRESS_INDICATOR =
   '[data-element="progress-indicator"]';
 export const STEP_FLOW_CATEGORY_TEXT = '[data-element="category-text"]';

src/components/step-flow/step-flow.pw.tsx

@@ -28,7 +28,7 @@ import { CHARACTERS } from "../../../playwright/support/constants";
 
 const testData = [CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS];
 
-test.describe("Prop checks for Portrait component", () => {
+test.describe("Prop checks for StepFlow component", () => {
   testData.forEach((stringVals) => {
     test(`should render with the category prop, when the prop's value is ${stringVals}`, async ({
       mount,
@@ -207,6 +207,7 @@ test.describe("Event checks for StepFlow component", () => {
       />
     );
     await stepFlowDismissIcon(page).click();
+
     expect(callbackCount).toBe(1);
   });
 });
@@ -220,6 +221,7 @@ test.describe("Ref checks for StepFlow component", () => {
 
     await expect(stepFlowTitleTextWrapper(page)).not.toBeFocused();
     await button(page).nth(1).click();
+
     await expect(stepFlowTitleTextWrapper(page)).toBeFocused();
   });
 });
@@ -234,7 +236,7 @@ test.describe("Accessibility tests for StepFlow component", () => {
     await checkAccessibility(page);
   });
 
-  test("should pass accessibility checks when component is rendered with a ref", async ({
+  test("should pass accessibility checks when component is rendered with a ref and buttons", async ({
     mount,
     page,
   }) => {

src/components/step-flow/step-flow.spec.tsx

@@ -447,7 +447,6 @@ describe("Step Flow component", () => {
       const user = userEvent.setup();
       const { container } = render(<MockComponent />);
       const button = screen.getByRole("button");
-      button.focus();
 
       await user.click(button);
 

src/components/step-flow/step-flow.stories.mdx

@@ -40,8 +40,8 @@ import StepFlow from "carbon-react/lib/components/step-flow";
 
 ## Examples
 
-A `ref` is **strongly** recommended to be used, to ensure focus is programmatically moved to a a title div when
-a user advances through each step. This ensures screen reader users are made aware of all information throughout the user journey. 
+To ensure focus is programmatically moved to the `title` of a given `StepFlow` when a user advances through each step,  
+pass a `ref` is  **strongly** recommended. This ensures screen reader users are made aware of all information throughout the user journey
 An example of how this can be achieved is provided in the **Example implementation** story.
 
 ### Default

src/components/typography/typography.component.tsx

@@ -77,7 +77,7 @@ export interface TypographyProps extends SpaceProps, TagProps {
   /** Set whether it will be visually hidden
    * NOTE: This is for screen readers only and will make a lot of the other props redundant */
   screenReaderOnly?: boolean;
-  /** @private @ignore Identifier used for testing purposes, applied to the root element of the component. */
+  /** @private @ignore */
   "aria-hidden"?: "true" | "false";
 }
 

src/locales/pl-pl.ts

@@ -214,7 +214,9 @@ const plPL: Locale = {
     stepLabel: (currentStep, totalSteps) =>
       `Krok ${currentStep} z ${totalSteps}`,
     screenReaderOnlyTitle: (title, currentStep, totalSteps, category) =>
-      `${category}. ${title}. Krok ${currentStep} of ${totalSteps}.`,
+      `${
+        category ? `${category}.` : ""
+      }. ${title}. Krok ${currentStep} of ${totalSteps}.`,
     closeIconAriaLabel: () => "Zamknij",
   },
   switch: {