When a link name is repeated multiple times like "Add to Calendar", associate the link name with the title of the event

[lukefretwell]

Build

• staging
• master

Source

https://airtable.com/appRFUc45sF4yWFut/tbl51inE74gEWlB0x/viwG9G4vAjsjQEh4g/reczzFA8bveqA08Ge?blocks=hide

Describe the bug

A clear and concise description of what the bug is.

When a link name is repeated multiple times like "Add to Calendar", associate the link name with the title of the event so that a screen reader user is clear what they are adding to the calendar.

Recommendations

Use aria-labelled by to associate the link to the Event title. See reference: https://www.w3.org/WAI/GL/wiki/Using_aria-labelledby_for_link_purpose#:~:text=With%20the%20aria-labelledby%20attribute%2C%20authors%20can%20use%20a,purpose%20of%20the%20link%20unambiguous%20%28see%20example%201%29.

Screenshots

If applicable, add screenshots to help explain your problem.

Tasks

• [x] upgrade atcb to latest version
• [x] revamp webpack theme build to move new scripts to dist folder
• [x] enqueue new atcb javascript library
• [x] confirm that it works as the old library and if not fix it
• [x] add the aria label as described above
• [ ] check our other themes for custom clients that need this rolled out

[curtismchale]

I'm not sure I even see the option to do this in atcb so I've asked a question about how to accomplish the aria labels.

[curtismchale]

In response to my question they've added more information so that the name field is appended to the Add to Calendar text which gives you something like Add to Calendar: $name. I'll work on fixing the styling and rolling this out to our sites.

[curtismchale]

@lukefretwell @kevindherman this is up on Beta now, see the demo page.

Note, the styling is totally different and way more limited with the Add To Calendar Button (atcb) now. I did my best, but then modified the directions button to get it as close as I could. If you inspect the CSS you'll see that some of the values are wildly different to try and get it to look similar.

Luke, if you're going to try and mess with the CSS a bit the only values we have to work with in atcb are the ones with the :host prefix. We can't write custom CSS for it anymore.

If this looks okay, I need to check SR and Petaluma to make sure that their custom themes look as expected before this can be launched.

On the plus side, we are now on the latest atcb and will get the benefits of updates as we go.

[kevindherman]

@curtismchale @lukefretwell the directions icon looks to be styled differently:

Everything else seems good to me.

[curtismchale]

@kevindherman the ATCB button comes with it's own SVG file and I don't see a way to change it. We can use another Font Awesome icon that's not a Pro icon if you'd prefer. But we don't pay for Pro so I can't change the weight of the icon to better match the weight of the ATCB icon.

[kevindherman]

the ATCB button is fine with me @curtismchale but it doesn't match the "Directions" font size next to it. I just think they should match. So if the ATCB is predetermined the directions button should probably match up to ATCB. @lukefretwell what do you think?

[lukefretwell]

@curtismchale @kevindherman playing with the CSS, this seems to work. Not sure how to get them top-aligned.

.fa.fa-map-marker::before { content: "\f3c5"; margin-right: .8rem; } font-size: 1em; padding: .3em 1em; font-family: Roboto,sans-serif; }

Suggested icon:

<i class="fa-solid fa-map-pin"></i>

[curtismchale]

@lukefretwell @kevindherman revised version is up. If we're happy with it I can deploy it later today or tomorrow.

[kevindherman]

Definitely better @curtismchale. The height of the direction button still seems too big though.

That's my last comment on this, passing the baton to @lukefretwell.

[curtismchale]

@kevindherman you can see how far off it is from alignment here, 1px or so.

[curtismchale]

Deployed

Composer: https://github.com/proudcity/wp-proudcity/releases/tag/2024.03.26.1154 Builds: https://github.com/proudcity/proud-recipes/releases/tag/2024.03.26.1154