nhsuk / nhsapp-frontend

NHS App specific styles on top of nhsuk-frontend
MIT License
6 stars 0 forks source link

timeline component #92

Closed edwardscull closed 2 months ago

mikemonteith commented 3 months ago

Not sure about the semantics of this.

"Request medication" is a heading but then it has no content below it. Should be be looking at this being an ordered list instead?

image

Edit: I've just noticed that it is an ordered list!

mikemonteith commented 3 months ago

We are using colour to convey the past/present/future state. Do we need some markup for screen readers to do the same?

davidhunter08 commented 3 months ago

Not sure about the semantics of this.

"Request medication" is a heading but then it has no content below it. Should be be looking at this being an ordered list instead?

image

Edit: I've just noticed that it is an ordered list!

Good point @mikemonteith - in all the example timelines I've seen across gov, they use a heading, but I haven't seen one with a heading and no content beneath.

Maybe that example is a bad one (and a content problem?) and we need to change it? Also add guidance, eg: "it must have content beneath the heading".

davidhunter08 commented 3 months ago

We are using colour to convey the past/present/future state. Do we need some markup for screen readers to do the same?

I'm not sure. We can include this in the accessibility testing we're planning.

Note: It's not just using colour alone to convey past/present/future: bold text is used for present and different sized/shaped nodes are used for past and future.

davidhunter08 commented 3 months ago
Screenshot 2024-07-02 at 15 33 37

Looking at the HTML output makes me wonder if we can refactor the CSS to make it a bit cleaner. Possibly use a 'background: node-blue.svgon theli:before`?

What do you think @edwardscull @mikemonteith ?

edwardscull commented 3 months ago
Screenshot 2024-07-02 at 15 33 37

Looking at the HTML output makes me wonder if we can refactor the CSS to make it a bit cleaner. Possibly use a 'background: node-blue.svgon theli:before`?

What do you think @edwardscull @mikemonteith ?

Yes that would be cleaner for sure. It's an image that probably makes sense to be a background image.