- add support for the Alt Text Title field (altTitle) in addition to …

…the existing Alt Text Description field (altText)

- convert newlines to &gitbrent#10; such that they show up correctly in alt text

demos/modules/demo_chart.mjs

@@ -110,6 +110,7 @@ function genSlide01(pptx) {
 		y: 0.6,
 		w: 6.0,
 		h: 3.0,
+		altTitle: "alt text title",
 		altText: "this is the alt text content",
 
 		barDir: "bar",

demos/modules/demo_image.mjs

@@ -53,7 +53,7 @@ function genSlide01(pptx) {
 
 	// TOP: 2
 	slide.addText("Type: GIF", { x: 4.35, y: 0.6, w: 1.4, h: 0.4, color: "0088CC" });
-	slide.addImage({ x: 4.4, y: 1.05, w: 1.2, h: 1.2, path: IMAGE_PATHS.ccDjGif.path, altText: "this is a gif" });
+	slide.addImage({ x: 4.4, y: 1.05, w: 1.2, h: 1.2, path: IMAGE_PATHS.ccDjGif.path, altTitle: "GIF image", altText: "this is a gif" });
 
 	// TOP: 3
 	slide.addText("Type: base64 PNG", { x: 7.2, y: 0.6, w: 2.4, h: 0.4, color: "0088CC" });

src/core-interfaces.ts

@@ -426,6 +426,11 @@ export interface ImageProps extends PositionProps, DataOrPathProps {
 	 */
 	altText?: string
 	/**
+	 * Alt Text Title value ("A title can be read to a person with a disability to determine if they they wish to hear the description of the content.")
+	 * - PowerPoint: [right-click on an image] > "Edit Alt Text..."
+	 */
+	altTitle?: string
+	 /**
 	 * Flip horizontally?
 	 * @default false
 	 */
@@ -1327,7 +1332,12 @@ export interface IChartOpts
 	 * - PowerPoint: [right-click on a chart] > "Edit Alt Text..."
 	 */
 	altText?: string
-}
+	/**
+	 * Alt Text Title value ("A title can be read to a person with a disability to determine if they they wish to hear the description of the content.")
+	 * - PowerPoint: [right-click on an image] > "Edit Alt Text..."
+	 */
+	 altTitle?: string
+	}
 export interface IChartOptsLib extends IChartOpts {
 	_type?: CHART_NAME | IChartMulti[] // TODO: v3.4.0 - move to `IChartOpts`, remove `IChartOptsLib`
 }
@@ -1573,6 +1583,13 @@ export interface PresentationProps {
 	subject: string
 	title: string
 }
+export interface EncodingProps {
+	/**
+	 * Whether newlines should be encoded
+	 * @default false
+	 */
+    newlines?: boolean
+}
 // PRIVATE interface
 export interface IPresentationProps extends PresentationProps {
 	sections: SectionProps[]

src/gen-objects.ts

@@ -408,6 +408,7 @@ export function addImageDefinition(target: PresSlide, opt: ImageProps) {
 		w: intWidth || 1,
 		h: intHeight || 1,
 		altText: opt.altText || '',
+		altTitle: opt.altTitle || '',
 		rounding: typeof opt.rounding === 'boolean' ? opt.rounding : false,
 		sizing: sizing,
 		placeholder: opt.placeholder,

src/gen-utils.ts

@@ -3,7 +3,7 @@
  */
 
 import { EMU, REGEX_HEX_COLOR, DEF_FONT_COLOR, ONEPT, SchemeColor, SCHEME_COLORS } from './core-enums'
-import { IChartOpts, PresLayout, TextGlowProps, PresSlide, ShapeFillProps, Color, ShapeLineProps } from './core-interfaces'
+import { IChartOpts, PresLayout, TextGlowProps, PresSlide, ShapeFillProps, Color, ShapeLineProps, EncodingProps } from './core-interfaces'
 
 /**
  * Translates any type of `x`/`y`/`w`/`h` prop to EMU
@@ -74,12 +74,17 @@ export function getMix(o1: any | IChartOpts, o2: any | IChartOpts, etc?: any) {
 /**
  * Replace special XML characters with HTML-encoded strings
  * @param {string} xml - XML string to encode
+ * @param {EncodingProps} encodeOpts - encoding options
  * @returns {string} escaped XML
  */
-export function encodeXmlEntities(xml: string): string {
+export function encodeXmlEntities(xml: string, encodeOpts?: EncodingProps): string {
 	// NOTE: Dont use short-circuit eval here as value c/b "0" (zero) etc.!
 	if (typeof xml === 'undefined' || xml == null) return ''
-	return xml.toString().replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&apos;')
+	let res = xml.toString().replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&apos;')
+	if (encodeOpts?.newlines) {
+		res = res.replace(/\r\n/g, '&#10;').replace(/\r/g, '&#10;').replace(/\n/g, '&#10;')
+	}
+	return res
 }
 
 /**

src/gen-xml.ts

@@ -87,6 +87,8 @@ let imageSizingXml = {
 function slideObjectToXml(slide: PresSlide | SlideLayout): string {
 	let strSlideXml: string = slide._name ? '<p:cSld name="' + slide._name + '">' : '<p:cSld>'
 	let intTableNum: number = 1
+	let descrText: string
+	let titleText: string
 
 	// STEP 1: Add background color/image (ensure only a single `<p:bg>` tag is created, ex: when master-baskground has both `color` and `path`)
 	if (slide._bkgdImgRid) {
@@ -572,9 +574,11 @@ function slideObjectToXml(slide: PresSlide | SlideLayout): string {
 					width = cx,
 					height = cy
 
+				descrText = encodeXmlEntities(imageOpts.altText || slideItemObj.image, { newlines: true })
+				titleText = encodeXmlEntities(imageOpts.altTitle || '')
 				strSlideXml += '<p:pic>'
 				strSlideXml += '  <p:nvPicPr>'
-				strSlideXml += `<p:cNvPr id="${idx + 2}" name="Object ${idx + 1}" descr="${encodeXmlEntities(imageOpts.altText || slideItemObj.image)}">`
+				strSlideXml += `<p:cNvPr id="${idx + 2}" name="Object ${idx + 1}" descr="${descrText}" title="${titleText}">`
 				if (slideItemObj.hyperlink && slideItemObj.hyperlink.url)
 					strSlideXml += `<a:hlinkClick r:id="rId${slideItemObj.hyperlink._rId}" tooltip="${
 						slideItemObj.hyperlink.tooltip ? encodeXmlEntities(slideItemObj.hyperlink.tooltip) : ''
@@ -681,9 +685,11 @@ function slideObjectToXml(slide: PresSlide | SlideLayout): string {
 
 			case SLIDE_OBJECT_TYPES.chart:
 				let chartOpts = slideItemObj.options as IChartOpts
+				descrText = encodeXmlEntities(chartOpts.altText || '', { newlines: true })
+				titleText = encodeXmlEntities(chartOpts.altTitle || '')
 				strSlideXml += '<p:graphicFrame>'
 				strSlideXml += ' <p:nvGraphicFramePr>'
-				strSlideXml += `   <p:cNvPr id="${idx + 2}" name="Chart ${idx + 1}" descr="${encodeXmlEntities(chartOpts.altText || '')}"/>`
+				strSlideXml += `   <p:cNvPr id="${idx + 2}" name="Chart ${idx + 1}" descr="${descrText}" title="${titleText}"/>`
 				strSlideXml += '   <p:cNvGraphicFramePr/>'
 				strSlideXml += `   <p:nvPr>${genXmlPlaceholder(placeholderObj)}</p:nvPr>`
 				strSlideXml += ' </p:nvGraphicFramePr>'