Merge branch 'main' into Action-Image-Align

canvas_modules/common-canvas/__tests__/common-properties/panels/tearsheet-test.js

@@ -23,6 +23,7 @@ import TearSheet from "./../../../src/common-properties/panels/tearsheet";
 import codeParamDef from "./../../test_resources/paramDefs/code_paramDef.json";
 import Sinon from "sinon";
 import { cleanup, fireEvent, screen, waitFor } from "@testing-library/react";
+import { Provider } from "react-redux";
 
 describe("tearsheet tests", () => {
 	let controller;
@@ -85,6 +86,13 @@ describe("tearsheet tests", () => {
 });
 
 describe("Tearsheet renders correctly", () => {
+	let controller;
+	let renderedObject;
+	beforeEach(() => {
+		renderedObject = propertyUtilsRTL.flyoutEditorForm(codeParamDef);
+		controller = renderedObject.controller;
+	});
+
 	it("should not display buttons in tearsheet if showPropertiesButtons is false", () => {
 		const wrapper = renderWithIntl(<TearSheet
 			open
@@ -110,19 +118,24 @@ describe("Tearsheet renders correctly", () => {
 	});
 
 	it("should display buttons in tearsheet if showPropertiesButtons is true and applyOnBlur is false", () => {
-		const wrapper = renderWithIntl(<TearSheet
-			open
-			onCloseCallback={null}
-			tearsheet={{
-				title: "test title",
-				content: "test content"
-			}}
-			applyLabel="Save"
-			rejectLabel="Cancel"
-			okHandler={Sinon.spy()}
-			cancelHandler={Sinon.spy()}
-			showPropertiesButtons
-		/>);
+		const wrapper = renderWithIntl(
+			<Provider store={controller.getStore()}>
+				<TearSheet
+					open
+					onCloseCallback={null}
+					tearsheet={{
+						title: "test title",
+						content: "test content"
+					}}
+					applyLabel="Save"
+					rejectLabel="Cancel"
+					okHandler={Sinon.spy()}
+					cancelHandler={Sinon.spy()}
+					showPropertiesButtons
+					disableSaveOnRequiredErrors={false}
+					controller={controller}
+				/>
+			</Provider>);
 		const { container } = wrapper;
 		const tearsheet = container.querySelectorAll("properties-tearsheet-panel");
 		expect(tearsheet).to.not.be.null;

canvas_modules/common-canvas/locales/common-properties/locales/en.json

@@ -95,6 +95,8 @@
   "table.toolbar.button.delete": "Delete",
   "table.toolbar.button.edit": "Edit",
   "table.toolbar.button.cancel": "Cancel",
+  "table.toolbar.overflow.label": "Table toolbar overflow",
+  "radiobuttongroup.aria.label": "Radio button group",
   "list.table.label": "Values",
   "dropdown.tooltip.openMenu": "Open menu",
   "dropdown.tooltip.closeMenu": "Close menu",

canvas_modules/common-canvas/src/common-properties/components/main-editor-properties-buttons/main-editor-properties-buttons.jsx

@@ -63,8 +63,8 @@ MainEditorPropertiesButtons.defaultProps = {
 };
 
 const mapStateToProps = (state, ownProps) => ({
-	saveButtonEnabled: !ownProps.controller.getSaveButtonDisable(),
-	requiredErrorMessages: ownProps.controller.getRequiredErrorMessages()
+	saveButtonEnabled: !ownProps.controller?.getSaveButtonDisable(),
+	requiredErrorMessages: ownProps.controller?.getRequiredErrorMessages()
 });
 
 export default connect(mapStateToProps, null)(MainEditorPropertiesButtons);

canvas_modules/common-canvas/src/common-properties/components/table-buttons/table-buttons.jsx

@@ -113,6 +113,7 @@ class TableButtons extends React.Component {
 				instanceId={0}
 				size="sm"
 				toolbarActionHandler={this.customButtonOnClick}
+				additionalText={{ overflowMenuLabel: this.props.toolbarOverflowLabel }}
 			/>
 		</div>);
 	}
@@ -123,6 +124,7 @@ TableButtons.propTypes = {
 	propertyId: PropTypes.object.isRequired,
 	customButtons: PropTypes.array.isRequired,
 	tableState: PropTypes.string,
+	toolbarOverflowLabel: PropTypes.string,
 	customButtonsState: PropTypes.object // set in by redux
 };
 

canvas_modules/common-canvas/src/common-properties/constants/constants.js

@@ -127,6 +127,8 @@ export const MESSAGE_KEYS = {
 	TABLE_TOOLBAR_BUTTON_DELETE: "table.toolbar.button.delete",
 	TABLE_TOOLBAR_BUTTON_EDIT: "table.toolbar.button.edit",
 	TABLE_TOOLBAR_BUTTON_CANCEL: "table.toolbar.button.cancel",
+	TABLE_TOOLBAR_OVERFLOW_LABEL: "table.toolbar.overflow.label",
+	RADIO_BUTTON_GROUP_ARIA_LABEL: "radiobuttongroup.aria.label",
 	TABLE_DELETEICON_TOOLTIP: "table.deleteIcon.tooltip"
 
 };

canvas_modules/common-canvas/src/common-properties/controls/abstract-table.jsx

@@ -143,6 +143,11 @@ export default class AbstractTable extends React.Component {
 		return row;
 	}
 
+	// Returns the label for the overflow menu in the table toolbar
+	getTableToolbarOverflowLabel() {
+		return PropertyUtils.formatMessage(this.props.controller.getReactIntl(), MESSAGE_KEYS.TABLE_TOOLBAR_OVERFLOW_LABEL);
+	}
+
 	setScrollToRow(row) {
 		this.scrollToRow = row;
 	}
@@ -534,6 +539,7 @@ export default class AbstractTable extends React.Component {
 					tableState={tableState}
 					customButtons={customButtons}
 					customButtonsState={this.props.tableButtons}
+					toolbarOverflowLabel={this.getTableToolbarOverflowLabel()}
 				/>
 			</div>);
 		}

canvas_modules/common-canvas/src/common-properties/controls/radioset/radioset.jsx

@@ -19,11 +19,12 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { isEqual } from "lodash";
 import * as ControlUtils from "./../../util/control-utils";
+import * as PropertyUtils from "./../../util/property-utils";
 import * as ConditionsUtils from "./../../ui-conditions/conditions-utils.js";
 import ValidationMessage from "./../../components/validation-message";
 import { RadioButton, RadioButtonGroup } from "@carbon/react";
 import classNames from "classnames";
-import { STATES, UPDATE_TYPE } from "./../../constants/constants.js";
+import { MESSAGE_KEYS, STATES, UPDATE_TYPE } from "./../../constants/constants.js";
 import { v4 as uuid4 } from "uuid";
 import { Information } from "@carbon/react/icons";
 import Tooltip from "./../../../tooltip/tooltip.jsx";
@@ -224,6 +225,8 @@ class RadiosetControl extends React.Component {
 			);
 		}
 
+		const radioBtnGroupAriaLabel = PropertyUtils.formatMessage(this.props.controller.getReactIntl(), MESSAGE_KEYS.RADIO_BUTTON_GROUP_ARIA_LABEL);
+
 		return (
 			<div data-id={ControlUtils.getDataId(this.props.control, this.props.propertyId)}
 				className={classNames("properties-radioset ", { "hide": this.props.state === STATES.HIDDEN })}
@@ -234,6 +237,8 @@ class RadiosetControl extends React.Component {
 					orientation={this.props.control.orientation}
 					helperText={this.props.control.helperText}
 					readOnly={this.props.readOnly}
+					// Provide unique aria-label for each radio button group
+					aria-label={`${radioBtnGroupAriaLabel} (${ControlUtils.getDataId(this.props.control, this.props.propertyId)})`}
 				>
 					{buttons}
 				</RadioButtonGroup>

canvas_modules/common-canvas/src/common-properties/panels/tearsheet/tearsheet.jsx

@@ -22,7 +22,7 @@ import { formatMessage } from "./../../util/property-utils";
 import { ComposedModal, ModalHeader, ModalBody } from "@carbon/react";
 import { Portal } from "react-portal";
 import { MESSAGE_KEYS } from "./../../constants/constants";
-import PropertiesButtons from "../../components/properties-buttons";
+import MainEditorPropertiesButtons from "./../../components/main-editor-properties-buttons";
 
 class TearSheet extends Component {
 	render() {
@@ -34,12 +34,14 @@ class TearSheet extends Component {
 
 		const buttons = this.props.applyOnBlur
 			? null
-			: (<PropertiesButtons
+			: (<MainEditorPropertiesButtons
 				okHandler={this.props.okHandler}
 				cancelHandler={this.props.cancelHandler}
 				applyLabel={this.props.applyLabel}
 				rejectLabel={this.props.rejectLabel}
 				showPropertiesButtons={this.props.showPropertiesButtons}
+				controller={this.props.controller}
+				disableSaveOnRequiredErrors={this.props.disableSaveOnRequiredErrors}
 			/>);
 
 		return (
@@ -93,7 +95,9 @@ TearSheet.propTypes = {
 	okHandler: PropTypes.func, // Required if showPropertiesButtons is true
 	cancelHandler: PropTypes.func, // Required if showPropertiesButtons is true
 	applyOnBlur: PropTypes.bool.isRequired,
-	intl: PropTypes.object.isRequired
+	intl: PropTypes.object.isRequired,
+	controller: PropTypes.object.isRequired,
+	disableSaveOnRequiredErrors: PropTypes.bool.isRequired
 };
 
 TearSheet.defaultProps = {

canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.jsx

@@ -590,6 +590,8 @@ class PropertiesMain extends React.Component {
 					cancelHandler={cancelHandler}
 					showPropertiesButtons={this.state.showPropertiesButtons}
 					applyOnBlur={this.props.propertiesConfig.applyOnBlur}
+					controller={this.propertiesController}
+					disableSaveOnRequiredErrors={this.props.propertiesConfig.disableSaveOnRequiredErrors}
 				/>);
 			} else { // Modal
 				propertiesDialog = (<PropertiesModal