#2326 Accessibility Violations in Common Properties Controls without Label (#2327)

Signed-off-by: srikant <[email protected]>
Signed-off-by: CTomlyn <[email protected]>
Co-authored-by: Matt Howard <[email protected]>
Co-authored-by: CTomlyn <[email protected]>

Author: 3 people

canvas_modules/common-canvas/src/common-properties/components/control-item/control-item.jsx

@@ -86,6 +86,12 @@ class ControlItem extends React.Component {
 					{indicator}
 					{tooltip}
 				</div>);
+		} else {
+			// Provide a label for controls with hidden labels to support accessibility
+			label = (
+				<div className={classNames("properties-label-container-hidden")}>
+					<label className="properties-control-label-hidden">{this.props.control?.label?.text}</label>
+				</div>);
 		}
 
 		const action = this.actionFactory.generateAction(0, this.props.control.action);

canvas_modules/common-canvas/src/common-properties/components/control-item/control-item.scss

@@ -64,6 +64,10 @@
 	}
 }
 
+.properties-label-container-hidden {
+	display: none;
+}
+
 .properties-label-container, .properties-summary-link-container, .properties-checkbox-tooltip-container, .properties-radioset-panel {
 	.tooltip-container {
 		display: flex;

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

@@ -80,6 +80,7 @@ class CheckboxControl extends React.Component {
 						hideLabel={this.props.tableControl}
 						helperText={this.props.control.helperText}
 						readOnly={this.props.readOnly}
+						aria-label={this.props.control.labelVisible ? null : this.props.control?.label?.text}
 					/>
 					{tooltipIcon}
 				</div>

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

@@ -128,6 +128,7 @@ class CheckboxsetControl extends React.Component {
 					legendText={this.props.controlItem}
 					helperText={this.props.control.helperText}
 					readOnly={this.props.readOnly}
+					aria-label={this.props.control.labelVisible ? null : this.props.control?.label?.text}
 				>
 					<div className={classNames("properties-checkboxset-container", this.props.messageInfo ? this.props.messageInfo.type : null)}>
 						{checkboxes}

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

@@ -85,6 +85,7 @@ class DatefieldControl extends React.Component {
 					labelText={this.props.controlItem}
 					hideLabel={this.props.tableControl}
 					readOnly={this.props.readOnly}
+					aria-label={this.props.control.labelVisible ? null : this.props.control?.label?.text}
 				/>
 				<ValidationMessage inTable={this.props.tableControl} tableOnly state={this.props.state} messageInfo={this.props.messageInfo} />
 			</div>

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

@@ -260,6 +260,7 @@ class DropDown extends React.Component {
 					value={selection}
 					helperText={this.props.control.helperText}
 					readOnly={this.props.readOnly}
+					aria-label={this.props.control.labelVisible ? null : this.props.control?.label?.text}
 				>
 					{ options }
 				</Select>
@@ -302,6 +303,7 @@ class DropDown extends React.Component {
 					titleText={this.props.controlItem}
 					helperText={this.props.control.helperText}
 					readOnly={this.props.readOnly}
+					aria-label={this.props.control.labelVisible ? null : this.props.control?.label?.text}
 				/>
 			);
 		}

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

@@ -165,6 +165,7 @@ class NumberfieldControl extends React.Component {
 					helperText={this.props.control.helperText}
 					readOnly={this.props.readOnly}
 					disableWheel
+					aria-label={this.props.control.labelVisible ? null : this.props.control?.label?.text}
 				/>
 				{numberGenerator}
 				<ValidationMessage inTable={this.props.tableControl} tableOnly state={this.props.state} messageInfo={this.props.messageInfo} />

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

@@ -65,6 +65,7 @@ class PasswordControl extends React.Component {
 					showPasswordLabel={showPasswordLabel}
 					hidePasswordLabel={hidePasswordLabel}
 					helperText={this.props.control.helperText}
+					aria-label={this.props.control.labelVisible ? null : this.props.control?.label?.text}
 				/>
 				<ValidationMessage inTable={this.props.tableControl} tableOnly state={this.props.state} messageInfo={this.props.messageInfo} />
 			</div>);

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

@@ -81,6 +81,7 @@ class TextareaControl extends React.Component {
 					hideLabel={this.props.tableControl}
 					helperText={this.props.control.helperText}
 					readOnly={this.props.readOnly}
+					aria-label={this.props.control.labelVisible ? null : this.props.control?.label?.text}
 				/>
 				<ValidationMessage inTable={this.props.tableControl} tableOnly={!showValidationMessage} state={""} messageInfo={errorMessage} />
 			</div>);
@@ -97,6 +98,7 @@ class TextareaControl extends React.Component {
 					hideLabel={this.props.tableControl}
 					helperText={this.props.control.helperText}
 					readOnly={this.props.readOnly}
+					aria-label={this.props.control.labelVisible ? null : this.props.control?.label?.text}
 				/>
 			);
 		}

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

@@ -107,6 +107,7 @@ class TextfieldControl extends React.Component {
 					value={value}
 					labelText={this.props.controlItem}
 					hideLabel={this.props.tableControl}
+					aria-label={this.props.control.labelVisible ? null : this.props.control?.label?.text}
 					ref={(ref) => (this.textInputRef = ref)}
 					readOnly={this.props.readOnly}
 				/>