Alt text missing on catalog grid images

[bjhewitt]

Before proceeding, make sure there isn’t an existing issue for this bug.

• I have searched the existing issues and determined this is a new bug.

Expected Behavior

Figure images in the object catalog grid should include alt text.

Actual Behavior

Catalog object grid images have empty alt tag. Figures included throughout body do include alt text.

Steps to Reproduce

Alt text has been added to all figures in figures.yaml. I have also added alt text to one object in the objects.yaml object_list. When site is built (preview or build), grid image alt tags are empty

Version Numbers

1.0.0-rc.11

Web Browser

all

Relevant Terminal/Shell Output

No response

Supporting Information

Data and files available at https://github.com/bjhewitt/quire-cmog-roman-glassblowing

[geealbers]

Thanks for posting @bjhewitt. I agree, those images should definitely include their alt test. Until this is fixed in core Quire, there's a fix you can try on your own.

In _includes/components/table-of-contents/item/grid.js you'll find two instances of a tableOfContentsImage() function. First, update those two lines to pass the alt text into the function like this:

? tableOfContentsImage({ src: firstFigure.src, alt: firstFigure.alt })
? tableOfContentsImage({ src: firstObjectFigure.src, alt: firstObjectFigure.alt })

Then, in _includes/components/table-of-contents/item/image.js, declare the alt constant (line 14):

const { alt, src } = params

And finally, pass that in to the HTML markup that's being returned (line 20):

<img src="${ imgPath }" alt="${alt}" />

I tested this here and it worked for me, but let us know if it doesn't for you.