long image descriptions

Author: Alex-Jordan

lib/Plots/JSXGraph.pm

@@ -34,10 +34,15 @@ sub HTML {
 
 	my $imageviewClass = $self->plots->axes->style('jsx_navigation') ? '' : ' image-view-elt';
 	my $tabindex       = $self->plots->axes->style('jsx_navigation') ? '' : ' tabindex="0"';
+	my $details        = $self->plots->{description_details} =~ s/LONG-DESCRIPTION-ID/${name}_details/r;
+	my $aria_details   = $details ? qq! aria-details="${name}_details"! : '';
 
 	return <<~ "END_HTML";
-		<div id="jsxgraph-plot-$name" class="jxgbox plots-jsxgraph$imageviewClass"$tabindex
-			style="width: ${width}px; height: ${height}px;"></div>
+		<div class="image-container">
+			<div id="jsxgraph-plot-$name" class="jxgbox plots-jsxgraph$imageviewClass"$tabindex
+				style="width: ${width}px; height: ${height}px;"$aria_details></div>
+			$details
+		</div>
 		<script>
 		(async () => {
 			const jsxPlotDiv = document.getElementById('jsxgraph-plot-$name');

macros/core/PGML.pl

@@ -687,7 +687,7 @@ sub NOOP {
 		terminator         => qr/!\]/,
 		terminateMethod    => 'terminateGetString',
 		cancelNL           => 1,
-		options            => [ "source", "width", "height", "image_options" ]
+		options            => [ "source", "width", "height", "image_options", "long_description" ]
 	},
 	"[<" => {
 		type        => 'tag',
@@ -1484,12 +1484,20 @@ sub Text {
 
 sub Image {
 	my ($self, $item) = @_;
-	my $text          = $item->{text};
-	my $source        = $item->{source};
-	my $width         = $item->{width}         || '';
-	my $height        = $item->{height}        || '';
-	my $image_options = $item->{image_options} || {};
-	return (main::image($source, alt => $text, width => $width, height => $height, %$image_options));
+	my $text             = $item->{text};
+	my $source           = $item->{source};
+	my $width            = $item->{width}            || '';
+	my $height           = $item->{height}           || '';
+	my $image_options    = $item->{image_options}    || {};
+	my $long_description = $item->{long_description} || {};
+	return (main::image(
+		$source,
+		alt              => $text,
+		width            => $width,
+		height           => $height,
+		long_description => $long_description,
+		%$image_options
+	));
 }
 
 ######################################################################

macros/core/PGbasicmacros.pl

@@ -2778,8 +2778,9 @@ sub image {
 		tex_size => '',
 		valign   => 'middle',
 		# default value for alt is undef, since an empty string is the explicit indicator of a decorative image
-		alt             => undef,
-		extra_html_tags => '',
+		alt              => undef,
+		long_description => undef,
+		extra_html_tags  => '',
 	);
 	# handle options
 	my %out_options = %known_options;
@@ -2802,9 +2803,11 @@ sub image {
 	$tex_size = 1000 if $tex_size > 1000;
 
 	my $alt         = $out_options{alt};
+	my $desc        = $out_options{long_description};
 	my $width_ratio = $tex_size * (.001);
 	my @image_list  = ();
 	my @alt_list    = ();
+	my @desc_list   = ();
 	my $valign      = 'middle';
 	$valign = 'top'    if ($out_options{valign} eq 'top');
 	$valign = 'bottom' if ($out_options{valign} eq 'bottom');
@@ -2823,10 +2826,39 @@ sub image {
 	} else {
 		for my $i (@image_list) { push(@alt_list, $alt) }
 	}
+	if (ref($desc) =~ /ARRAY/) {
+		@desc_list = @{$desc};
+	} else {
+		for my $i (@image_list) { push(@desc_list, $desc) }
+	}
 
 	my @output_list = ();
 	while (@image_list) {
-		my $image_item = shift @image_list;
+		my $image_item          = shift @image_list;
+		my $description_details = '';
+		if ($desc) {
+			$description_details = tag(
+				'details',
+				'aria-live' => 'polite',
+				tag(
+					'summary',
+					class => 'my-1',
+					title => 'details',
+					tag(
+						'span',
+						class         => 'badge badge-info bg-secondary',
+						'aria-hidden' => 'true',
+						maketext('image description')
+					)
+					)
+					. tag(
+						'div',
+						id    => 'LONG-DESCRIPTION-ID',
+						class => 'bg-white py-2 px-3 my-2 border',
+						shift @desc_list
+					)
+			);
+		}
 		if (ref $image_item eq 'parser::GraphTool') {
 			push(
 				@output_list,
@@ -2846,6 +2878,7 @@ sub image {
 			$image_item->{ariaDescription} = shift @alt_list if $out_options{alt};
 
 			if ($image_item->ext eq 'html') {
+				$image_item->{description_details} = $description_details;
 				push(@output_list, $image_item->draw);
 				next;
 			}
@@ -2862,6 +2895,7 @@ sub image {
 				|| ref $image_item eq 'PGtikz');
 		my $imageURL = alias($image_item) // '';
 		$imageURL = ($envir{use_site_prefix}) ? $envir{use_site_prefix} . $imageURL : $imageURL;
+		my $id  = $main::PG->getUniqueName('img');
 		my $out = "";
 
 		if ($displayMode eq 'TeX') {
@@ -2889,15 +2923,25 @@ sub image {
 		{
 			my $altattrib = '';
 			if (defined $alt_list[0]) { $altattrib = 'alt="' . encode_pg_and_html(shift @alt_list) . '"' }
-			$out =
-				qq!<IMG SRC="$imageURL" class="image-view-elt $valign" tabindex="0" role="button"$width_attrib$height_attrib $out_options{extra_html_tags} $altattrib>!;
+			$out .= tag(
+				'div',
+				class => 'image-container',
+				qq!<IMG SRC="$imageURL" class="image-view-elt $valign" tabindex="0" aria-details="${id}_details" role="button"$width_attrib$height_attrib $out_options{extra_html_tags} $altattrib>!
+					. ($desc ? ($description_details =~ s/LONG-DESCRIPTION-ID/${id}_details/r) : '')
+			);
 		} elsif ($displayMode eq 'PTX') {
 			my $ptxwidth = ($width ? int($width / 6) : 80);
+			$out = qq!<image width="$ptxwidth%" source="$imageURL">!;
 			if (defined $alt) {
-				$out = qq!<image width="$ptxwidth%" source="$imageURL"><description>$alt</description></image>!;
-			} else {
-				$out = qq!<image width="$ptxwidth%" source="$imageURL" />!;
+				$out .= "\n<shortdescription>$alt</shortdescription>";
+			}
+			if (defined $desc) {
+				$out .= "\n<description>\n" . PTX_cleanup($desc) . "\n</description>";
+			}
+			if (defined $alt || defined $desc) {
+				$out .= "\n";
 			}
+			$out .= '</image>';
 		} else {
 			$out = "Error: PGbasicmacros: image: Unknown displayMode: $displayMode.\n";
 		}

t/build_PG_envir.pl

@@ -8,6 +8,8 @@
 
 my $macros_dir = "$ENV{PG_ROOT}/macros";
 
+use HTML::Entities;
+
 use WeBWorK::PG::Environment;
 use WeBWorK::PG;
 use PGcore;

t/tikz_test/tikz_image.t

@@ -23,13 +23,13 @@ END_TIKZ
 ok my $img = image($drawing), 'img tag is generated';
 
 like $img, qr!
-	^<IMG\s
+	^<div\sclass="img-container"><IMG\s
 	SRC="/pg_files/tmp/images/([a-z0-9_-]*)\.svg"\s
 	class="image-view-elt\smiddle"\s
 	tabindex="0"\s
 	role="button"\s
 	width="200"\s*
-	>$!x, 'img tag has correct format';
+	></div>$!x, 'img tag has correct format';
 
 # Note that the image file is not generated until after the `image($drawing)` call.
 my $image_file =