[accessibility] make the default descriptive metadata accessible and allow customization to meet WCAG

[deborahgu]

Description

The (currently non-styleable) title, description, and last-modified display have real accessibility problems. They're non-resizeable, which is an accessibility bug in and of itself, but even the default is too small and low-contrast to meet basic accessibility requirements. At a minimum, please fix the contrast error on the description and date metadata; for full compliance this needs to be configurable but the document author.

• https://www.w3.org/TR/WCAG22/#resize-text
• https://www.w3.org/TR/WCAG22/#images-of-text
• https://www.w3.org/TR/WCAG22/#contrast-enhanced

Steps to reproduce

1. Create a view with a title and description
2. The resulting image has text size and contrast that violate WCAG.

Screenshot

Code sample

component container_student "my_app_view" {
            title "Lorem ipsum dolor sit amet"
            description "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore"
            include *
            autoLayout lr
       }

Configuration

No response

Severity

Major

Priority

I have no budget and there's no rush, please fix this for free

More information

This is both a bug in our legal ability to use the produced documents, and it is a bug for us, the creators, who literally can't read the descriptions on our own images. Thanks.

[simonbrowndotje]

When this change is released, you'll be able to customize the diagram metadata via a number of element styles; for example:

            element "Diagram:Title" {
                color black
                fontSize 50
            }
            element "Diagram:Description" {
                color black
                fontSize 30
            }
            element "Diagram:Metadata" {
                color black
                fontSize 30
            }