Table of contents: mobile, other improvements

[juanruitina]

Pattern to amend

Table of contents

Context

The is some tweaks we could apply to the table of contents on mobile:

• The table of contents looks rather misaligned due to x-padding.
• When placed in a column on the right on desktop, it shows up after the main content on mobile, becoming unaccessible. We could place it above the content, but in some cases there might be many links. Should we consider another toggle for this? How would it play with the sidebar toggle?
• Touch surface for links seems small.

Beyond mobile:

• When a link label wraps, it looks like two different links. Some margin beyond line height could work.
• In most cases, the heading should be a H2. When that's the case, it inherits weight 100, it really looks too thin. It wouldn't pass the APCA test (WIP).

Visual

How it is:

Some initial style suggestions:

[danielmutis]

WG:
@juanruitina and @danielmutis to look at how the mobile experience of this component could be improved.
Would also be good to identify if this component could be useful in any other situations.

Current designs for docs pages can be found here.

[syncronize-issues-to-jira]

Thank you for reporting us your feedback!

The internal ticket has been created: https://warthogs.atlassian.net/browse/WD-15230.

This message was autogenerated