From ae35b5a8bd91f8d1ab4aa79bc1869b4c52d5ac99 Mon Sep 17 00:00:00 2001 From: Glenn Rice Date: Wed, 8 Oct 2025 07:03:04 -0500 Subject: [PATCH] Fix some issues with plots.pl and the graph tool. First, fix the alt attribute for TikZ and GD image types for plots.pl. The `image` method of `PGbasicmacros.pl` currently sets the `aria_description` with the value of the `alt` option if it is passed to the method, and it does so regardless of the plots image type. However, that is only used for `html` output with JSXGraph. Thus for TikZ or GD image types the alt attribute is lost. This makes it so that the `aria_description` is only set for `html` output, and for all other outputs the given alt tag is left in the `@alt_list` so that the later code that inserts the `` tag can get it and add it as an attribute to the `` tag. You can test this with the following MWE: ```perl DOCUMENT(); loadMacros('PGstandard.pl', 'PGML.pl', 'plots.pl', 'PGcourse.pl'); $plot = Plot(); $plot->add_function('x^2', 'x', -10, 10, color => 'blue'); $plot->image_type('tikz'); BEGIN_PGML [!graph of x^2!]{$plot}{300} END_PGML ENDDOCUMENT(); ``` With that example and the current code, the image will not have an alt attribute, but will with this pull request. If you remove the line that sets the image type to 'tikz', then the JSXGraph image will get the aria description (with the second fix below). Second, fix the aria description for both JSXGraph output of plots.pl and the graph tool. This is caused by the removal of the `description` option for the `JXG.Board` object in the JSXGraph library. I must have missed this when this happened three years ago. Although, it seems to have been done rather quietly, as this is not listed in the change log for JSXGraph. To fix this, I just do the same thing that the `description` option used to do, and add a visually hidden span that the graph is `aria-describedby`. Note that there is a new `aria-description` attribute that could be used in the future for this, but it is in a future aria specification, and I don't know how well supported it is at this point. Finally, fix some issues with GD output of the plots.pl macro. This is caused when an Plots::Plot object does not have the height explicitly set. For TikZ and JSXGraph output, the `size` method is called which determines the height if it is not set explicitly. So GD output should do the same. --- htdocs/js/GraphTool/graphtool.js | 9 ++++++++- lib/Plots/GD.pm | 14 +++++++------- lib/Plots/JSXGraph.pm | 7 ++++++- lib/Plots/Tikz.pm | 2 +- macros/core/PGbasicmacros.pl | 2 +- 5 files changed, 23 insertions(+), 11 deletions(-) diff --git a/htdocs/js/GraphTool/graphtool.js b/htdocs/js/GraphTool/graphtool.js index 8edb82c3c7..c674837746 100644 --- a/htdocs/js/GraphTool/graphtool.js +++ b/htdocs/js/GraphTool/graphtool.js @@ -69,7 +69,6 @@ window.graphTool = (containerId, options) => { if ('htmlInputId' in options) gt.html_input = document.getElementById(options.htmlInputId); const cfgOptions = { title: 'WeBWorK Graph Tool', - description: options.ariaDescription ?? 'Interactively graph objects', showCopyright: false, pan: { enabled: false }, zoom: { enabled: false }, @@ -116,6 +115,14 @@ window.graphTool = (containerId, options) => { const setupBoard = () => { gt.board = JXG.JSXGraph.initBoard(`${containerId}_graph`, cfgOptions); + + const descriptionSpan = document.createElement('span'); + descriptionSpan.id = `${containerId}_description`; + descriptionSpan.classList.add('visually-hidden'); + descriptionSpan.textContent = options.ariaDescription ?? 'Interactively graph objects'; + gt.board.containerObj.after(descriptionSpan); + gt.board.containerObj.setAttribute('aria-describedby', descriptionSpan.id); + gt.board.suspendUpdate(); // Move the axes defining points to the end so that the arrows go to the board edges. diff --git a/lib/Plots/GD.pm b/lib/Plots/GD.pm index 5b75c34640..800374a002 100644 --- a/lib/Plots/GD.pm +++ b/lib/Plots/GD.pm @@ -63,7 +63,8 @@ sub im_y { return unless defined($y); my $plots = $self->plots; my ($ymin, $ymax) = ($plots->axes->yaxis('min'), $plots->axes->yaxis('max')); - return int(($ymax - $y) * $plots->{height} / ($ymax - $ymin)); + (undef, my $height) = $plots->size; + return int(($ymax - $y) * $height / ($ymax - $ymin)); } sub moveTo { @@ -217,12 +218,11 @@ sub draw_circle_stamp { } sub draw { - my $self = shift; - my $plots = $self->plots; - my $axes = $plots->axes; - my $grid = $axes->grid; - my $width = $plots->{width}; - my $height = $plots->{height}; + my $self = shift; + my $plots = $self->plots; + my $axes = $plots->axes; + my $grid = $axes->grid; + my ($width, $height) = $plots->size; # Initialize image $self->im->interlaced('true'); diff --git a/lib/Plots/JSXGraph.pm b/lib/Plots/JSXGraph.pm index f4d386360f..6b531d8612 100644 --- a/lib/Plots/JSXGraph.pm +++ b/lib/Plots/JSXGraph.pm @@ -404,7 +404,6 @@ sub init_graph { my $JSXOptions = Mojo::JSON::encode_json({ title => $axes->style('aria_label'), - description => $axes->style('aria_description'), boundingBox => [ $xmin, $ymax, $xmax, $ymin ], axis => 0, showNavigation => $allow_navigation, @@ -497,6 +496,12 @@ sub init_graph { $self->{JSend} = ''; $self->{JS} = <<~ "END_JS"; const board = JXG.JSXGraph.initBoard(id, $JSXOptions); + const descriptionSpan = document.createElement('span'); + descriptionSpan.id = `\${id}_description`; + descriptionSpan.classList.add('visually-hidden'); + descriptionSpan.textContent = '${\($axes->style('aria_description'))}'; + board.containerObj.after(descriptionSpan); + board.containerObj.setAttribute('aria-describedby', descriptionSpan.id); board.suspendUpdate(); board.create('axis', [[$xmin, $xaxis_pos], [$xmax, $xaxis_pos]], $XAxisOptions); board.create('axis', [[$yaxis_pos, $ymin], [$yaxis_pos, $ymax]], $YAxisOptions); diff --git a/lib/Plots/Tikz.pm b/lib/Plots/Tikz.pm index 37cbcd6b78..08d18eacbf 100644 --- a/lib/Plots/Tikz.pm +++ b/lib/Plots/Tikz.pm @@ -221,7 +221,7 @@ sub get_plot_opts { } my $end_markers = ($start || $end) ? ", $start-$end" : ''; $marks = $self->get_mark($marks); - $marks = $marks ? $mark_size ? ", mark=$marks, mark size=${mark_size}px" : ", mark=$marks" : ''; + $marks = $marks ? $mark_size ? ", mark=$marks, mark size=${mark_size}pt" : ", mark=$marks" : ''; $linestyle =~ s/ /_/g; $linestyle = { diff --git a/macros/core/PGbasicmacros.pl b/macros/core/PGbasicmacros.pl index 94b8e5657c..6822f0f6b6 100644 --- a/macros/core/PGbasicmacros.pl +++ b/macros/core/PGbasicmacros.pl @@ -2928,9 +2928,9 @@ sub image { $image_item->{width} = $width if $out_options{width}; $image_item->{height} = $height if $out_options{height}; $image_item->{tex_size} = $tex_size if $out_options{tex_size}; - $image_item->axes->style(aria_description => shift @alt_list) if $out_options{alt}; if ($image_item->ext eq 'html') { + $image_item->axes->style(aria_description => shift @alt_list) if $out_options{alt}; $image_item->{description_details} = $description_details; push(@output_list, $image_item->draw); next;