@kaizen/components 1.37.1 → 1.38.0

package/src/RichTextEditor/RichTextEditor/RichTextEditor.spec.tsx

@@ -44,6 +44,54 @@ const TestRTE = (
   )
 }
 
+describe("accessible name and description", () => {
+  it("has the correct accessible name", () => {
+    render(<TestRTE labelText="Some label" />)
+    expect(
+      screen.getByRole("textbox", { name: "Some label" })
+    ).toBeInTheDocument()
+  })
+
+  it("has the correct name and description when added with aria-labelledby and aria-describedby", () => {
+    render(
+      <>
+        <div id="external-label">External label</div>
+        <div id="external-description">External description</div>
+        <TestRTE
+          aria-labelledby="external-label"
+          aria-describedby="external-description"
+        />
+      </>
+    )
+    expect(
+      screen.getByRole("textbox", {
+        name: "External label",
+        description: "External description",
+      })
+    ).toBeInTheDocument()
+  })
+
+  it("has the correct description with a description passed in, validation error, and aria-describedby", () => {
+    render(
+      <>
+        <div id="external-description">External description</div>
+        <TestRTE
+          labelText="Some label"
+          description="Some help text"
+          validationMessage="Some error"
+          aria-describedby="external-description"
+        />
+      </>
+    )
+    expect(
+      screen.getByRole("textbox", {
+        name: "Some label",
+        description: "Some error Some help text External description",
+      })
+    ).toBeInTheDocument()
+  })
+})
+
 describe("RTE receives list controls", () => {
   it("renders list buttons when receiving a list controls", () => {
     render(<TestRTE />)

package/src/RichTextEditor/RichTextEditor/RichTextEditor.tsx

@@ -91,6 +91,16 @@ export const RichTextEditor = ({
   )
   const [labelId] = useState<string>(labelledBy || reactId)
   const [editorId] = useState<string>(reactId)
+  const validationMessageAria = validationMessage
+    ? `${editorId}-rte-validation-message`
+    : ""
+  const descriptionAria = description ? `${editorId}-rte-description` : ""
+
+  const ariaDescribedBy = classnames(
+    validationMessageAria,
+    descriptionAria,
+    describedBy
+  )
 
   const useRichTextEditorResult = (():
     | ReturnType<typeof useRichTextEditor>
@@ -108,7 +118,11 @@ export const RichTextEditor = ({
           schema,
           plugins: getPlugins(controls, schema),
         }),
-        { "aria-labelledby": labelId, role: "textbox" }
+        {
+          "aria-labelledby": labelId,
+          role: "textbox",
+          "aria-describedby": ariaDescribedBy,
+        }
       )
     } catch {
       return new Error("Bad data error")
@@ -140,17 +154,6 @@ export const RichTextEditor = ({
     // Including `onContentChange` in the dependencies here will cause a 'Maximum update depth exceeded' issue
   }, [editorState])
 
-  const validationMessageAria = validationMessage
-    ? `${editorId}-rte-validation-message`
-    : ""
-  const descriptionAria = description ? `${editorId}-rte-description` : ""
-
-  const ariaDescribedBy = classnames(
-    validationMessageAria,
-    descriptionAria,
-    describedBy
-  )
-
   return (
     <>
       {!labelledBy && labelText && <Label id={labelId} labelText={labelText} />}
@@ -189,7 +192,6 @@ export const RichTextEditor = ({
             classNameOverride,
             controls != null && controls.length > 0 && styles.hasToolbar
           )}
-          aria-describedby={ariaDescribedBy}
           {...restProps}
         />
       </div>

package/src/RichTextEditor/utils/plugins/LinkManager/components/LinkPopover/Positioner.tsx

@@ -3,15 +3,15 @@ import { createPortal } from "react-dom"
 import debounce from "lodash.debounce"
 import { SelectionPosition } from "../../types"
 
-export const Positioner = forwardRef(
-  (
-    { top, left, height, width }: SelectionPosition,
-    ref: React.Ref<HTMLElement>
-  ) => {
-    const [windowScroll, setWindowScroll] = useState<[number, number]>([
-      window.scrollX,
-      window.scrollY,
-    ])
+export const Positioner = forwardRef<HTMLElement, SelectionPosition>(
+  ({ top, left, height, width }, ref) => {
+    const [portalContainer, setPortalContainer] = useState<HTMLElement>()
+    const [windowScroll, setWindowScroll] = useState<[number, number]>()
+
+    useEffect(() => {
+      setWindowScroll([window.scrollX, window.scrollY])
+      setPortalContainer(document.body)
+    }, [])
 
     const onResize = useRef(
       debounce(() => setWindowScroll([window.scrollX, window.scrollY]), 15)
@@ -25,6 +25,8 @@ export const Positioner = forwardRef(
       }
     }, [setWindowScroll, onResize])
 
+    if (windowScroll === undefined || portalContainer === undefined) return null
+
     const [x, y] = windowScroll
 
     return createPortal(
@@ -39,7 +41,7 @@ export const Positioner = forwardRef(
           width: `${width}px`,
         }}
       />,
-      document.body
+      portalContainer
     )
   }
 )

package/src/Select/Select.module.scss

@@ -5,7 +5,7 @@
 
 // Should match the values for the Input component
 $input-height: 48px;
-$input-placeholder-opacity: 0.5;
+$input-placeholder-opacity: 0.7;
 
 $focus-border-color: $color-blue-500;
 

package/src/Select/Select.tsx

@@ -64,8 +64,8 @@ export const Select = React.forwardRef<any, SelectProps>(
       propsFullWidth != null
         ? propsFullWidth
         : variant === "secondary" || variant === "secondary-small"
-        ? false
-        : true
+          ? false
+          : true
 
     const classes = classnames(
       propsClassName,

package/src/Select/_docs/Select.stickersheet.stories.tsx

@@ -15,8 +15,8 @@ export default {
       config: {
         rules: [
           {
-            // Placeholders do not pass color contrast
-            id: "color-contrast",
+            // React-select's list structure missing when there are no options (third-party a11y issue)
+            id: "aria-required-children",
             enabled: false,
           },
         ],

package/src/Select/_docs/Select.stories.tsx

@@ -41,19 +41,6 @@ const meta = {
     options: OPTIONS,
     label: "Select",
   },
-  parameters: {
-    a11y: {
-      config: {
-        rules: [
-          {
-            // Placeholders do not pass color contrast
-            id: "color-contrast",
-            enabled: false,
-          },
-        ],
-      },
-    },
-  },
 } satisfies Meta<typeof Select>
 
 export default meta

package/src/Table/_docs/Table.stories.tsx

@@ -22,7 +22,7 @@ export type TableStoryProps = {
   container?: TableContainerProps
   row?: TableRowProps
   rowCell?: TableRowCellProps
-  headerRowCell: Omit<TableHeaderRowCellProps, "labelText">
+  headerRowCell: Partial<TableHeaderRowCellProps>
   card: TableCardProps
 }
 

package/src/TitleBlockZen/TitleBlockZen.spec.tsx

@@ -712,6 +712,8 @@ describe("<TitleBlockZen />", () => {
       ["live", "statusLive"],
       ["closed", "statusClosed"],
       ["scheduled", "statusClosed"],
+      ["sentimentPositive", "sentimentPositive"],
+      ["default", "default"],
     ])(
       "renders tag with correct text and variant when %s status",
       async (status, expectedClassName) => {
@@ -725,6 +727,7 @@ describe("<TitleBlockZen />", () => {
                 | "live"
                 | "scheduled"
                 | "closed"
+                | "sentimentPositive"
                 | "default",
             }}
           >

package/src/TitleBlockZen/TitleBlockZen.tsx

@@ -51,6 +51,10 @@ const renderTag = (surveyStatus: SurveyStatus): JSX.Element | void => {
     tagVariant = "statusClosed"
   }
 
+  if (surveyStatus.status === "sentimentPositive") {
+    tagVariant = "sentimentPositive"
+  }
+
   if (surveyStatus.status === "default") {
     tagVariant = "default"
   }

package/src/TitleBlockZen/types.ts

@@ -181,7 +181,13 @@ export type TextDirection = "ltr" | "rtl"
 
 export type SurveyStatus = {
   text: string
-  status: "draft" | "live" | "scheduled" | "closed" | "default"
+  status:
+    | "draft"
+    | "live"
+    | "scheduled"
+    | "closed"
+    | "sentimentPositive"
+    | "default"
 }
 
 export type TitleBlockBreadcrumbType = {

package/src/__future__/Select/Select.spec.tsx

@@ -315,13 +315,14 @@ describe("<Select />", () => {
       })
 
       it("selects the option when hits enter on a non-selected option", async () => {
-        const { getByRole } = render(<SelectWrapper defaultOpen />)
+        const { getByRole } = render(<SelectWrapper />)
 
         await user.tab()
+        await user.keyboard("{ArrowDown}")
         await waitFor(() => {
           expect(
             getByRole("option", { name: "Short black", selected: false })
-          ).toHaveFocus()
+          ).toBeVisible()
         })
         await user.keyboard("{Enter}")
 
@@ -335,22 +336,19 @@ describe("<Select />", () => {
 
       it("fires onSelectionChange when hits enter on a option", async () => {
         const spy = jest.fn()
-        const { getByRole } = render(
-          <SelectWrapper onSelectionChange={spy} defaultOpen />
-        )
-        const trigger = getByRole("combobox", { name: "Mock Label" })
+        const { getByRole } = render(<SelectWrapper onSelectionChange={spy} />)
 
         await user.tab()
+        await user.keyboard("{ArrowDown}")
         await waitFor(() => {
           expect(
             getByRole("option", { name: "Short black", selected: false })
-          ).toHaveFocus()
+          ).toBeVisible()
         })
 
         await user.keyboard("{Enter}")
         await waitFor(() => {
           expect(spy).toHaveBeenCalledTimes(1)
-          expect(trigger).toHaveAccessibleName("Mock Label")
         })
       })
     })

package/src/index.ts

@@ -33,6 +33,7 @@ export * from "./LikertScaleLegacy"
 export * from "./Loading"
 export * from "./Menu"
 export * from "./Modal"
+export * from "./MultiSelect"
 export * from "./Notification"
 export * from "./Pagination"
 export * from "./Popover"