Address review feedback

- Return early from the layer card key handler when the event came from a
  nested control. The card is a role="button" wrapper that called
  preventDefault on Enter, which cancelled the native activation of every
  action button inside it, the new palette button included.
- Add an e2e test that opens the Style panel from the card by Enter and by
  Space. It fails without the guard above.
- Match the Style panel aside by exact accessible name, so the collapsed
  rail ("Layer style (collapsed)") cannot satisfy the default substring
  match and mask the initial toHaveCount(0) assertion.
- Note in the user guide that the palette button appears only when the
  built-in Style panel is enabled, since onOpenStylePanel is optional.

Author: giswqs

apps/geolibre-desktop/src/components/panels/LayerPanel.tsx

@@ -3210,6 +3210,10 @@ export function LayerPanel({
                     aria-pressed={selectedLayerIds.has(layer.id)}
                     onClick={(e) => handleLayerSelection(e, layer.id)}
                     onKeyDown={(e) => {
+                      // Only act on the card itself: preventDefault here would
+                      // otherwise cancel the Enter activation of the action
+                      // buttons nested inside it.
+                      if (e.target !== e.currentTarget) return;
                       if (e.key === "Enter" || e.key === " ") {
                         e.preventDefault();
                         setSelectedLayerIds(new Set([layer.id]));

docs/user-guide/layers.md

@@ -14,7 +14,7 @@ The **Layers panel** on the left lists every layer in the project, from the topm
 
 Each layer exposes a set of actions:
 
-- **Open Style panel**: use the palette button on the layer card to select the layer and open its styling controls.
+- **Open Style panel**: when the built-in Style panel is enabled, use the palette button on the layer card to select the layer and open its styling controls.
 - **Zoom to layer**: fit the map to the layer's extent (for layers whose bounds are known).
 - **Identify features**: click features on the map to see their attributes in a popup. On a raster layer this reads the pixel value instead, and on a multiband raster it also builds a [spectral profile](styling.md#spectral-profile).
 - **Labels**: toggle text labels for vector layers that have a label field.

e2e/layer-panel.spec.ts

@@ -117,11 +117,37 @@ test("opens the selected layer in the Style panel from its card", async ({ page
   await dropGeoJson(page, "second", FIXTURE_TEXT);
   await expect(layerRow(page, "second")).toBeVisible();
 
-  const stylePanel = page.getByRole("complementary", { name: "Layer style" });
+  // Exact, so the collapsed rail ("Layer style (collapsed)") cannot satisfy the
+  // default substring match.
+  const stylePanel = page.getByRole("complementary", { name: "Layer style", exact: true });
   await expect(stylePanel).toHaveCount(0);
 
   await layerRow(page, "first").getByRole("button", { name: "Open Style panel" }).click();
 
   await expect(stylePanel).toBeVisible();
   await expect(stylePanel.getByText("Style - first", { exact: true })).toBeVisible();
 });
+
+test("opens the Style panel from the layer card by keyboard", async ({ page }) => {
+  await page.setViewportSize({ width: 768, height: 720 });
+  await waitForMap(page);
+  await dropGeoJson(page, "first", FIXTURE_TEXT);
+  await expect(layerRow(page, "first")).toBeVisible();
+  await dropGeoJson(page, "second", FIXTURE_TEXT);
+  await expect(layerRow(page, "second")).toBeVisible();
+
+  const stylePanel = page.getByRole("complementary", { name: "Layer style", exact: true });
+  const styleButton = (name: string) =>
+    layerRow(page, name).getByRole("button", { name: "Open Style panel" });
+
+  // The card is a role="button" wrapper; its key handler must not swallow the
+  // activation of the action buttons nested inside it.
+  await styleButton("first").focus();
+  await page.keyboard.press("Enter");
+  await expect(stylePanel).toBeVisible();
+  await expect(stylePanel.getByText("Style - first", { exact: true })).toBeVisible();
+
+  await styleButton("second").focus();
+  await page.keyboard.press("Space");
+  await expect(stylePanel.getByText("Style - second", { exact: true })).toBeVisible();
+});