Improve shape voiceover

[thekuoster]

Addresses #36

Summary

Updated the describe text for basic shapes and text to give more explanation. The generic Thing describe gives no information on sizing of shapes and other attributes other than type and color so subclasses need more explanation to get a full picture of what's there.

Changes:

• Add radius to Circle describe
• Add width and height to Rectangle describe
• Add font to Text describe
• Ensure that hex code is not interpreted as words

Screenshots of the change:

Checklist

• npm test passes
• Unit tests are included / updated
• Documentation has been updated where relevant

[anderoonies]

Looks good to me, we probably want to add tests for these in the individal shapes' tests for making sure that the shape produces the description we expect

[anderoonies]

How does toUpperCase() change the voiceover? Just curious

[thekuoster]

I'm not sure if this is the best fix, but if you use the voiceover for your example which has the color #560bad, it says the word "bad" when reading it. By adding the uppercase it reads each letter. I did notice that it does read #F72585 as "F seventy two thousand...," so I'm not sure how to fix that. The downside is that if you put in a color like white it comes out as WHITE. With the mac voiceover it still reads the word, but I think I read somewhere that different voiceovers might interpret that as "W...H...I...T...E". Think this would take more testing to figure out and we might end up wanting to write some sort of describe function for color.

[anderoonies]

interesting, i think that a describe function for color makes a lot of sense. ideally we'd be able to parse hex values and give them some sort of meaning ("red" instead of "#FF0000"), but that seems difficult.

alternatively we could move towards enforcing strings as colors instead of hex strings. all valid CSS colors are valid for the context, so you can say circle.color = 'red' or 'aqua' or whatever and it works.

as a strategy for naming colors, we could compute the distance to a named color, so #b30000 would have a distance of b8 - b3, 00 - 00, 00 - 00 from "dark red" #b80000

[anderoonies]

Here's a quick draft of that https://codehs.com/sandbox/andy/color-namer

[thekuoster]

This is super cool. I wonder what other people do and what's actually the most useful. I think for beginners just using names makes a lot of sense, but at some point we may need/want to handle the ability to get the hex, rgba, and hsl values for a color.

[anderoonies]

I think our HSL implementation and RGB -> hex in this library are broken, but we can definitely support those. I've been meaning to revisit Color soon.

[thekuoster]

Looks good to me, we probably want to add tests for these in the individal shapes' tests for making sure that the shape produces the description we expect

Yah, didn't have time to look into that yet, but I'll look into putting those tests in.

[zgalant]

what if you only convert to uppercase if it starts with "#" in it? On Fri, Mar 11, 2022 at 12:40 PM Emily Kuo ***@***.***> wrote: Looks good to me, we probably want to add tests for these in the individal shapes' tests for making sure that the shape produces the description we expect Yah, didn't have time to look into that yet, but I'll look into putting those tests in. — Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android. You are receiving this because you are subscribed to this thread.Message ID: ***@***.***> Zach Galant ***@***.*** |LinkedIn

[anderoonies]

This looks great, thanks for the tests. Merging it now, it will be in the next release!

[anderoonies]

@all-contributors please add @thekuoster for a11y and code

[allcontributors]

@anderoonies

I've put up a pull request to add @thekuoster! 🎉