cloudflare-docs icon indicating copy to clipboard operation
cloudflare-docs copied to clipboard

[Docs Site] Tab Switcher fixes

Open KianNH opened this issue 3 years ago • 1 comments
trafficstars

This PR fixes several bugs:

  1. A JavaScript Service Worker has two labels, one being js-sw

image

This is due to the un-necessary end conditional in tabs.html.

{{ end }} {{ if or (eq $link "js-esm") }}
  1. js and js-sw have tab-label active by default, even if not active or defaulted.

image

{{ if or (eq $link "js") }}
<a class="tab-label active" href="#" data-link="tab-{{$link}}" data-id="{{$unique_id}}">
        
{{ else if (eq $link "js-sw") }}
<a class="tab-label active" href="#" data-link="tab-{{$link}}" data-id="{{$unique_id}}">
  1. Defaults other than the first tab do not render correctly.

image

This is because the current code will always set the first tab to display as well as set the default to display.

// Set the first tab in a group to display
(tabs[0] as HTMLElement).style.display = "block";
  1. The actively selected tab is not highlighted.

image

This is because there is nothing to set this as active - this includes both the default tab and when selecting a tab.

  1. Aria labels.

The role aria label is meant for the path element so moved it to the appropriate place, as well as given it the graphics-symbol appropriate for logos.

  1. General HTML readability changes.

KianNH avatar Sep 16 '22 00:09 KianNH

cc @Ekwuno @WalshyDev

KianNH avatar Sep 16 '22 00:09 KianNH

⚠️ GitGuardian has uncovered 1 secret following the scan of your pull request.

Please consider investigating the findings and remediating the incidents. Failure to do so may lead to compromising the associated services or software components.

🔎 Detected hardcoded secret in your pull request
GitGuardian id Secret Commit Filename
4092891 Generic High Entropy Secret 44d16b918122df5e35fdd25fd2b97c3d3ef574e3 config.toml View secret
🛠 Guidelines to remediate hardcoded secrets
  1. Understand the implications of revoking this secret by investigating where it is used in your code.
  2. Replace and store your secret safely. Learn here the best practices.
  3. Revoke and rotate this secret.
  4. If possible, rewrite git history. Rewriting git history is not a trivial act. You might completely break other contributing developers' workflow and you risk accidentally deleting legitimate data.

To avoid such incidents in the future consider


🦉 GitGuardian detects secrets in your source code to help developers and security teams secure the modern development process. You are seeing this because you or someone else with access to this repository has authorized GitGuardian to scan your pull request.

Our GitHub checks need improvements? Share your feedbacks!

gitguardian[bot] avatar Oct 03 '22 11:10 gitguardian[bot]

Appreciate it @KianNH 👍

Tested this out and it's good to

WalshyDev avatar Oct 04 '22 04:10 WalshyDev