Add aria-options for layout components

[mhkeller]

Fixes #71 and replaces #74.

Adds accessibility attributes. @maxblee and @patriciatiffany how does this look? I'm not sure if this is the best way to handle the title. I'm picturing the usage like this:

<svelte:fragment slot="title">
  <title>This chart shows etc.</title>
</svelte:fragment>

Is title also used for canvas in the same way or does it need to be different? Should there be defaults?

[maxblee]

That looks pretty good to me; I do think adding some aria attributes in as props seems like a good compromise between giving people control over attributes and the potential performance issues you were describing. My one suggestion would be to add a prop for aria-describedby as well.

My experience with <canvas> is pretty limited but I think the answer is yes and no? There isn't a title tag in canvas the way there is for svg, but screen-readers do announce fallback content inside <canvas> elements so (most?) screen-readers would announce

<canvas>Some fallback text</canvas>

as "Some fallback text." So it might make sense to put the title slot inside the <canvas> element, similar to how you've approached the title slot within <svg> elements?

I definitely think there shouldn't be defaults (other than undefined) for these props/slot. All of these attributes are so context-dependent that I don't think we'd be able to find decent defaults.

[patriciatiffany]

For the SVGs, the slot there works. Or <title>{title}</title> with the title passed in as a string could work as well-- would be simpler to use. Would you ever need to customize the title attributes, @maxblee?

I have limited experience with canvas too, but I agree that it would make more sense to have the title inside the element as an optional fallback text. Like with the SVG title, it's an alternative to setting aria-label directly on the element.

With the HTML one, I'm not sure about the use case for the title slot there. For my use cases, I would use the aria-label, or use aria-labelledby and pass in the id that corresponds to a caption. Would there be a case where a caption (or equivalent) is inside the layercake-layout-html div?

[mhkeller]

Thanks you both!

For the SVGs, the slot there works. Or <title>{title}</title> with the title passed in as a string could work as well-- would be simpler to use.

I was thinking of doing the svelte:fragment slot since I wasn't sure if an empty <title> tag was alright if the user passed nothing in. But I wasn't thinking and I could set it as a prop that conditionally renders. That'll be the simplest I think...

With the HTML one, I'm not sure about the use case for the title slot there. For my use cases, I would use the aria-label, or use aria-labelledby and pass in the id that corresponds to a caption. Would there be a case where a caption (or equivalent) is inside the layercake-layout-html div?

Nope I have no use case in mind! Was just putting it in there to be consistent with the others.

[maxblee]

For the SVGs, the slot there works. Or <title>{title}</title> with the title passed in as a string could work as well-- would be simpler to use. Would you ever need to customize the title attributes, @maxblee?

I do think there are a few cases where you'd want to have a slot instead of a prop for the <svg> title:

• If you're placing an aria-labelledby attribute on the SVG to point to the <title>, you'd want to be able to add an id attribute onto the <title> tag
• If you need a longer description of the SVG, you might want to include a <desc> tag alongside the <title> tag
• Internationalization: <title> tags can also have lang attributes, and you can place multiple <title> tags next to each other with different lang attributes

My instinct is that it would also make sense to have the title operate as a slot for <canvas>, since HTML is valid content for the <canvas> fallback text. Having a slot for SVG might also just be nice for consistency.

That said, I could see a case for having a title prop act as a fallback for a slot. Something like

<slot name="title">{#if title}{title}{/if}</slot>

With the HTML one, I'm not sure about the use case for the title slot there. For my use cases, I would use the aria-label, or use aria-labelledby and pass in the id that corresponds to a caption. Would there be a case where a caption (or equivalent) is inside the layercake-layout-html div?

I'm also not sure about the use-case for the title slot in HTML.

[mhkeller]

@maxblee that sounds good. for the title fallback, wouldn't you want this instead

<slot name="title">{#if title}<title>{title}</title>{/if}</slot>

[mhkeller]

Okay I think these are all done. I added aria-describedby let me know if anything else needs changing before this is merged! thanks for all the help!

[maxblee]

@maxblee that sounds good. for the title fallback, wouldn't you want this instead

<slot name="title">{#if title}<title>{title}</title>{/if}</slot>

Yeah.

Because canvas fallback text can support plain HTML, I think it probably makes sense to have a fallback slot for Canvas and Webgl that mirrors the structure of the Svg and ScaledSvg components. That way you could use e.g. lists or tables as fallback text. So instead of

<canvas {...attrs}>{fallbackText}</canvas>

you'd have something like

<canvas {...attrs}><slot name="fallback">{#if fallbackText}{fallbackText}{/if}</slot></canvas>

Otherwise this looks spot on. Thanks!

[mhkeller]

For the svg components, it defaults to putting the text in a <title> tag. Is there a sensible default for canvas or webgl components?

[maxblee]

I don't think so. From what I've read

<canvas>Some description</canvas>

is fine.

I think the benefit to having the fallbackText attribute is mainly that it allows you to render that example
without having to use svelte:fragment. But that's really not a big deal, since <canvas><div slot='fallback'>Some description</div></canvas> isn't meaningfully different.

[mhkeller]

Very good that makes sense. I'll work on the docs for this. I think I'll add an accessibility section in addition to adding information on props and slots for each of the layout components

[mhkeller]

One more change to put it. I'm told that the aria-* elements on the HTML div are rather meaningless and it should have a role='figure' or a role=something-else. One way to do this is expose the role prop for that element and if any of the aria-* props are set, set the role to "figure". Open to any thoughts on that or alternatives!

[mhkeller]

Thanks for everyone's help on this!

[patriciatiffany]

@mhkeller Thank you for being so responsive and thoughtful about this!

[mhkeller]

Thanks for all the feedback! Let me know how it goes and if it needs adjustment! Glad we got this figured out for now.