Adds accDescription to Gantt, draws tags to svg #2912
Conversation
| @@ -12,6 +12,7 @@ let includes = []; | |||
| let excludes = []; | |||
| let links = {}; | |||
| let title = ''; | |||
There was a problem hiding this comment.
While we're here, would it make sense to add the default "Gantt chart" text?
There was a problem hiding this comment.
I didn't end up adding the default here because this is one of the charts that renders its title as a visible element. There probably aren't a ton of gantt charts without titles in the wild, but I didn't want existing ones to suddenly display differently.
This does make me wonder, however, if the title will get read twice by an assistive device, since it is both a visible element and a title tag?
There was a problem hiding this comment.
Ah - good call! Hmm I'd have to take a look at the markup. If it's in the DOM twice then most likely it will be read twice.
There was a problem hiding this comment.
I'm not really a pro at navigating with VoiceOver 😬 , but when loading gantt.html in the demos folder, and navigating to the svg, I hear 'in a gantt diagram ${description text}, image', which I think is what we expect?
There was a problem hiding this comment.
I took a look as well, and you are correct! That is what we want. Since we have aria-labelledby="${title-id} ${description-id}" and role="image" it overrides everything else inside of the SVG. So, even though the text is in the DOM twice, it won't read the second one (which looks like this, right before the closing </svg> tag <text x="632" y="25" class="titleText">A Gantt Diagram</text>)
el-mapache
changed the title
|
Hello! Thank you working with this. We love accessibility so this is much appreciated! However, keeping the security risk in mind, we would suggest adding sanitization to user input. See the link for your reference: Once this is done, we will be happy to merge it. |
|
Of course, thanks for taking a look :) |
* Adds accDescription to demos/gantt.html
📑 Summary
This PR adds an
accDescriptionproperty to gantt charts, and creates a<title>tag from the gantt chart's title property.📏 Design Decisions
Following the already set pattern for adding accessibility to charts, setup in #2732
📋 Tasks
Make sure you
developbranch