diff --git a/CHANGELOG.md b/CHANGELOG.md index dc06004fe..401bc19e5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,27 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p ## [Unreleased] +### Added + +- ``, `` + - support `aria-label` and `aria-labelledby` for naming activity error report dialogs without a visible title + - support `fullScreenTogglerTexts` to set localized texts for the full screen toggler of the error report dialog +- `` + - `fullScreenTogglerTexts` property: sets the texts of the full screen toggler for the `maximize` and `minimize` state, used as `title` and accessible name of the button + +### Changed + +- `` + - the full screen toggler has an accessible name and a `title` now, the default texts are "Show in full screen" and "Exit full screen", use `fullScreenTogglerTexts` to localize them +- ``, `` + - error report dialogs without title, `aria-label` and `aria-labelledby` get a fallback accessible name, `translate("showErrorReport")` in `` and "Activity execution error report" in `` + - the error report dialog uses the full screen toggler of `` instead of an own implementation +- `` + - the elements referenced by `aria-labelledby` are checked for existence when the modal is opened, invalid references are reported as console warning and removed from `aria-labelledby` + - if none of the elements referenced by `aria-labelledby` exists then a given `aria-label` is used as fallback, without `aria-label` the `role` and `aria-modal` attributes are removed +- ``, `` + - the intent state is also used as `aria-label` fallback if none of the elements referenced by `aria-labelledby` exists + ## [26.2.1] - 2026-11-02 ### Fixed diff --git a/src/cmem/ActivityControl/ActivityExecutionErrorReportModal.tsx b/src/cmem/ActivityControl/ActivityExecutionErrorReportModal.tsx index be2e7a932..d986ee2d4 100644 --- a/src/cmem/ActivityControl/ActivityExecutionErrorReportModal.tsx +++ b/src/cmem/ActivityControl/ActivityExecutionErrorReportModal.tsx @@ -1,12 +1,20 @@ -import React, { useState } from "react"; +import React from "react"; import Button from "../../components/Button/Button"; -import SimpleDialog from "../../components/Dialog/SimpleDialog"; -import IconButton from "../../components/Icon/IconButton"; +import SimpleDialog, { SimpleDialogProps } from "../../components/Dialog/SimpleDialog"; import HtmlContentBlock from "../../components/Typography/HtmlContentBlock"; -interface ActivityExecutionErrorReportModalProps { - // Title of the modal +interface ActivityExecutionErrorReportModalProps extends Pick< + SimpleDialogProps, + "aria-label" | "aria-labelledby" | "fullScreenTogglerTexts" +> { + /** + * Title of the modal. + * If set, it is used as the accessible name of the dialog via `aria-labelledby` + * (unless `aria-labelledby` is given explicitly), so `aria-label` is ignored. + * Use `aria-label` only for modals without title. + * If neither `title`, a non-empty `aria-label` nor `aria-labelledby` is set, then "Activity execution error report" is used as `aria-label`. + */ title?: string; // Called when the close button is clicked onDiscard: () => any; @@ -23,13 +31,15 @@ interface ActivityExecutionErrorReportModalProps { /** Shows the execution error report to the user and offers to download the report. */ export const ActivityExecutionErrorReportModal = ({ title, + "aria-label": ariaLabel, + "aria-labelledby": ariaLabelledby, onDiscard, report, downloadButtonValue, closeButtonValue, + fullScreenTogglerTexts, fetchErrorReport, }: ActivityExecutionErrorReportModalProps) => { - const [displayFullscreen, setDisplayFullscreen] = useState(false); const fileName = "Activity execution report from " + new Date().toISOString().replace(/T/, " ").replace(/:/g, "-").substr(0, 19) + @@ -51,15 +61,13 @@ export const ActivityExecutionErrorReportModal = ({ return ( setDisplayFullscreen(!displayFullscreen)} - /> - } actions={[