search

carbon-design-system / carbon-for-ibm-dotcom

Carbon for IBM.com is based on the Carbon Design System for IBM
https://www.ibm.com/standards/carbon/
Apache License 2.0
268 stars 156 forks source link

[TOC - Default]: Web Components - TOC links navigate to a point where section titles are obscured in Mobile Chrome #8271

Closed QALosey closed 2 years ago

QALosey commented 2 years ago

Engineering info:

Description

Expected Results: When viewing the TOC - Default component on Mobile Chrome, selecting a TOC link will direct the user to the relevant section of the page with the section headline displayed just below the page header.   Actual Results: After selecting a TOC link in Mobile Chrome, the user is directed to the relevant section of the page, but at a point where the section headline is partially obscured by the page header.

Component(s) impacted

Table of Contents - Default TOC - Android

Browser

Chrome

Carbon for IBM.com version

v1.16.0-rc.1

Severity

Severity 3 = The problem is visible or noticeable to users but does not impede the usability or functionality. Affects minor functionality, has a workaround.

Application/website

https://carbon-design-system.github.io/carbon-for-ibm-dotcom/next/web-components/

Package

@carbon/ibmdotcom-web-components

CodeSandbox example

https://carbon-design-system.github.io/carbon-for-ibm-dotcom/next/web-components/?path=/story/components-table-of-contents--default

Steps to reproduce the issue (if applicable)

  1. Open https://carbon-design-system.github.io/carbon-for-ibm-dotcom/next/web-components/?path=/story/components-table-of-contents--default on an Android device in Chrome browser
  2. Select 'Canvas' to view the TOC web component
  3. Open the drop down and select a content item
  4. Observe that the user is navigate to the relevant section of the page, but the section headline is partially obscured

Release date (if applicable)

No response

Code of Conduct

proeung commented 2 years ago

@QALosey Thanks for opening this bug issue!

@annawen1 Could this issue be related to https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8240, where separation of the scrolling logic from the dotcomshell component should apply the correct offset position value?

annawen1 commented 2 years ago

@proeung yeah I was thinking that, since this was found in the TOC story itself I thought maybe it would be better to have this ticket opened. They seem related but not sure until we dive into that work.

proeung commented 2 years ago

@andy-blum Can you take a look at this issue and see if the solution that you have for (https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8240) will address this TOC overlapping issue that @QALosey noted above as well?

andy-blum commented 2 years ago

@proeung @QALosey This isn't really a bug in the javascript. The issue is that the headings don't have the proper amount of padding/margin to prevent being overlapped.

The component @QALosey linked to:

We can see the <a> element scrolls all the way to the top of the page as the .scrollTo code dictates, but the heading element doesn't have enough padding to pass the bottom of the ToC selector.

Screen Shot 2022-03-02 at 2 22 34 PM Screen Shot 2022-03-02 at 2 22 45 PM

The same component in the dotcom-shell

Again, the <a> is all the way at the top of the page, but the heading/content element has significantly more spacing above it.

Screen Shot 2022-03-02 at 2 24 29 PM Screen Shot 2022-03-02 at 2 24 49 PM

I don't know if there are specific content guidelines around how to implement the ToC, but I don't think this requires a codefix.

QALosey commented 2 years ago

@andy-blum @proeung So if no code fix is required, what should the next step be? Closing this ticket, and opening a new one regarding content guidelines and the need for additional padding/margin space for the headers when implementing a TOC?

proeung commented 2 years ago

@kennylam @oliviaflory After speaking to our team, it looks like this issue is related to the TOC content headings where they don't have the proper amount of padding/margin to prevent being overlapped. Feels like this work might be better addressed by your team as you can indicate the proper spacing needed for the storybook preview side.

I'm going to take our Innovation team out of this issue and add you guys to it instead.