diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/Image/Image_base64_spec.js b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Image/Image_base64_spec.js
index b10747276f83..412068aa5541 100644
--- a/app/client/cypress/e2e/Regression/ClientSide/Widgets/Image/Image_base64_spec.js
+++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Image/Image_base64_spec.js
@@ -21,9 +21,20 @@ describe(
200,
);
cy.EvaluateCurrentValue(this.dataSet.base64image.withPrefix);
+ cy.testJsontext("alternativetext", this.dataSet.base64image.altText);
+ cy.wait("@updateLayout").should(
+ "have.nested.property",
+ "response.body.responseMeta.status",
+ 200,
+ );
+ cy.EvaluateCurrentValue(this.dataSet.base64image.altText);
+
cy.get(viewWidgetsPage.imageinner)
.invoke("attr", "src")
.should("contain", this.dataSet.base64image.withPrefix);
+ cy.get(viewWidgetsPage.imageinner)
+ .invoke("attr", "alt")
+ .should("contain", this.dataSet.base64image.altText);
cy.closePropertyPane();
});
},
diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/Image/Image_spec.js b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Image/Image_spec.js
index 01e0a4a32783..31b1738dea45 100644
--- a/app/client/cypress/e2e/Regression/ClientSide/Widgets/Image/Image_spec.js
+++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Image/Image_spec.js
@@ -38,6 +38,13 @@ describe(
cy.get(viewWidgetsPage.imageinner)
.invoke("attr", "src")
.should("contain", this.dataSet.validateImage);
+ /**
+ * @param{TEXT} Alternative text
+ */
+ cy.testCodeMirrorLast(this.dataSet.NewImageAltText);
+ cy.get(viewWidgetsPage.imageinner)
+ .invoke("attr", "alt")
+ .should("contain", this.dataSet.validateImageAltText);
cy.closePropertyPane();
});
diff --git a/app/client/cypress/fixtures/TestDataSet1.json b/app/client/cypress/fixtures/TestDataSet1.json
index 9032f9db78e2..57ae7d2f16dc 100644
--- a/app/client/cypress/fixtures/TestDataSet1.json
+++ b/app/client/cypress/fixtures/TestDataSet1.json
@@ -92,9 +92,11 @@
"multiSelectName": "MultiSelect1",
"defaultimage": "https://i0.wp.com/www.heyuguys.com/images/2016/04/The-Joker.png?fit=1920%2C960",
"NewImage": "https://cdn.dribbble.com/users/1787323/screenshots/4563995/dribbbe_hammer-01.png",
+ "NewImageAltText": "Thor's hammer planted into the ground",
"base64image": {
"withoutPrefix": "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAAAAAA6fptVAAAACklEQVR4nGNiAAAABgADNjd8qAAAAABJRU5ErkJggg==",
- "withPrefix": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAAAAAA6fptVAAAACklEQVR4nGNiAAAABgADNjd8qAAAAABJRU5ErkJggg=="
+ "withPrefix": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAAAAAA6fptVAAAACklEQVR4nGNiAAAABgADNjd8qAAAAABJRU5ErkJggg==",
+ "altText": "A single pixel"
},
"textfun": "{{Table1.selectedRow.userName}}",
"textfunID": "{{Table1.selectedRow.id}}",
@@ -118,6 +120,7 @@
"RichTexteditorBody": "Here is the text area to edit html",
"userApi": "http://host.docker.internal:5001/v1",
"validateImage": "https://cdn.dribbble.com/users/1787323/screenshots/4563995/dribbbe_hammer-01.png",
+ "validateImageAltText": "Thor's hammer planted into the ground",
"defaultdata": "TestData",
"label": "one",
"rgbValue": "rgb(255, 0, 0)",
diff --git a/app/client/src/widgets/ImageWidget/component/index.tsx b/app/client/src/widgets/ImageWidget/component/index.tsx
index 9cd048ddba6d..304a15a40571 100644
--- a/app/client/src/widgets/ImageWidget/component/index.tsx
+++ b/app/client/src/widgets/ImageWidget/component/index.tsx
@@ -291,7 +291,7 @@ class ImageComponent extends React.Component<
>
{/* Used for running onImageError and onImageLoad Functions since Background Image doesn't have the functionality */}
) => void;
borderRadius: string;
boxShadow?: string;
+ alt?: string;
}
export default ImageComponent;
diff --git a/app/client/src/widgets/ImageWidget/widget/index.tsx b/app/client/src/widgets/ImageWidget/widget/index.tsx
index 1377a4418d1a..05c71a8e7eed 100644
--- a/app/client/src/widgets/ImageWidget/widget/index.tsx
+++ b/app/client/src/widgets/ImageWidget/widget/index.tsx
@@ -133,6 +133,23 @@ class ImageWidget extends BaseWidget {
isTriggerProperty: false,
validation: { type: ValidationTypes.IMAGE_URL },
},
+ {
+ helpText: "Sets alternative text for the image",
+ propertyName: "alt",
+ label: "Alternative text",
+ controlType: "INPUT_TEXT",
+ placeholderText: "Alternative text",
+ isBindProperty: true,
+ defaultValue: "",
+ isTriggerProperty: false,
+ validation: {
+ type: ValidationTypes.TEXT,
+ params: {
+ required: true,
+ maxLength: 125
+ }
+ },
+ },
],
},
{
@@ -328,6 +345,7 @@ class ImageWidget extends BaseWidget {
disableDrag={(disable: boolean) => {
this.disableDrag(disable);
}}
+ alt={this.props.alt ? this.props.alt : undefined}
enableDownload={this.props.enableDownload}
enableRotation={this.props.enableRotation}
imageUrl={this.props.image}
@@ -368,6 +386,7 @@ export interface ImageWidgetProps extends WidgetProps {
onClick?: string;
borderRadius: string;
boxShadow?: string;
+ alt?: string;
}
export default ImageWidget;