Feed Example: Convert images to inline SVG

[frozenzia]

Fixes #2628
Possibly also w3c/wai-aria-practices#190 ? Was not clear to me the relation between aria-practices and wai-aria-practices.

Once this is OK, need to remember to deal with issue w3c/wai-aria-practices#225. Again, not sure about the relation, sorry if it shouldn't be mentioned here.

Ah, couple of points.

1. as suggested, I used radio-rating.html as "inspiration" for this fix. The CSS for that file included the following bits:

.restaurant-rating svg {
  forced-color-adjust: auto;
  touch-action: pan-y;
}

.restaurant-rating svg .star-none {
  stroke-width: 3px;
  stroke: #f8951d;
  fill-opacity: 0;
}

..., which I did not include / copy for the feed example, as they didn't seem necessary. But supposing that I've misunderstood something, I could be wrong about that.

2. Also just realized I've left .restaurant-star-img selector in the CSS and it's completely unnecessary.

Preview feed example in compare branch

Preview of feed example display page

Review checklist

• N/A: Editorial review
• N/A: [ ] Functional review
• Visual design review by reviewer_id
• Accessibility review by reviewer_id
• Code review by reviewer_id
• N/A: Test review by reviewer_id

---

WAI Preview Link (Last built on Wed, 28 Jun 2023 07:48:36 GMT).

[css-meeting-bot]

The ARIA Authoring Practices (APG) Task Force just discussed PR2729: Feed Example: Convert images to inline SVG by frozenzia.

The full IRC log of that discussion

<jugglinmike> Subtopic: PR2729: Feed Example: Convert images to inline SVG by frozenzia
<jugglinmike> github: https://github.com//pull/2729
<jugglinmike> Matt_King: We need visual review. I've partially tested with a screen reader using two browsers, but we should probably have additional verification from an accessibility standpoint (mostly the contrast). We also need someone to look at the code
<jugglinmike> dmontalvo: I can double-check this with a screen reader in Safari
<jugglinmike> Siri: if this can wait until the week of July 10, then I can review visually
<jugglinmike> Andrea_Cardona: I can review the code
<jugglinmike> Matt_King: Great. You're all assigned. Thank you!
<jugglinmike> jamesn: Heads up: I think the high-contrast is not right

[jnurthen]

IMO the SVG should recolour based on high contrast mode. It is not currently doing this.

[frozenzia]

@jnurthen, alright, I just tried to mimic the existing images. I'll look into "high contrast mode" and try to come up w/better colors.

[frozenzia]

@jnurthen, understand your comments better now that I learned what "high contrast mode" even is. Latest commit should fix it if I've understood things right. I don't have a Windows machine to test on, and actually Mac's "Invert colours" does not seem to trigger the media-query (for "forced-colors") I added, but is that okay? It does work as intended if I use Chrome and "Rendering" settings to manually emulate "forced-colors". If I've understood properly, that should then also work for Windows High Contrast Mode.

[a11ydoer]

The code change looks good to me.

[css-meeting-bot]

The ARIA Authoring Practices (APG) Task Force just discussed Feed Example: Convert images to inline SVG.

The full IRC log of that discussion

<jugglinmike> Subtopic: Feed Example: Convert images to inline SVG
<jugglinmike> github: https://github.com//pull/2729
<jugglinmike> Matt_King: James provided some good feedback to the author, but James is now on vacation. We would like someone to look at this, in particular, high-contrast mode
<jugglinmike> Jem: I reviewed it just now, but I didn't review for high-contrast mode
<jugglinmike> jongund: I can look at high-contrast mode
<jugglinmike> Matt_King: We'd ask Shirisha and Alyssa to review, previously
<jugglinmike> Jem: I've assigned you as a review, jongund

[jongund]

High contrast mode on windows works great on the inline SVG images.

[andreancardona]

Code review looks good

[mcking65]

Thank you @frozenzia!!