feat(styles): allow arbitrary heading levels to be styled consistentl…

…y for TwoColumnPanel headers (#1454)
dequelabs · Apr 22, 2024 · 3ee3378 · 3ee3378
1 parent 8ee7748
commit 3ee3378
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 10 deletions.
diff --git a/docs/pages/components/TwoColumnPanel.mdx b/docs/pages/components/TwoColumnPanel.mdx
@@ -32,6 +32,10 @@ import {
 
 `TwoColumnPanel` takes in a set of columns, `ColumnLeft` and `ColumnRight` with the left column containing the list of items to choose from and the right column intended to be the currently selected item. It is expected that accessible names are provided for both of the left/right columns via `aria-label` or `aria-labelledby`.
 
+<Note>
+  The heading levels provided in the below examples are the typical heading levels used for `TwoColumnPanel`. The appropriate heading levels will need to be set within context of the content of which `TwoColumnPanel` is placed.
+</Note>
+
 ```jsx example
 function TwoColumnPanelExample() {
   const [selected, setSelected] = useState(1);
@@ -69,7 +73,9 @@ function TwoColumnPanelExample() {
   return (
     <TwoColumnPanel>
       <ColumnLeft aria-labelledby="sidebar">
-        <ColumnHeader id="sidebar">Items</ColumnHeader>
+        <ColumnHeader id="sidebar">
+          <h2>Items</h2>
+        </ColumnHeader>
         <nav aria-labelledby="sidebar">
           <ul>
             {items.map(item => (
@@ -152,7 +158,9 @@ function TwoColumnPanelGroupedItemsExample() {
   return (
     <TwoColumnPanel>
       <ColumnLeft aria-labelledby="group-heading">
-        <ColumnHeader id="group-heading">Grouped Items</ColumnHeader>
+        <ColumnHeader id="group-heading">
+          <h2>Grouped Items</h2>
+        </ColumnHeader>
         <ColumnList>
           <ColumnGroupHeader>
             <h3>Optional group heading</h3>

diff --git a/packages/styles/two-column-panel.css b/packages/styles/two-column-panel.css
@@ -138,22 +138,25 @@
   background: var(--two-column-panel-group-heading-background-color);
   text-transform: uppercase;
   font-size: var(--text-size-smaller);
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
   padding: var(--space-smallest) var(--space-small);
   color: var(--two-column-panel-group-heading-text-color);
   position: sticky;
   top: 0;
 }
 
-.TwoColumnPanel__GroupHeader h1,
-.TwoColumnPanel__GroupHeader h2,
-.TwoColumnPanel__GroupHeader h3,
-.TwoColumnPanel__GroupHeader h4,
-.TwoColumnPanel__GroupHeader h5,
-.TwoColumnPanel__GroupHeader h6 {
+.TwoColumnPanel__Header :is(h1, h2, h3, h4, h5, h6) {
+  color: inherit;
+  font-size: inherit;
+  font-weight: var(--font-weight-medium);
+  margin: 0;
+  padding: 0;
+}
+
+.TwoColumnPanel__GroupHeader :is(h1, h2, h3, h4, h5, h6) {
   color: inherit;
   font-size: var(--text-size-smaller);
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
   margin: 0;
   padding: 0;
 }