cds-snc / platform-forms-client

NextJS application that serves the public-facing website for Forms
https://forms-staging.cdssandbox.xyz/
MIT License
34 stars 13 forks source link

Accessibility - Italics use an emphasis tag #3951

Open jprince-cds opened 4 months ago

jprince-cds commented 4 months ago

Description

The only way I found to italicise some texts is the button “I” in the text editors.

But it just tags the text with an <em> without any semantic differentiation, and which means emphasis. I could not find a way to italicise a law or a title with <cite> for example.

Expected behaviour

Would it be possible to not use an emphasis semantic to italicise (as this is not the same than emphasis), and to provide a way to <cite> or <i> texts.

Otherwise this could result to a WCAG failure of SC 1.3.1.

Additional context

Reported in Freshdesk ticket 18070.

thiessenp-cds commented 4 months ago

My understanding of this ticket is the user is asking us to add the ability cite and quote text. To do this we would need to add new functionality for this. Probably as a button that semantically (and visually?) cites text and a button that quotes text. The behaviour of citing would be similar to em. The behaviour for quoting would similar to an anchor by taking a url to reference. For design we'd probably want to think about this. Adding two new buttons may add a bit of confusion clutter to the toolbar. Maybe we could add an advanced mode or something to toggle on to show these and future "advanced" buttons? Also we'd need to style the buttons and also probably style the outputted html.

For example, here is an idea of what two more buttons would roughly look like in the editor: Screenshot 2024-07-08 at 9 49 55 AM

Abi-Nada commented 4 months ago

@srtalbot to circle back with the client to confirm assumptions on requirements