Contrib.social

SEO: Tap targets are not sized appropriately

Open on Drupal.org →
Created on 22 November 2022, almost 2 years ago
Updated 31 July 2023, over 1 year ago

Thank you for your wonderful module. I have tackled Pagespeed insights and at 98%.

Problem/Motivation

In the https://pagespeed.web.dev/ report:

Tap targets are not sized appropriately 81% appropriately sized tap targets.

Interactive elements like buttons and links should be large enough (48x48px), and have enough space around them, to be easy enough to tap without overlapping onto other elements.

Current Result

<li class="toc-h3 toc-active" role="menuitem"> Size: 307x31

I have tried css, to no avail ..

.toc-h3 toc-active {
    height: 48px;
}

Proposed resolution

Please how can I increase the size to over 48px of the tap elements?

Most appreciated.

💬 Support request
Status

Fixed

Version

2.0

Component

Code

Created by

🇫🇷France liliplanet Cannes

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Comment over 1 year ago →
    🇫🇷France flocondetoile Lyon

    adding padding to the element, or a display: inline-block; to make the height effective, should do the trick

  • Comment over 1 year ago →
    System Message

    Automatically closed - issue fixed for 2 weeks with no activity.

  • Status changed to Fixed over 1 year ago
  • Comment over 1 year ago →
    🇫🇷France liliplanet Cannes

    Hi floconderoile, sorry I don't understand. Since the new version of toc.js find that the toc links are h3, they are huge.

    I tried adding the following css to the toc.css file:

    .toc toc-active {
    font-size: 12px;
}

    but still the links in appear in h3.

    Please how do I size the links and have padding to the element?

    Most appreciated 🌷

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024