Enable opening a tour recap in a separate window

Created on 29 August 2024, 3 months ago
Updated 10 September 2024, 2 months ago

Problem/Motivation

While a tour takes visitors through various steps, the visitors have to remember the steps so that they can replicate those steps later. This places a cognitive load on the visitor or forces them to take notes. It would be good if they had the option at the end of the tour to pop the tour points up in a separate window that they can refer to while actually doing the task which was trained by the tour.

I am tagging this as accessibility due to the cognitive load issue.

Steps to reproduce

Steps:
1. As a visitor, go through a tour
2. Arrive at the last stop on the tour

Desired result (option one): Three buttons:
Previous
End tour
List steps in new window

Desired result (option two): Two buttons:
Previous
End tour

and a check box:
List steps in new window

Current result: Two buttons:
Previous
End tour

Proposed resolution

On the last stop of a tour, add a button "List steps in new window". Clicking that button pops up a resizable, positionable browser window listing all of the tour steps.

Or, on the last stop of a tour, add a check box "List steps in new window". Checking that box before clicking End Tour pops up a resizable, positionable browser window listing all of the tour steps.

Remaining tasks

Decide which option to use.

User interface changes

API changes

Data model changes

✨ Feature request
Status

Postponed

Version

2.0

Component

User interface

Created by

πŸ‡ΊπŸ‡ΈUnited States charles belov San Francisco, CA, US

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Comments & Activities

  • Issue created by @charles belov
  • πŸ‡ΊπŸ‡ΈUnited States charles belov San Francisco, CA, US
  • First commit to issue fork.
  • πŸ‡ΊπŸ‡ΈUnited States smustgrave

    Oops not working on this one, wrong ticket.

  • Status changed to Postponed 3 months ago
  • πŸ‡ΊπŸ‡ΈUnited States smustgrave

    Correct me if I'm wrong but for this to work we would need something like πŸ› Add an "alt text" to tour tips describing the situation and the highlighted element Active added?

    Else that overview page would just be

    title
    body

    Excluding selector value because I imagine that wouldn't be useful to anyone.

  • πŸ‡ΊπŸ‡ΈUnited States charles belov San Francisco, CA, US

    Agreed. This is dependent on πŸ› Add an "alt text" to tour tips describing the situation and the highlighted element Active and I'm adding it as a related issue.

  • πŸ‡ΊπŸ‡ΈUnited States smustgrave

    Blocker landed.

    Decided we will stay using the label (now title) + body field, with the assumption the site admins are using descriptive titles.

  • πŸ‡ΊπŸ‡ΈUnited States thejimbirch Cape Cod, Massachusetts

    With the alt text approach, I feel like you would basically have to write the tour twice.

    An alternative approach could be to parse the tour yaml file completely. Looking at a simple tour:

    langcode: en
    status: true
    dependencies: {  }
    id: seo
    label: SEO
    routes:
      -
        route_name: entity.dashboard.canonical
        route_params:
          id: seo
    tips:
      seo_dashboard:
        id: seo_dashboard
        plugin: text
        label: 'SEO Dashboard'
        weight: -10
        position: 'auto'
        selector: null
        body: '<p>This dashboard gathers all the SEO-related features of Drupal with descriptions and links to configuring them.</p>'
      dashboard_section:
        id: dashboard_section
        plugin: text
        label: 'Dashboard Section'
        weight: -10
        position: 'auto'
        selector: .block-dashboard-text-block
        body: '<p>In each of these sections, you will find links to the installed SEO feature with instructions on how to use them.</p>'
      guided_tour:
        id: guided_tour
        plugin: text
        label: 'Guided Tour'
        weight: -10
        position: 'auto'
        selector: null
        body: '<p>Let''s continue the tour by visiting each of the SEO features of the site. First up, the <a href="/admin/config/search/seo-checklist?tour=1">SEO Checklist</a>.</p>'
    

    You could loop through the tips and output something like this:

    <h2>tip.*.label</h2>
    tip.*.body
    
  • πŸ‡ΊπŸ‡ΈUnited States thejimbirch Cape Cod, Massachusetts

    Drupal core also has Help Topics. Could that be part of the solution?

  • πŸ‡ΊπŸ‡ΈUnited States charles belov San Francisco, CA, US

    +1 for parsing the yaml tour as it ensures the steps and labels are in sync and no duplicate effort.

  • πŸ‡ΊπŸ‡ΈUnited States smustgrave

    Actually a -1 for that approach.

    1. We have removed all tours from the contrib module and placed into recipes
    2 The yml could easily not match what's in the database so what appears in the yml could be different then what appears on the actual tour.

  • πŸ‡ΊπŸ‡ΈUnited States charles belov San Francisco, CA, US

    Then could the separate window could be generated from the database? The source doesn't matter; what matters is that it be the same source.

  • πŸ‡ΊπŸ‡ΈUnited States smustgrave

    @thejimbirch we actually dropped the alt idea. We tweaked the tip form some to make it clear that site builders really should be using descriptive titles. With that assumption we can use title and body. But do need to determine where this link should go

    Don't want to distract from the actual content so think at the bottom probably would be best

    Thought about a hot key but people may not know about it then. But rough idea, probably would shrink the text and change to "View full tour"

  • πŸ‡ΊπŸ‡ΈUnited States thejimbirch Cape Cod, Massachusetts

    Nice idea. Maybe a external link style icon next to the close icon with the hover/title text you have there?

Production build 0.71.5 2024