Goal tabs should reflect the Goal title

Norric1Admin commented 5 years ago

The ‘3 Good Health and Well-being’ page shares the same page title as the home page and does not uniquely reflect the contents of page. Page titles that do not uniquely describe or introduce the page content means that some users may not be able to identify the purpose or topic of the page content. “When I activated the third goal ‘good health and wellbeing’ link, I was confused by the fact that the URL changed, even though the page title did not. <title>U.K. Indicators For The Sustainable Development Goals</title>

Norric1Admin commented 5 years ago

Accessibility tickets

LucyGwilliamAdmin commented 5 years ago

Description

The site Goal pages have a tab which reads 'U.K. Indicators...', whereas it should read 'Goal 3 - Education' (for example). All indicator tabs already have the format Indicator – Goal – description so it’s just a case of removing indicator - from the head.html.

Testing page: https://sdg.mango-solutions.com/a11y-goal-tab/

Screenshots

Before

After

Successfully tested on...

[x] Windows: IE11
[x] Windows: Chrome
[x] Windows: Firefox
[x] Windows: Edge
[x] macOS: Chrome
[x] macOS: Firefox
[x] iOS: Safari 9.3
[x] iOS: Chrome
[x] Samsung: Chrome
[x] Samsung: Samsung Internet

User feedback and problems encountered...

Chrome on Mac

The tab successfully shows Goal 1 - No poverty when a goal is selected:

However: it seems to break when an indicator is selected:

And it seems that it affects the colouring of the indicator page and also the heading image disappears (not sure if this is related):

@SavvasStephanides Yes I noticed this too. Think it occurs on all browsers. Trying to fix it now.

Norric1Admin commented 5 years ago

Indicator pages already have a specific tab - just remove the 'Indicator .._' preface and leave the Goal details when browsing the Goal pages.

Norric1Admin commented 5 years ago

Goal tabs should reflect the Goal title

Norric1Admin commented 5 years ago

@brockfanning Succeeded in changing the Goal icon with your help - no details though. Any thoughts? Test branch: https://sdg.mango-solutions.com/a11y-goal-tab/3/ https://github.com/ONSdigital/sdg-indicators/commit/bee45253dca6c41d1d8d3c0fb9f13d1745ecc65b Many thanks, Chris

brockfanning commented 5 years ago

I believe that means that {{ goal_number }} and {{ goal.short }} variables do not exist on goal pages. It looks like they only get set for indicator pages, in this file. I guess that file does not get included on goal pages.

Norric1Admin commented 5 years ago

Unable to use open-sdg remote_theme branches, so overriding _layouts/goal.html locally for now.

https://github.com/ONSdigital/sdg-indicators/commit/5c4b440c4c4f9225872d5bd1804361ee5a4b56df (added line 2 - {%- include indicator-variables.html -%})

Norric1Admin commented 5 years ago

This has resulted in the Goal tab reading "Goal 2 - ". An improvement, but I'll see if I can get the short description too.

Norric1Admin commented 5 years ago

This is working as hoped! Ready to be tested @LucyGwilliamAdmin @SavvasStephanides

Norric1Admin commented 5 years ago

This update also caused the indicator tab and Goal icon to break. Attempted fix: https://github.com/ONSdigital/sdg-indicators/commit/60dada91f34375bd04254774d21d9c4da01660de

Norric1Admin commented 5 years ago

This added the description but the icon is still broken and the tab number is missing. Reverting to the original tags as in https://github.com/ONSdigital/sdg-indicators/pull/3195 fixes the indicator page but breaks the goal page. How to get both working?

SavvasStephanides commented 5 years ago

@brockfanning What is the flag that indicates that a goal page is currently open? We have page.indicator to check when an indicator page is open, but not sure about a goal page. Thanks!

dougmet commented 5 years ago

page.indicator tells us that the page has that variable. You can look at the _indicators directory. You see that it has (e.g.)

---
indicator: 1.2.1
layout: indicator
permalink: /1-2-1/
---

I wonder if a better way would be to switch (or case-when) on the page.layout variable because this always exists and is more clear in the code (IMO). So something like:

<title>
{% case page.layout %}
  {% when 'indicator' %}
    {{ page_title | escape }}
  {% when 'goal' %}
    Goal {{ page.sdg_goal }} - {{ page.short }}
  {% else %}
    {{ site.title | escape }}
{% endcase %}
</title>

Or we could make title a function somehow. Might need to capture variables, I'm not sure. We could also code this logic somewhere else so that the page_title variable always works.

dougmet commented 5 years ago

To directly answer the question as to what's the equivalent to page.indicator for a goal. I'd say page.sdg_goal. If that exists it's a goal page because that's not stored in the indicator page header. Goal headers currently look like this:

---
title: Ensure inclusive and equitable quality education and promote lifelong learning
  opportunities for all
short: Quality Education
permalink: /4/
redirect_from: /quality-education/
sdg_goal: '4'
color: '#c5192d'
layout: goal
---

Norric1Admin commented 5 years ago

@dougmet So could we have...? if page.sdg_goal = https://github.com/ONSdigital/sdg-indicators/commit/f4859c6b44c28a8d94f379d74c81c3014d1ea78b + https://github.com/ONSdigital/sdg-indicators/commit/29b44260321e5d5efca046d1db233d8cda167fcb elsif page.indicator = https://github.com/ONSdigital/sdg-indicators/pull/3195/files

SavvasStephanides commented 5 years ago

Thanks @dougmet, I think that answers my question. The way to do this (I think) is:

if page.indicator exists
    title = "Indicator <indicator number> - Goal <goal number>
else if page.sdg_goal exists
    title = "Goal <goal number> - <Goal description>"
else
    title = "<Site name>"

EDIT: yes I think this should have been better coded to reflect that if page.indicator means that the current page is an indicator page etc. Not sure if we can do this with capture.

SavvasStephanides commented 5 years ago

Pull request (open-sdg): https://github.com/open-sdg/open-sdg/pull/231

Test: https://sdg.mango-solutions.com/test-goal-tab

LucyGwilliamAdmin commented 5 years ago

This is fixed in Open SDG v0.8.0 so closing this.

ONSdigital / sdg-indicators