New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Details (Hidden text) #44

Open
govuk-design-system opened this Issue Jan 12, 2018 · 6 comments

Comments

7 participants
@govuk-design-system
Copy link
Collaborator

govuk-design-system commented Jan 12, 2018

AKA: Hidden text, Expanding text area

Use this issue to discuss this component in the GOV.UK Design System.

@govuk-design-system govuk-design-system created this issue from a note in GOV.UK Design System Community Backlog (In progress) Jan 12, 2018

@govuk-design-system govuk-design-system moved this from In progress to Published in GOV.UK Design System Community Backlog Jan 12, 2018

@ignaciaorellana ignaciaorellana changed the title Details Details (Hidden text) Feb 21, 2018

@timpaul

This comment has been minimized.

Copy link
Contributor

timpaul commented Mar 16, 2018

In research HMRC have seen some users who are reluctant to interact with this component because it's styled as a link. They're worried that they will be taken away from the transaction and lose their data.

@stevenaproctor

This comment has been minimized.

Copy link
Collaborator

stevenaproctor commented Mar 16, 2018

@timpaul There are people who scan straight past it and do not interact with it. This could be because of time or lack of familiarity. But this means people can miss important content.

From an accessibility point of view, they are not treated as links by screen readers assistive technology so the experience is totally different.

A colleague wondered if anyone had thought to use the show-hide links, like in the manuals and learning to drive step-by-step guidance. Something like these screenshots.

image
image

@timpaul timpaul added the component label May 21, 2018

@SineadFluent

This comment has been minimized.

Copy link

SineadFluent commented Aug 31, 2018

When there is text to show/hide. Does anyone have research to support whether it is better to change the label of the link between 'more detail' and 'less detail' or if it is better to keep a link as 'more detail'? Seems like it would make more sense if the link describes what it is doing and say 'less detail' when extra text is being shown but keeping the link labeled 'more detail' may be less cognitive load for the user. Any thoughts?

@hannalaakso

This comment has been minimized.

Copy link
Member

hannalaakso commented Sep 14, 2018

@dashouse discovered that the native details can't be forced to display its contents when printed (unless element is already open on page load or was opened by user). This is because the visibility of the contents is toggled with open attribute in the markup, and this can't be controlled with CSS print styles.

Bug tracked here.

@hannalaakso hannalaakso referenced this issue Sep 14, 2018

Merged

Accordion component #958

87 of 92 tasks complete
@joelanman

This comment has been minimized.

Copy link
Member

joelanman commented Oct 15, 2018

Since we're using plus and minus in the Accordion component, I thought I'd see how Details would look with the same symbols, as the behaviour is very similar:

image

@edwardhorsford

This comment has been minimized.

Copy link

edwardhorsford commented Feb 8, 2019

It looks like if you pass text to the details element it goes directly inside a div. Should it go in a paragraph?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment