properties to show\hide title and edit icon, property for alt and accessibility changes, show url in property pane

samples/react-image-editor/README.md

@@ -66,6 +66,7 @@ References to office-ui-fabric-react version 5.x because of SharePoint 2019 Supp
 ## Contributors
 
 * [Peter Paul Kirschner](https://github.com/petkir) 
+* [Ishai Sagi] (http://github.com/ishaisagi-hns)
 
 Thanks to [celum](https://www.celum.com/) and [cubido](https://www.cubido.at/) to allow to share this code.
 
@@ -73,6 +74,7 @@ Thanks to [celum](https://www.celum.com/) and [cubido](https://www.cubido.at/) t
 
 Version|Date|Comments
 -------|----|--------
+1.1.0.0|Sep 09, 2024|Added properties and accessibility
 1.0.0.0|Mar 17, 2021|Initial release
 
 ## Minimal Path to Awesome

samples/react-image-editor/src/components/ImageManipulation/ImageManipulation.tsx

@@ -59,6 +59,7 @@ export interface IImageManipulationProps {
   editMode?: (mode: boolean) => void;
   configSettings: IImageManipulationConfig;
   displayMode: DisplayMode;
+  altText:string;
 }
 
 export interface IImageManipulationState {
@@ -109,6 +110,7 @@ export class ImageManipulation extends React.Component<IImageManipulationProps,
     this.img = new Image();
     this.img.src = url;
     this.img.crossOrigin = 'Anonymous';
+    this.img.alt=this.props.altText?this.props.altText:'Untitled image';
     this.img.onload = () => {
 
       this.applySettings();
@@ -305,7 +307,7 @@ export class ImageManipulation extends React.Component<IImageManipulationProps,
           <canvas className={this.getMaxWidth()}
             style={{ display: 'none' }}
             ref={this.setManipulateRef}></canvas>
-          <canvas className={this.getMaxWidth()} ref={this.setCanvasRef} ></canvas>
+          <canvas className={this.getMaxWidth()} ref={this.setCanvasRef} aria-label={this.props.altText} role='img' >Your browser does not support displaying canvas elements.</canvas>
           {this.state.settingPanel === SettingPanelType.Crop && (this.getCropGrid())}
           {this.state.settingPanel === SettingPanelType.Resize && (this.getResizeGrid())}
 

samples/react-image-editor/src/webparts/reactImageEditor/ReactImageEditorWebPart.ts

@@ -4,6 +4,8 @@ import { Version } from '@microsoft/sp-core-library';
 import {
   BaseClientSideWebPart,
   IPropertyPaneConfiguration,
+  PropertyPaneLabel,
+  PropertyPaneTextField,
   PropertyPaneToggle
 } from '@microsoft/sp-webpart-base';
 
@@ -28,6 +30,10 @@ export default class ReactImageEditorWebPart extends BaseClientSideWebPart<IReac
         title: this.properties.title,
         url: this.properties.url,
         settings: this.properties.settings,
+        showEditIcon:this.properties.showEditIcon,
+        altText:this.properties.altText,
+        
+      
 
         updateTitleProperty: (value: string) => { this.properties.title = value; },
         updateUrlProperty: (value: string) => {
@@ -67,9 +73,16 @@ export default class ReactImageEditorWebPart extends BaseClientSideWebPart<IReac
             {
               groupName: strings.BasicGroupName,
               groupFields: [
+                PropertyPaneTextField('altText',{label:strings.AltTextFieldLabel}),
                 PropertyPaneToggle('showTitle', {
                   label: strings.ShowTitleFieldLabel
                 })
+                ,
+                PropertyPaneToggle('showEditIcon', {
+                  label: strings.ShowTitleFieldLabel
+                }),
+                PropertyPaneLabel('urlInfo',{text:`The selected image is at ${this.properties.url?this.properties.url:'Not yet selected'} `})
+                
               ]
             }
           ]

samples/react-image-editor/src/webparts/reactImageEditor/components/ReactImageEditor.tsx

@@ -9,9 +9,11 @@ import { ImageManipulation, IImageManipulationSettings } from '../../../componen
 
 export interface IReactImageEditorBaseProps {
   showTitle: boolean;
+  showEditIcon: boolean;
   title: string;
   url?: string;
   settings?: IImageManipulationSettings[];
+  altText?:string;
 
 }
 
@@ -21,6 +23,7 @@ export interface IReactImageEditorProps extends IReactImageEditorBaseProps {
   updateTitleProperty: (value: string) => void;
   updateUrlProperty: (value: string) => void;
   updateManipulationSettingsProperty: (value: IImageManipulationSettings[]) => void;
+
 }
 
 export interface IReactImageEditorState {
@@ -46,10 +49,12 @@ export default class ReactImageEditor extends React.Component<IReactImageEditorP
     return (
 
       <div className={styles.reactImageEditor}>
-        <WebPartTitle displayMode={this.props.displayMode}
-          title={this.props.title}
-          updateProperty={this.props.updateTitleProperty} />
-        {(isFilePickerOpen || isConfigured) && Environment.type !== EnvironmentType.Local &&
+        {this.props.showTitle &&
+          <WebPartTitle displayMode={this.props.displayMode}
+            title={this.props.title}
+            updateProperty={this.props.updateTitleProperty} />
+        }
+        {(isFilePickerOpen || isConfigured) && Environment.type !== EnvironmentType.Local && this.props.showEditIcon &&
           <FilePicker
             isPanelOpen={isFilePickerOpen}
             accepts={['.gif', '.jpg', '.jpeg', '.png']}
@@ -65,6 +70,7 @@ export default class ReactImageEditor extends React.Component<IReactImageEditorP
 
             }}
             context={this.props.context}
+
           />}
 
         {!isConfigured ? (<Placeholder iconName='Edit'
@@ -73,16 +79,16 @@ export default class ReactImageEditor extends React.Component<IReactImageEditorP
           buttonLabel='Configure'
           onConfigure={this._onConfigure} />) :
           (
-          <ImageManipulation
-            settings={this.props.settings}
-            configSettings={{
-              rotateButtons: [-90, -45, -30, 0, 30, 45, 90]
-            }
-            }
-            displayMode={this.props.displayMode}
-            settingsChanged={this._onSettingsChanged}
-            src={this.props.url}
-          />
+            <ImageManipulation
+              settings={this.props.settings}
+              configSettings={{
+                rotateButtons: [-90, -45, -30, 0, 30, 45, 90]
+              }
+              }
+              displayMode={this.props.displayMode}
+              settingsChanged={this._onSettingsChanged}
+              src={this.props.url} altText={this.props.altText}
+            />
           )}
 
       </div >
@@ -95,7 +101,7 @@ export default class ReactImageEditor extends React.Component<IReactImageEditorP
         this._onUrlChanged(
           'https://media.gettyimages.com/photos/'
           + 'whitewater-paddlers-descend-vertical-waterfall-in-kayak-picture-id1256321293?s=2048x2048'
-          );
+        );
       });
     } else {
       this.setState({ isFilePickerOpen: true });

samples/react-image-editor/src/webparts/reactImageEditor/loc/en-us.js

@@ -1,7 +1,10 @@
 define([], function() {
   return {
-    "PropertyPaneDescription": "Description",
-    "BasicGroupName": "Group Name",
-    "ShowTitleFieldLabel": "Show webpart title"
+    "PropertyPaneDescription": "",
+    "BasicGroupName": "Web part configuration",
+    "ShowTitleFieldLabel": "Show webpart title",
+    "showEditIcon": "Show edit icon",
+    "AltTextFieldLabel":"Alt Text"
+
   }
 });

samples/react-image-editor/src/webparts/reactImageEditor/loc/mystrings.d.ts

@@ -2,6 +2,8 @@ declare interface IReactImageEditorWebPartStrings {
   PropertyPaneDescription: string;
   BasicGroupName: string;
   ShowTitleFieldLabel: string;
+  ShowEditIconFieldLabel: string;
+  AltTextFieldLabel: string;
 }
 
 declare module 'ReactImageEditorWebPartStrings' {