Title and/or label seem not to be working

[batpigandme]

Hi, Thanks so much for this great extension. I can't seem to get the title and label attributes to work, leading to a failure when I run accessibility checks (because there's no text for the link).

If I run it without manually setting the title or label, no default occurs:

text: "{{< iconify simple-icons bluesky>}}"

begets (just giving the outer HTML)

<iconify-icon inline="" icon="simple-icons:bluesky"></iconify-icon>

If I do

text: "{{< iconify simple-icons bluesky label='bluesky social'>}}"

I get

<iconify-icon inline="" icon="simple-icons:bluesky" bluesky="" social=""></iconify-icon>

I thought maybe it was an issue with the two words, but:

text: "{{< iconify simple-icons bluesky label='bluesky'>}}"

returns

<iconify-icon inline="" icon="simple-icons:bluesky" bluesky=""></iconify-icon>

The same occurs if I use title in place of label.

I'm using dev Quarto, and latest of the extension.

I took a look at the iconify docs, but wasn't able to suss out where/how it hooks in with their web component.

Ideally, one would be able to supply an aria-label (like one does for icon) elements, but that doesn't work in the YAML with text items.

Thanks for any help!

[mcanouil]

Thanks for the report although I am not quite sure to follow in which context you are using the extension. title and text refer to many things in Quarto.

Do you observe the same thing in regular content? YAML is very particular as it gets processed by Quarto and Pandoc.

[batpigandme]

Sorry! My bad. In this case, I'm using them in the footer (I have the same thing in both book and website projects).

The abbreviated YAML is:

website:
  page-footer:
    right:
      - icon: github
        href: https://github.com/batpigandme
        aria-label: My GitHub profile
      - icon: mastodon
        href: https://mstdn.social/@dataandme
        aria-label: My Mastodon account
      - text: "{{< iconify simple-icons bluesky label='bluesky social'>}}"
        href: https://bsky.app/profile/dataandme.bsky.social

You can add aria-label after the href for the iconify text, but it doesn't actually do anything.

      - text: "{{< iconify simple-icons bluesky label='bluesky social'>}}"
        href: https://bsky.app/profile/dataandme.bsky.social
        aria-label: My Bluesky Social profile

[mcanouil]

I can reproduce in a simple use of the shortcode. I'll try to fix the issue which seems to be in the Lua code.

{{< iconify simple-icons bluesky label="bluesky social">}}

Label/title are parsed and not added correctly.

<iconify-icon inline="" icon="simple-icons:bluesky" bluesky="" social=""></iconify-icon><

While unknown arguments are properly ignored.

{{< iconify simple-icons bluesky whatever="bluesky social">}}

<iconify-icon inline="" icon="simple-icons:bluesky"></iconify-icon>

Thanks again for the report.

[mcanouil]

In fact, the bug in the Lua caused the aria-label and title to not be there. There is always the two now as it was supposed to be.

<iconify-icon inline="" icon="fluent-emoji:exploding-head" style="font-size: 2em;" aria-label="Icon exploding-head from fluent-emoji Iconify.design set." title="Icon exploding-head from fluent-emoji Iconify.design set."></iconify-icon>

[mcanouil]

I also upgraded Iconify script to 2.0.0.

https://github.com/mcanouil/quarto-iconify/releases/tag/v2.0.0

[batpigandme]

Awesome! Thanks so much.