Restaurant Finder example: accessibility of rating

[AutoSponge]

Given JSON

{
  "version": "v0.9",
  "updateDataModel": {
    "surfaceId": "default",
    "path": "",
    "value": {
      "title": "Szechuan Restaurants in New York",
      "items": [
        {
          "name": "Xi'an Famous Foods",
          "rating": "★★★★☆"
        }
      ]
    }
  }
}

In the React renderer, the current output is:

<span style="...">★★★★☆</span>

Expected output:

<span role="image" aria-label="rating: 4 out of 5 stars" style="...">★★★★☆</span>

Since this is sent as raw text, it doesn't seem to get mapped to a component (even if one existed). How does the system propose to provide a resolution of the JSON that sufficiently supports accessibility OR does the renderer need to derive intent from the JSON and provide that support?

If the responsibility falls on the renderer side, would you accept a pull request to make this change?

[Priyanshudotdev]

Hi @AutoSponge , I looked into this issue and understand the problem. It seems the renderer should handle accessibility for rating text like ★★★★☆ by adding proper aria-label support.

I’d like to work on this if that approach sounds good. Happy to open a PR.

[ditman]

This bug is probably a duplicate of #1410 (sorry, I found 1410 first!).

The problem is that the basic catalog element implementations are not using the accessibility attributes that the agent could be sending. Do you mind if we deduplicate this bug into #1410?