TACC UI Pattern Library

PyMdown Extensions: Tabbed

To style Python-Markdown Tabbed Extension.

♿ Accessibility Extras

  1. Focus on tab container. Verify it has focus outline.
  2. While focused on tab container, press ← and →. Verify tab switches.
  3. While on tab 1, focus on input field within. Verify tab container has no focus outline.
<div class="tabbed-set">

    <input id="__tabbed_1_1" name="__tabbed_1" type="radio" checked="checked">
    <label for="__tabbed_1_1">Tab 1</label>
    <div class="tabbed-content">
        <p>Tab Content 1</p>
        <p>
            <label>Focuable Element</label>
            <input type="text" />
        </p>
    </div>

    <input id="__tabbed_1_2" name="__tabbed_1" type="radio">
    <label for="__tabbed_1_2">Tab 2</label>
    <div class="tabbed-content">
        <p>Tab Content 2</p>
    </div>

    <input id="__tabbed_1_3" name="__tabbed_1" type="radio">
    <label for="__tabbed_1_3">Tab 3</label>
    <div class="tabbed-content">
        <p>Tab Content 3</p>
    </div>

</div>
 
{
  "shouldSkipPattern": true,
  "globalStyles": [
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.demo.css"
    },
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.base.css"
    }
  ],
  "cmsStyles": [
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.cms.css"
    }
  ],
  "docsStyles": [
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.docs.css"
    }
  ],
  "portalStyles": [
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.portal.css"
    }
  ],
  "subdir": "components",
  "shouldLoadDocs": true,
  "📝 shouldLoadDocs": "because only core-styles.docs.css loads this"
}