doc(pos-list): add table example

elements/CHANGELOG.md

@@ -13,6 +13,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
   - `pos-navigation` is now a more complex navigation widget, not just an input field.
   - It is planned to evolve into an Omnibox for searching and navigating in PodOS Browser.
 
+### Changes
+
+- [pos-list](../docs/elements/components/pos-list): Added storybook example using CSS grid and table aria roles
+
 ### Fixed
 
 - [pos-app-browser](../docs/elements/apps/pos-app-browser): prevent error message flashing up while uri is unset on hard refresh

storybook/stories/composition/2_list-composition.stories.mdx

@@ -10,7 +10,8 @@ import { Canvas, Meta, Story } from "@storybook/addon-docs/blocks";
 ## pos-list composition
 
 This is an example of how you can use `<pos-list>` element to list things
-related to a resource with a custom display.
+related to a resource with a custom display. The `ul` and `li` elements are used
+as appropriate semantic HTML elements.
 
 <Canvas withSource="open">
   <Story name="pos-list composition">
@@ -35,3 +36,48 @@ Skills:
     `}
   </Story>
 </Canvas>
+
+## Table example
+
+The `table`-related HTML elements have strict rules that prevent other elements
+such as `pos-list` being used within them. Instead we can make a table using CSS
+`grid` rules. The grid needs to be defined within each template as `pos-list`
+nests list items within `pos-resource` elements, which use shadow dom.
+
+<Canvas withSource="open">
+  <Story name="pos-list table">
+    {({ uri }) => html`
+<style>
+    [role="row"] {
+        display: grid;
+        grid-template-columns: 200px 600px;
+    }
+    .header {
+        font-weight: bold;
+    }
+    [role="cell"], [role="columnheader"] {
+        border: 1px solid grey;
+    }
+</style>
+<pos-resource uri=${uri} role="table" aria-labelledby="skills-caption">
+    <span role="caption" id="skills-caption">Table of skills</span>
+    <div role="row" class="header">
+        <div role="columnheader">Skill</div>
+        <div role="columnheader">URL</div>
+    </div>
+    <pos-list rel="http://schema.org/skills">
+        <template>
+            <div role="row">
+                <pos-list rel="http://www.w3.org/ns/solid/terms#publicId" role="cell">
+                    <template>
+                        <pos-label></pos-label>
+                    </template>
+                </pos-list>
+                <pos-value predicate="http://www.w3.org/ns/solid/terms#publicId" role="cell" /></pos-value>
+            <div>
+        </template>
+    </pos-list>
+</pos-resource>
+    `}
+  </Story>
+</Canvas>