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]>

Author: dscho

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;

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>

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. */
     // {

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();
+});