Merge branch 'develop' into feature/reactFlowEdgeNodeLevels-CMEM-7251

Author: andreas-schultz

CHANGELOG.md

@@ -30,6 +30,18 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
         - already set `id` values and connections are never overwritten
         - ID references created by the field item are removed again if their part is removed from the field item
         - `preventAriaAttribution` property: prevents this automatic connection of the field item parts
+- `<Modal />`
+    - `role`, `aria-label`, `aria-labelledby` and `aria-describedby` properties: they are set on the dialog element inside the modal overlay
+        - `role` is `dialog` by default, but it is removed again if neither a label nor a description is available; a console warning points this out when the modal is opened
+    - `aria-modal` is set together with the `role`, so it is left out as well if the `role` was removed
+        - it is `true` for the modal that was opened last according to the `ModalContext`, otherwise it is `false`
+        - if no `ModalContext` is provided, then the modals cannot know about each other, so each of them claims modality
+- `<SimpleDialog />`
+    - `role` and the aria attributes are set automatically now if they are not given
+    - `role` is `alertdialog` if an `intent` state is set that describes an alert (`success`, `warning`, `danger` or `info`), otherwise it is `dialog`
+        - for those alert intent states the content area gets an `id` and is referred by the dialog via `aria-describedby`
+    - explicitly given values are never overwritten
+    - if neither `title`, `aria-label` nor `aria-labelledby` is given for an alert, then the `intent` level is used as fallback for `aria-label`, so the alert dialog always has an accessible name
 - new `utils` methods:
     - `truncateMarkdownDisplay`: helper function to iterate over `Markdown` renderings to improve the experienced `cutOff` value
 - new icons:
@@ -44,6 +56,20 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     - the build of the ESM distribution needs a synchronous `import.meta.resolve`, which is only available since this version
 - `<FieldItem />`
     - the used `Label` element gets the `eccgui-fielditem__label` class now
+- `<AlertDialog />`
+    - always uses `role="alertdialog"` now
+    - the `role` property is not accepted anymore
+- `ModalContext`
+    - a change of the stack of open modals re-renders the consumers of the context now, this way modals can react on modals that are opened on top of them, e.g. to hand over `aria-modal`
+        - before only an internal reference was updated, which never triggered any re-render
+        - the component that provides the context via `useModalContext` is re-rendered on every change of the stack, but not if a change does not affect it, e.g. when a modal is closed that was never registered as open
+        - `openModalStack()` still returns the current stack synchronously, also directly after `setModalOpen()` was called
+- `<CodeEditor />`
+    - `enableTab` overrides the Tab behaviour derived from `mode` and `tabIntentStyle` now, if it is set
+        - `enableTab={false}` lets Tab always move the focus, even for modes with tab indentation
+        - if it is not set, Tab is still handled as indentation for modes with `tabIntentStyle="tab"`
+- `<AutoSuggestion />`
+    - Tab is only handled in the editor if `useTabForCompletions` is enabled, as side effect it currently also enables tab indentation
 - `<StringPreviewContentBlobToggler />`
     - `allowedHtmlElementsInPreview` option is set to inline elements on default
     - uses now the `Markdown.cutOff` property
@@ -61,6 +87,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     - `show={"print"}` and `hide={"screen"}` content is still accessible by screen readers
 - `<Label />`
     - `tooltip` content is accessible via keyboard navigation
+- `<Card />`
+    - fix color of first action button in info card
 - BOM issue on compressed stylesheet
     - first rule `selector` becomes `BOM:selector` that is valid but will never apply
     - we fixed this problem by adding a dummy rule as first rule

package.json

@@ -191,18 +191,15 @@
     },
     "lint-staged": {
         "*.(json|md)": [
-            "prettier --write",
-            "git add"
+            "prettier --write"
         ],
         "*.(js|ts|tsx)": [
             "eslint --fix",
-            "prettier --write",
-            "git add"
+            "prettier --write"
         ],
         "*.(scss)": [
             "stylelint --fix",
-            "prettier --write",
-            "git add"
+            "prettier --write"
         ]
     },
     "jest": {

src/common/utils/truncateMarkdownDisplay.ts

@@ -8,7 +8,7 @@ interface MarkdownWithCutOffProps extends Omit<MarkdownProps, "cutOff"> {
     cutOff: NonNullable<MarkdownProps["cutOff"]>;
 }
 
-interface TruncateMarkdownDisplayType {
+export interface TruncateMarkdownDisplayType {
     (
         /**
          *  Markdown element with mandatory `cutOff` property.

src/components/AutoSuggestion/ExtendedCodeEditor.tsx

@@ -72,7 +72,7 @@ export const ExtendedCodeEditor = ({
     multiline = false,
     initialValue = "",
     onKeyDown,
-    enableTab = false,
+    enableTab,
     mode,
     setCM,
     onFocusChange,

src/components/AutoSuggestion/tests/AutoSuggestion.test.tsx

@@ -4,10 +4,10 @@ import { act, fireEvent, render, screen, waitFor } from "@testing-library/react"
 
 import "@testing-library/jest-dom";
 
-import AutoSuggestion, { AutoSuggestionProps } from "../AutoSuggestion";
+import CodeAutocompleteField, { CodeAutocompleteFieldProps } from "../AutoSuggestion";
 
-describe("AutoSuggestion", () => {
-    let props: AutoSuggestionProps;
+describe("CodeAutocompleteField", () => {
+    let props: CodeAutocompleteFieldProps;
 
     beforeAll(() => {
         document.createRange = () => {
@@ -42,24 +42,24 @@ describe("AutoSuggestion", () => {
     });
 
     it("should render properly", () => {
-        const { container } = render(<AutoSuggestion {...props} />);
+        const { container } = render(<CodeAutocompleteField {...props} />);
         expect(container).not.toBeEmptyDOMElement();
     });
 
     it("should set label prop properly", () => {
-        const { getByText } = render(<AutoSuggestion {...props} />);
+        const { getByText } = render(<CodeAutocompleteField {...props} />);
         expect(getByText(props.label!)).toBeTruthy();
     });
 
     it.each([false, true])("updates the container height (multiline: %s)", (multiline) => {
-        const { container, rerender } = render(<AutoSuggestion {...props} multiline={multiline} height={120} />);
+        const { container, rerender } = render(<CodeAutocompleteField {...props} multiline={multiline} height={120} />);
         const editorContainer = container.querySelector<HTMLElement>(".eccgui-codeeditor");
         expect(editorContainer).toHaveStyle({ height: "120px" });
 
-        rerender(<AutoSuggestion {...props} multiline={multiline} height="10rem" />);
+        rerender(<CodeAutocompleteField {...props} multiline={multiline} height="10rem" />);
         expect(editorContainer).toHaveStyle({ height: "10rem" });
 
-        rerender(<AutoSuggestion {...props} multiline={multiline} />);
+        rerender(<CodeAutocompleteField {...props} multiline={multiline} />);
         expect(editorContainer?.style.height).toBe("");
     });
 
@@ -72,7 +72,7 @@ describe("AutoSuggestion", () => {
         "separates closing suggestions from Escape then Tab navigation ($multiline, $useTabForCompletions)",
         async ({ multiline, useTabForCompletions }) => {
             render(
-                <AutoSuggestion
+                <CodeAutocompleteField
                     {...props}
                     initialValue="value"
                     mode="json"
@@ -106,6 +106,13 @@ describe("AutoSuggestion", () => {
             expect(editor).toHaveFocus();
             expect(editor.textContent).toBe(initialContent);
 
+            if (!useTabForCompletions) {
+                // Tab is not handled by the editor and stays available for focus navigation.
+                expect(fireEvent.keyDown(editor, { key: "Tab", code: "Tab", keyCode: 9 })).toBe(true);
+                expect(editor.textContent).toBe(initialContent);
+                return;
+            }
+
             expect(fireEvent.keyDown(editor, { key: "Tab", code: "Tab", keyCode: 9 })).toBe(false);
             const contentAfterIndent = editor.textContent;
             expect(contentAfterIndent).not.toBe(initialContent);

src/components/Card/card.scss

@@ -226,7 +226,7 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
         @extend .#{$ns}-intent-success;
     }
     &.#{$eccgui}-intent--info > .#{$eccgui}-button:first-child {
-        @extend .#{$ns}-intent-primary;
+        @extend .#{$ns}-intent-accent;
     }
     &.#{$eccgui}-intent--warning > .#{$eccgui}-button:first-child {
         @extend .#{$ns}-intent-warning;

src/components/Dialog/AlertDialog.tsx

@@ -4,7 +4,7 @@ import { Definitions as IntentStates, IntentTypes } from "../../common/Intent";
 
 import SimpleDialog, { SimpleDialogProps } from "./SimpleDialog";
 
-export interface AlertDialogProps extends Omit<SimpleDialogProps, "intent"> {
+export interface AlertDialogProps extends Omit<SimpleDialogProps, "intent" | "role"> {
     /**
      * set to true if alert dialog displays a success message
      */
@@ -21,7 +21,8 @@ export interface AlertDialogProps extends Omit<SimpleDialogProps, "intent"> {
 
 /**
  * Special element to display alert notification in modal dialogs.
- * Inherits all properties from `SimpleDialog`, except `intent`.
+ * Inherits all properties from `SimpleDialog`, except `intent` and `role`.
+ * If `title`, `aria-label` nor a `aria-labelledby` is given then the alert level automatically used as fallback for `aria-label`.
  */
 export const AlertDialog = ({
     children,
@@ -42,7 +43,7 @@ export const AlertDialog = ({
     }
 
     return (
-        <SimpleDialog size="tiny" preventSimpleClosing={true} intent={intentLevel} {...otherProps}>
+        <SimpleDialog role="alertdialog" size="tiny" preventSimpleClosing={true} intent={intentLevel} {...otherProps}>
             {children}
         </SimpleDialog>
     );

src/components/Dialog/Modal.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import {
     Classes as BlueprintClassNames,
+    DialogProps as BlueprintDialogProps,
     Overlay2 as BlueprintOverlay,
     Overlay2Props as BlueprintOverlayProps,
 } from "@blueprintjs/core";
@@ -11,9 +12,10 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { TestableComponent } from "../interfaces";
 
 import { Card } from "./../Card";
-import { ModalContext } from "./ModalContext";
+import { isModalContextProvided, ModalContext } from "./ModalContext";
 
-export interface ModalProps extends TestableComponent, BlueprintOverlayProps {
+export interface ModalProps
+    extends TestableComponent, BlueprintOverlayProps, Pick<BlueprintDialogProps, "role" | "aria-describedby"> {
     children: React.ReactNode | React.ReactNode[];
     /**
      * A space-delimited list of class names to pass along to the BlueprintJS `Overlay` element that is used to create the modal.
@@ -52,6 +54,18 @@ export interface ModalProps extends TestableComponent, BlueprintOverlayProps {
      * Prevents that pan and zooming actions of an existing react-flow instance are triggered while this Modal is open.
      */
     preventReactFlowEvents?: boolean;
+    /**
+     * ID of the element that contains title or label text for this dialog.
+     * If given then `aria-label` is ignored.
+     * In v27 it will be enforced that `aria-label` or `aria-labelledby` is set.
+     */
+    "aria-labelledby"?: string;
+    /**
+     * Set this if there is no visible title element that is used for `aria-labelledby`.
+     * Property is ignored if `aria-labelledby` is given.
+     * In v27 it will be enforced that `aria-label` or `aria-labelledby` is set.
+     */
+    "aria-label"?: string;
 }
 
 export type ModalSize = "tiny" | "small" | "regular" | "large" | "xlarge" | "fullscreen";
@@ -78,6 +92,10 @@ export const Modal = ({
     "data-test-id": dataTestId,
     "data-testid": dataTestid,
     modalId,
+    role = "dialog",
+    "aria-labelledby": ariaLabelledby,
+    "aria-describedby": ariaDescribedby,
+    "aria-label": ariaLabel,
     preventReactFlowEvents = true,
     ...otherProps
 }: ModalProps) => {
@@ -93,7 +111,14 @@ export const Modal = ({
         };
     }, []);
 
+    // always remove the role if there is no explanation
+    const modalRole = ariaLabel || ariaLabelledby ? role : undefined;
+
     React.useEffect(() => {
+        if (!modalRole && otherProps.isOpen) {
+            // eslint-disable-next-line no-console
+            console.warn(`role=${role} removed from modal because aria-label nor aria-labelledby is available.`);
+        }
         modalContext.setModalOpen(uniqueModalId.current, otherProps.isOpen);
     }, [otherProps.isOpen]);
 
@@ -140,6 +165,23 @@ export const Modal = ({
         }
     };
 
+    // Only the modal that was opened last constrains assistive technologies to its contents.
+    // Without a provided ModalContext the modals do not know about each other, then each of them
+    // has to consider itself as the one that constrains.
+    const openModalStack = modalContext.openModalStack() ?? [];
+    const isTopMostModal = isModalContextProvided(modalContext)
+        ? openModalStack[openModalStack.length - 1] === uniqueModalId.current
+        : true;
+
+    const modalAriaAttributes = {
+        role: modalRole,
+        "aria-label": !ariaLabelledby ? ariaLabel : undefined,
+        "aria-labelledby": ariaLabelledby,
+        "aria-describedby": ariaDescribedby,
+        // modality can only be expressed together with a dialog role
+        "aria-modal": modalRole ? isTopMostModal : undefined,
+    };
+
     return (
         <BlueprintOverlay
             {...otherProps}
@@ -158,15 +200,16 @@ export const Modal = ({
                 className={BlueprintClassNames.DIALOG_CONTAINER}
                 // this is a workaround because data attribute on SimpleDialog is not correctly routed to the overlay by blueprint js
                 {...{ "data-test-id": dataTestId ?? "simpleDialogWidget", "data-testid": dataTestid }}
-                {...focusableProps}
                 tabIndex={0}
+                {...focusableProps}
             >
                 <section
                     className={
                         `${eccgui}-dialog__wrapper` +
                         (typeof size === "string" ? ` ${eccgui}-dialog__wrapper--` + size : "") +
                         (className ? " " + className : "")
                     }
+                    {...modalAriaAttributes}
                 >
                     {alteredChildren}
                 </section>