Fix the sidebar button on iPhones

As per https://webkit.org/b/22261#c68, the Safari browser never gives buttons the focus. This breaks the expectation of git-scm.com's sidebar button that is shown on small screens: clicking on it will never open that sidebar and navigation is made harder than necessary by that. The solution, as per the hint at the incredibly helpful post at https://stackoverflow.com/questions/42758815/safari-focus-event-doesnt-work-on-button-element#53157834 is to turn the <button> into a <div tabindex="1">. That way, it works even on iPhones. With minor style adjustments, the button even looks the same as before! Reported-by: Toon Claes <[email protected]> Signed-off-by: Johannes Schindelin <[email protected]>
Cykelero · Sep 29, 2024 · 7d3b019 · 7d3b019
1 parent 8aa0d06
commit 7d3b019
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 2 deletions.
diff --git a/assets/sass/sidebar.scss b/assets/sass/sidebar.scss
@@ -47,7 +47,7 @@ aside.sidebar.active {
     background-color: $black-3 !important;
     display: block;
     position: fixed;
-    padding: 2rem 0.4rem;
+    padding: 2rem 0rem;
     z-index: 1;
     border: none;
     left: 0;

diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html
@@ -1,5 +1,5 @@
 {{ $section := .Scratch.Get "section" }}
-<button class="sidebar-btn"></button>
+<div tabindex="1" class="sidebar-btn"></div>
 <aside class="sidebar" id="sidebar">
   <nav>
     <ul>

diff --git a/playwright.config.js b/playwright.config.js
@@ -57,6 +57,13 @@ module.exports = defineConfig({
       name: 'chrome',
       use: { ...devices['Desktop Chrome'], channel: 'chrome' },
     },
+    {
+      name: 'iPhone',
+      use: {
+        ...devices['iPhone 11'],
+      },
+    },
+
 
     /* Test against mobile viewports. */
     // {

diff --git a/tests/git-scm.spec.js b/tests/git-scm.spec.js
@@ -265,3 +265,19 @@ test('404', async ({ page }) => {
   // the usual navbar is shown
   await expect(page.getByRole('link', { name: 'Community' })).toBeVisible()
 })
+
+test('sidebar', async ({ page }) => {
+  await page.goto(`${url}community`);
+
+  test.skip(!await page.evaluate(() => matchMedia('(max-width: 940px)').matches),
+    'not a small screen');
+
+  const sidebarButton = page.locator('.sidebar-btn');
+  await expect(sidebarButton).toBeVisible();
+  await sidebarButton.click();
+
+  const about = page.getByRole('link', { name: 'About', exact: true });
+  await expect(about).toBeVisible();
+  await about.click();
+  await expect(page.getByRole('heading', { name: 'About - Branching and Merging' })).toBeVisible();
+});