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 */} {this.props.widgetName}) => 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;