Fixed: Use disclosure triangles for metadata blocks

Author: ahankinson

browser-tests/public-api.spec.ts

@@ -482,6 +482,47 @@ test("bolds ranges containing either page of a two-up spread", async ({page}) =>
     await expect(otherRange).toHaveClass(/is-current/);
 });
 
+test("uses separate controls for range navigation and metadata disclosure", async ({page}) => {
+    const name = "range-disclosure";
+    await page.route(`${origin}/api/${name}/manifest`, (route) => route.fulfill({json : {
+        ...manifest(name, 2),
+        structures : [ {
+            id : `${origin}/api/${name}/range/a`,
+            type : "Range",
+            label : {en : [ "Section A" ]},
+            metadata : [ {label : {en : [ "Composer" ]}, value : {en : [ "Anonymous" ]}} ],
+            items : [ {id : `${origin}/api/${name}/canvas/1`, type : "Canvas"} ]
+        } ]
+    }}));
+
+    await page.evaluate(async (url) => {
+        const diva = (window as any).diva;
+        await diva.setResource(url);
+        await diva.goToPage(1);
+    }, `${origin}/api/${name}/manifest`);
+    await page.getByRole("button", {name : "Contents"}).evaluate((button: HTMLButtonElement) => button.click());
+
+    const showInformation = page.getByRole("button", {name : "Show information for Section A", exact : true});
+    await expect(showInformation).toHaveAttribute("aria-expanded", "false");
+    await expect(page.getByText("Anonymous", {exact : true})).toHaveCount(0);
+
+    await showInformation.click();
+    await expect.poll(() => page.evaluate(() => (window as any).diva.getState().currentPageIndex)).toBe(1);
+    const hideInformation = page.getByRole("button", {name : "Hide information for Section A", exact : true});
+    await expect(hideInformation).toHaveAttribute("aria-expanded", "true");
+    await expect(page.getByText("Anonymous", {exact : true})).toBeVisible();
+    const metadataLabel = page.getByText("Composer", {exact : true});
+    await expect(metadataLabel).toHaveCSS("font-weight", "600");
+    await expect(metadataLabel).toHaveCSS("text-transform", "none");
+
+    await page.getByRole("button", {name : "Section A", exact : true}).click();
+    await expect.poll(() => page.evaluate(() => (window as any).diva.getState().currentPageIndex)).toBe(0);
+    await expect(page.getByText("Anonymous", {exact : true})).toBeVisible();
+
+    await hideInformation.click();
+    await expect(page.getByText("Anonymous", {exact : true})).toHaveCount(0);
+});
+
 test("indents nested ranges in the contents index", async ({page}) => {
     const name = "nested-ranges";
     await page.route(`${origin}/api/${name}/manifest`, (route) => route.fulfill({json : {

build/diva.debug.js

@@ -1407,7 +1407,7 @@ update msg model =
         UserClickedPageViewPrev ->
             handlePageViewStep -1 model
 
-        UserClickedRange rangeId maybeIndex ->
+        UserClickedRange maybeIndex ->
             let
                 nextModel =
                     { model
@@ -1419,7 +1419,6 @@ update msg model =
 
                                 Nothing ->
                                     model.selectedIndex
-                        , selectedRangeId = Just rangeId
                         , sidebarState = visibleSidebarState model
                         , thumbsInstantScroll = True
                     }
@@ -1594,6 +1593,18 @@ update msg model =
         UserToggledPageViewSidebar ->
             ( { model | pageViewSidebarVisible = not model.pageViewSidebarVisible }, Cmd.none )
 
+        UserToggledRangeMetadata rangeId ->
+            ( { model
+                | selectedRangeId =
+                    if model.selectedRangeId == Just rangeId then
+                        Nothing
+
+                    else
+                        Just rangeId
+              }
+            , Cmd.none
+            )
+
         UserToggledShiftByOne ->
             case model.viewMode of
                 OneUp ->

build/diva.esm.js

@@ -29,7 +29,7 @@ type Msg
     | UserClickedPageViewImageChoice Int
     | UserClickedPageViewNext
     | UserClickedPageViewPrev
-    | UserClickedRange String (Maybe Int)
+    | UserClickedRange (Maybe Int)
     | UserClickedSaveFilteredImage
     | UserClickedThumbnail Int
     | UserClickedZoomIn
@@ -53,6 +53,7 @@ type Msg
     | UserToggledMetadata
     | UserToggledPageViewFullscreen
     | UserToggledPageViewSidebar
+    | UserToggledRangeMetadata String
     | UserToggledShiftByOne
     | UserToggledSidebar
     | UserToggledThumbnails

build/diva.js

@@ -455,7 +455,7 @@ viewOtpRangeItem model canvasLabelMap range =
                 rangePrefix ++ labelText
 
         labelNode =
-            viewRangeButton False range.id maybeIndex resolvedLabel
+            viewRangeButton False maybeIndex resolvedLabel
 
         metadataBlock =
             viewRangeMetadata model.detectedLanguage range.metadata
@@ -465,16 +465,16 @@ viewOtpRangeItem model canvasLabelMap range =
         (labelNode :: metadataBlock)
 
 
-viewRangeButton : Bool -> String -> Maybe Int -> String -> Html Msg
-viewRangeButton isCurrent rangeId maybeIndex labelText =
+viewRangeButton : Bool -> Maybe Int -> String -> Html Msg
+viewRangeButton isCurrent maybeIndex labelText =
     button
         ([ classList
             [ ( "contents-button", True )
             , ( "ui-button", True )
             , ( "is-current", isCurrent )
             ]
          , type_ "button"
-         , Events.onClick (UserClickedRange rangeId maybeIndex)
+         , Events.onClick (UserClickedRange maybeIndex)
          ]
             ++ (if isCurrent then
                     [ attribute "aria-current" "location" ]
@@ -486,6 +486,39 @@ viewRangeButton isCurrent rangeId maybeIndex labelText =
         [ text labelText ]
 
 
+viewRangeDisclosure : Bool -> String -> String -> Html Msg
+viewRangeDisclosure isExpanded rangeId labelText =
+    button
+        [ HA.class "contents-disclosure ui-button"
+        , type_ "button"
+        , attribute "aria-expanded"
+            (if isExpanded then
+                "true"
+
+             else
+                "false"
+            )
+        , attribute "aria-label"
+            ((if isExpanded then
+                "Hide information for "
+
+              else
+                "Show information for "
+             )
+                ++ labelText
+            )
+        , Events.onClick (UserToggledRangeMetadata rangeId)
+        ]
+        [ text
+            (if isExpanded then
+                "▾"
+
+             else
+                "▸"
+            )
+        ]
+
+
 viewRangeItems : Model -> Dict String (Maybe Int) -> List RangeItem -> List (Html Msg)
 viewRangeItems model rangeIndexMap items =
     let
@@ -530,8 +563,8 @@ viewRangeMetadata language metadata =
 viewRangeNode : Model -> Dict String (Maybe Int) -> Range -> Html Msg
 viewRangeNode model rangeIndexMap range =
     let
-        maybeIndex =
-            lookupRangeIndex rangeIndexMap range.id
+        isExpanded =
+            model.selectedRangeId == Just range.id
 
         labelText =
             extractLabelFromLanguageMap model.detectedLanguage range.label
@@ -543,26 +576,41 @@ viewRangeNode model rangeIndexMap range =
             else
                 labelText
 
+        children =
+            viewRangeItems model rangeIndexMap range.items
+
         isCurrent =
             visibleCanvasIds model
                 |> List.any (\canvasId -> rangeContainsCanvas canvasId range)
 
+        maybeIndex =
+            lookupRangeIndex rangeIndexMap range.id
+
         labelNode =
-            viewRangeButton isCurrent range.id maybeIndex resolvedLabel
+            viewRangeButton isCurrent maybeIndex resolvedLabel
+
+        headingNode =
+            div
+                [ HA.class "contents-heading" ]
+                ((if List.isEmpty range.metadata then
+                    []
+
+                  else
+                    [ viewRangeDisclosure isExpanded range.id resolvedLabel ]
+                 )
+                    ++ [ labelNode ]
+                )
 
         metadataBlock =
-            if model.selectedRangeId == Just range.id then
+            if isExpanded then
                 viewRangeMetadata model.detectedLanguage range.metadata
 
             else
                 []
-
-        children =
-            viewRangeItems model rangeIndexMap range.items
     in
     li
         [ HA.class "contents-item" ]
-        (labelNode :: metadataBlock ++ children)
+        (headingNode :: metadataBlock ++ children)
 
 
 viewSidebarPane : SidebarState -> SidebarState -> Html Msg -> Html Msg

src/Main.elm

@@ -151,7 +151,6 @@
   font-size: var(--diva-font-lg);
   font-weight: 600;
   color: var(--diva-text-muted);
-  text-transform: uppercase;
   letter-spacing: 0.05em;
   line-height: 1.3;
 }

src/Msg.elm

@@ -181,6 +181,22 @@
   margin-bottom: 6px;
 }
 
+.contents-heading {
+  display: flex;
+  align-items: baseline;
+}
+
+.contents-disclosure {
+  flex: 0 0 1.25rem;
+  color: var(--diva-text-muted);
+  cursor: pointer;
+  text-align: center;
+}
+
+.contents-disclosure:hover {
+  color: var(--diva-accent);
+}
+
 .contents-meta {
   border: 1px solid var(--diva-dark-border);
   display: flex;