🐛 Table column descriptions are fully displayed irrespective of their length

LavMatt commented 3 months ago

Describe the bug.

We are not applying any limitations to the default number of characters shown for column descriptions. Unlike other trimmed descriptions there is not another page where these descriptions cans be displayed more fully in isolation

Nevertheless when column descriptions are lengthy they can overwhelm the schema table.

To Reproduce

have a look at the xhibit_derived.all_offence table in find-moj-data

Expected Behaviour

Descriptions should be cut-off at some limit as default, with the option for a user to expand to see the full description

Additional context

No response

MatMoore commented 3 months ago

There are a couple of things causing this specific example

We do not pass the column descriptions through the markdown renderer, but in this case there is markdown, including long link URLs. I think we probably should allow markdown here.
One of them has a big ascii table, containing a long line without spaces. Again this isn't parsed properly, and I'm not even sure we have table markup supported at the moment. If we do, it might not render in a nice way within another table like this

In the cases where we do have long URLs or other long text that is wider than the column, we can use overflow-wrap: break-word to allow the lines to be broken, which will help a bit.

We can optionally use width overrides or a fixed table layout to prevent the table from being sized according to the content.

Regarding a "show more" button - I don't think there is a good design system component for this, but another team implemented something similar here: https://github.com/alphagov/govuk-design-system-backlog/issues/44#issuecomment-1674995951

If we implement this ourselves we just need to be careful that the hidden content is not still visible to assistive technology or focusable by keyboard.

MatMoore commented 2 months ago

Proof of concept for a keyboard navigable show more/show less component in JSFiddle https://jsfiddle.net/2qdkc7nv/

This uses a button rather than a link, so it can be activated by pressing space.

MatMoore commented 2 months ago

I think the above proof of concept is not viable in the end, because if we retain markdown rendering (or we pass arbitrary html to the component), then the content cannot easily be broken into two spans - at least not without careful consideration that would make the code very complex.

The approach assumes that either side of the ellipses we will have inline content, but this is not the case if we cut in half block level content, such as paragraph elements.

Here is my implementation for reference https://github.com/ministryofjustice/find-moj-data/compare/show-more-less-component

The other approach Matt tried is here https://github.com/ministryofjustice/find-moj-data/compare/main...DC-240-expand-collapse-text

This uses CSS a max-height to do the truncation, and the ellipsis is placed on a new line after the truncated text. The problem with this approach is it only changes the visual appearance, so we cannot make this accessible.

MatMoore commented 2 months ago

Next steps: edit the column-level metadata we scraped from data discovery tool

remove any table markdown syntax (this will not be rendered)
consider removing or rewording anything that will be incomprehensible outside of data engineering

MatMoore commented 2 months ago

Got 3 PRs to address this:

I didn't get as far as implementing an expand/collapse component (see above) but I think the combination of these PRs should be enough to resolve the issues in practice.

ministryofjustice / find-moj-data