Skip to content

Commit fc4257e

Browse files
committed
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 `<image>` tag can get it and add it as an attribute to the `<image>` 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 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 not 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.
1 parent bab8339 commit fc4257e

File tree

4 files changed

+22
-10
lines changed

4 files changed

+22
-10
lines changed

htdocs/js/GraphTool/graphtool.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,6 @@ window.graphTool = (containerId, options) => {
6969
if ('htmlInputId' in options) gt.html_input = document.getElementById(options.htmlInputId);
7070
const cfgOptions = {
7171
title: 'WeBWorK Graph Tool',
72-
description: options.ariaDescription ?? 'Interactively graph objects',
7372
showCopyright: false,
7473
pan: { enabled: false },
7574
zoom: { enabled: false },
@@ -116,6 +115,14 @@ window.graphTool = (containerId, options) => {
116115

117116
const setupBoard = () => {
118117
gt.board = JXG.JSXGraph.initBoard(`${containerId}_graph`, cfgOptions);
118+
119+
const descriptionSpan = document.createElement('span');
120+
descriptionSpan.id = `${containerId}_description`;
121+
descriptionSpan.classList.add('visually-hidden');
122+
descriptionSpan.textContent = options.ariaDescription ?? 'Interactively graph objects';
123+
gt.board.containerObj.after(descriptionSpan);
124+
gt.board.containerObj.setAttribute('aria-describedby', descriptionSpan.id);
125+
119126
gt.board.suspendUpdate();
120127

121128
// Move the axes defining points to the end so that the arrows go to the board edges.

lib/Plots/GD.pm

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,8 @@ sub im_y {
6363
return unless defined($y);
6464
my $plots = $self->plots;
6565
my ($ymin, $ymax) = ($plots->axes->yaxis('min'), $plots->axes->yaxis('max'));
66-
return int(($ymax - $y) * $plots->{height} / ($ymax - $ymin));
66+
(undef, my $height) = $plots->size;
67+
return int(($ymax - $y) * $height / ($ymax - $ymin));
6768
}
6869

6970
sub moveTo {
@@ -217,12 +218,11 @@ sub draw_circle_stamp {
217218
}
218219

219220
sub draw {
220-
my $self = shift;
221-
my $plots = $self->plots;
222-
my $axes = $plots->axes;
223-
my $grid = $axes->grid;
224-
my $width = $plots->{width};
225-
my $height = $plots->{height};
221+
my $self = shift;
222+
my $plots = $self->plots;
223+
my $axes = $plots->axes;
224+
my $grid = $axes->grid;
225+
my ($width, $height) = $plots->size;
226226

227227
# Initialize image
228228
$self->im->interlaced('true');

lib/Plots/JSXGraph.pm

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -404,7 +404,6 @@ sub init_graph {
404404

405405
my $JSXOptions = Mojo::JSON::encode_json({
406406
title => $axes->style('aria_label'),
407-
description => $axes->style('aria_description'),
408407
boundingBox => [ $xmin, $ymax, $xmax, $ymin ],
409408
axis => 0,
410409
showNavigation => $allow_navigation,
@@ -497,6 +496,12 @@ sub init_graph {
497496
$self->{JSend} = '';
498497
$self->{JS} = <<~ "END_JS";
499498
const board = JXG.JSXGraph.initBoard(id, $JSXOptions);
499+
const descriptionSpan = document.createElement('span');
500+
descriptionSpan.id = `\${id}_description`;
501+
descriptionSpan.classList.add('visually-hidden');
502+
descriptionSpan.textContent = '${\($axes->style('aria_description'))}';
503+
board.containerObj.after(descriptionSpan);
504+
board.containerObj.setAttribute('aria-describedby', descriptionSpan.id);
500505
board.suspendUpdate();
501506
board.create('axis', [[$xmin, $xaxis_pos], [$xmax, $xaxis_pos]], $XAxisOptions);
502507
board.create('axis', [[$yaxis_pos, $ymin], [$yaxis_pos, $ymax]], $YAxisOptions);

macros/core/PGbasicmacros.pl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2928,9 +2928,9 @@ sub image {
29282928
$image_item->{width} = $width if $out_options{width};
29292929
$image_item->{height} = $height if $out_options{height};
29302930
$image_item->{tex_size} = $tex_size if $out_options{tex_size};
2931-
$image_item->axes->style(aria_description => shift @alt_list) if $out_options{alt};
29322931

29332932
if ($image_item->ext eq 'html') {
2933+
$image_item->axes->style(aria_description => shift @alt_list) if $out_options{alt};
29342934
$image_item->{description_details} = $description_details;
29352935
push(@output_list, $image_item->draw);
29362936
next;

0 commit comments

Comments
 (0)