sphinx-filter-tabs 0.7.0__py3-none-any.whl → 0.9.2__py3-none-any.whl

filter_tabs/extension.py

@@ -3,7 +3,6 @@
 #
 
 # --- Imports ---
-# Ensures that all type hints are treated as forward references, which is standard practice.
 from __future__ import annotations
 
 import re
@@ -17,24 +16,16 @@ from sphinx.application import Sphinx
 from sphinx.util import logging
 from sphinx.writers.html import HTML5Translator
 
-# Used for type hinting to avoid circular imports and improve code clarity.
 from typing import TYPE_CHECKING, Any, Dict, List
-
-# Imports the package version, dynamically read from the installed package's metadata.
 from . import __version__
 
-# A block that only runs when a type checker is running, not at runtime.
-# This avoids potential runtime errors from importing types that may not be available.
 if TYPE_CHECKING:
     from sphinx.config import Config
     from sphinx.environment import BuildEnvironment
 
 # --- Constants ---
-# A dedicated UUID namespace ensures that the same tab name will always produce
-# the same unique identifier. This is a crucial security measure to prevent CSS injection.
 _CSS_NAMESPACE = uuid.UUID('d1b1b3e8-5e7c-48d6-a235-9a4c14c9b139')
 
-# Centralizing CSS class names makes them easy to manage and prevents typos.
 SFT_CONTAINER = "sft-container"
 SFT_FIELDSET = "sft-fieldset"
 SFT_LEGEND = "sft-legend"
@@ -46,28 +37,32 @@ COLLAPSIBLE_SECTION = "collapsible-section"
 COLLAPSIBLE_CONTENT = "collapsible-content"
 CUSTOM_ARROW = "custom-arrow"
 
-# --- Logger ---
-# A dedicated logger for this extension, following Sphinx's best practices.
-# This allows for clean, configurable logging output.
 logger = logging.getLogger(__name__)
 
 # --- Custom Nodes ---
-# Each custom node corresponds to a specific part of the component's HTML structure.
-# This allows for fine-grained control over the final HTML output via visitor functions.
-
-# The ContainerNode is essential for applying CSS Custom Properties via the 'style' attribute.
-# The default docutils container doesn't reliably render the style attribute, so this
-# custom node and its visitor function ensure the theming mechanism works correctly.
 class ContainerNode(nodes.General, nodes.Element):
     pass
 
-class FieldsetNode(nodes.General, nodes.Element): pass # For semantic grouping.
-class LegendNode(nodes.General, nodes.Element): pass # For accessibility.
-class RadioInputNode(nodes.General, nodes.Element): pass # The functional core for tab switching.
-class LabelNode(nodes.General, nodes.Element): pass # The visible, clickable tab titles.
-class PanelNode(nodes.General, nodes.Element): pass # The containers for tab content.
-class DetailsNode(nodes.General, nodes.Element): pass # For collapsible sections.
-class SummaryNode(nodes.General, nodes.Element): pass # The clickable title of a collapsible section.
+class FieldsetNode(nodes.General, nodes.Element): 
+    pass
+
+class LegendNode(nodes.General, nodes.Element): 
+    pass
+
+class RadioInputNode(nodes.General, nodes.Element): 
+    pass
+
+class LabelNode(nodes.General, nodes.Element): 
+    pass
+
+class PanelNode(nodes.General, nodes.Element): 
+    pass
+
+class DetailsNode(nodes.General, nodes.Element): 
+    pass
+
+class SummaryNode(nodes.General, nodes.Element): 
+    pass
 
 
 # --- Renderer Class ---
@@ -85,7 +80,7 @@ class FilterTabsRenderer:
         self.temp_blocks: list[nodes.Node] = temp_blocks
 
     def render_html(self) -> list[nodes.Node]:
-        """Constructs the complete docutils node tree for the HTML output."""
+        """Constructs the complete, W3C valid, and ARIA-compliant docutils node tree."""
         # Ensure a unique ID for each filter-tabs instance on a page.
         if not hasattr(self.env, 'filter_tabs_counter'):
             self.env.filter_tabs_counter = 0
@@ -104,79 +99,98 @@ class FilterTabsRenderer:
         }
         style_string = "; ".join([f"{key}: {value}" for key, value in style_vars.items()])
 
-        # If debug mode is on, log the generated ID and styles for easier troubleshooting.
+        # If debug mode is on, log the generated ID and styles.
         if config.filter_tabs_debug_mode:
             logger.info(f"[sphinx-filter-tabs] ID: {group_id}, Styles: '{style_string}'")
 
         # Create the main container node with the inline style for theming.
         container = ContainerNode(classes=[SFT_CONTAINER], style=style_string)
 
-        # Build the semantic structure using fieldset and a hidden legend for accessibility.
+        # Build the semantic structure using fieldset and a hidden legend.
         fieldset = FieldsetNode()
         legend = LegendNode()
         legend += nodes.Text(f"Filter by: {', '.join(self.tab_names)}")
         fieldset += legend
-
-        # --- Backward-compatible CSS Handling ---
-        # Generate the dynamic CSS that handles the core filtering logic.
+        
+        # --- CSS Generation ---
         css_rules = []
-        for tab_name in self.tab_names:
-            radio_id = f"{group_id}-{self._css_escape(tab_name)}"
-            # This CSS rule shows a panel only when its corresponding radio button is checked.
-            # The modern :has() selector makes this possible without any JavaScript.
+        for i, tab_name in enumerate(self.tab_names):
+            # FIX 1: Use position-based IDs instead of hash-based
+            radio_id = f"{group_id}-tab-{i}"
+            panel_id = f"{radio_id}-panel"
             css_rules.append(
-                f".{SFT_TAB_BAR}:has(#{radio_id}:checked) ~ "
-                f".{SFT_CONTENT} > .{SFT_PANEL}[data-filter='{tab_name}'] {{ display: block; }}"
+                f".{SFT_TAB_BAR}:has(#{radio_id}:checked) ~ .sft-content > #{panel_id} {{ display: block; }}"
             )
-
-        # 1. Write the dynamic CSS to a temporary file in the build's static directory.
+        
+        # Write the dynamic CSS to a temporary file and add it to the build.
         css_content = ''.join(css_rules)
         static_dir = Path(self.env.app.outdir) / '_static'
         static_dir.mkdir(parents=True, exist_ok=True)
         css_filename = f"dynamic-filter-tabs-{group_id}.css"
         (static_dir / css_filename).write_text(css_content, encoding='utf-8')
-
-        # 2. Add the temporary CSS file using the backward-compatible app.add_css_file() method.
-        # This correctly places a <link> tag in the HTML <head>.
         self.env.app.add_css_file(css_filename)
 
-        # Create the tab bar, but without the role="tablist"
-        # Screen Reader Ambiguity: Elements announced as group of radio buttons
-        tab_bar = nodes.container(classes=[SFT_TAB_BAR])
-        for tab_name in self.tab_names:
-            radio_id = f"{group_id}-{self._css_escape(tab_name)}"
+        # The tab bar container - NO ARIA attributes here
+        tab_bar = ContainerNode(classes=[SFT_TAB_BAR])
+        fieldset += tab_bar
+
+        # The content area holds all the panels
+        content_area = ContainerNode(classes=[SFT_CONTENT])
+        fieldset += content_area
+
+        # Map tab names to their content blocks for easy lookup.
+        content_map = {block['filter-name']: block.children for block in self.temp_blocks}
+        
+        # 1. Create all radio buttons and labels - NO ARIA on labels
+        for i, tab_name in enumerate(self.tab_names):
+            # FIX 1: Use position-based IDs
+            radio_id = f"{group_id}-tab-{i}"
+            panel_id = f"{radio_id}-panel"
             
-            # Create the radio input, but without the role="tab"
+            # The radio button is for state management.
             radio = RadioInputNode(type='radio', name=group_id, ids=[radio_id])
             
-            if tab_name == self.default_tab:
+            is_default = (self.default_tab == tab_name) or (i == 0 and not self.default_tab)
+            if is_default:
                 radio['checked'] = 'checked'
             tab_bar += radio
 
-            # The label correctly points to the radio input
+            # FIX 2: Remove ALL ARIA attributes from labels - just use for_id
+            # FIX 3: Don't add IDs to labels - they don't need them
             label = LabelNode(for_id=radio_id)
             label += nodes.Text(tab_name)
             tab_bar += label
-        fieldset += tab_bar
 
-        # Create the content area where all panels will reside.
-        content_area = nodes.container(classes=[SFT_CONTENT])
-        # Map tab names to their content blocks for easy lookup.
-        content_map = {block['filter-name']: block.children for block in self.temp_blocks}
-        # Ensure we create panels for all declared tabs plus the "General" tab.
-        all_tab_names = self.tab_names + ["General"]
-        for tab_name in all_tab_names:
-            panel = PanelNode(classes=[SFT_PANEL], **{'data-filter': tab_name, 'role': 'tabpanel'})
+        # 2. Create all tab panels - panels can have ARIA attributes
+        all_tab_names = ["General"] + self.tab_names
+        for i, tab_name in enumerate(all_tab_names):
+            if tab_name == "General":
+                # General panel doesn't correspond to a specific tab control
+                panel = PanelNode(
+                    classes=[SFT_PANEL], 
+                    **{'data-filter': tab_name}
+                )
+            else:
+                # FIX 1: Use position-based IDs for panels too
+                tab_index = self.tab_names.index(tab_name)
+                radio_id = f"{group_id}-tab-{tab_index}"
+                panel_id = f"{radio_id}-panel"
+                
+                # Panels can have ARIA attributes for screen readers
+                panel_attrs = {
+                    'classes': [SFT_PANEL],
+                    'ids': [panel_id],
+                    'role': 'tabpanel',
+                    'aria-labelledby': radio_id,
+                    'tabindex': '0'
+                }
+                panel = PanelNode(**panel_attrs)
+
             if tab_name in content_map:
-                # Use deepcopy to prevent docutils node mutation bugs. Since the same content
-                # might be referenced or processed multiple times, a deep copy ensures that
-                # each panel gets a completely independent set of nodes.
                 panel.extend(copy.deepcopy(content_map[tab_name]))
             content_area += panel
-        fieldset += content_area
-        container.children = [fieldset]
 
-        # Return just the main container node. Sphinx handles adding the CSS file to the <head>.
+        container.children = [fieldset]
         return [container]
 
     def render_fallback(self) -> list[nodes.Node]:
@@ -199,8 +213,6 @@ class FilterTabsRenderer:
     def _css_escape(name: str) -> str:
         """
         Generates a deterministic, CSS-safe identifier from any given tab name string.
-        This uses uuid.uuid5 to create a hashed value, which robustly prevents
-        CSS injection vulnerabilities that could arise from special characters in tab names.
         """
         return str(uuid.uuid5(_CSS_NAMESPACE, name.strip().lower()))
 
@@ -214,7 +226,6 @@ class TabDirective(Directive):
     def run(self) -> list[nodes.Node]:
         """
         Parses the content of a tab and stores it in a temporary container.
-        This method validates that the directive is used within a `filter-tabs` block.
         """
         env = self.state.document.settings.env
         # Ensure `tab` is only used inside `filter-tabs`.
@@ -228,7 +239,7 @@ class TabDirective(Directive):
 
 
 class FilterTabsDirective(Directive):
-    """Handles the main `.. filter-tabs::` directive, which orchestrates the entire component."""
+    """Handles the main `.. filter-tabs::` directive."""
     has_content = True
     required_arguments = 1
     final_argument_whitespace = True
@@ -239,10 +250,7 @@ class FilterTabsDirective(Directive):
         and delegates the final rendering to the FilterTabsRenderer.
         """
         env = self.state.document.settings.env
-        # Prevent nesting of filter-tabs directives.
-        if hasattr(env, 'sft_context') and env.sft_context:
-            raise self.error("Nesting `filter-tabs` is not supported.")
-
+        
         # Set a context flag to indicate that we are inside a filter-tabs block.
         if not hasattr(env, 'sft_context'):
             env.sft_context = []
@@ -251,12 +259,11 @@ class FilterTabsDirective(Directive):
         # Parse the content of the directive to find all `.. tab::` blocks.
         temp_container = nodes.container()
         self.state.nested_parse(self.content, self.content_offset, temp_container)
-        env.sft_context.pop() # Unset the context flag.
+        env.sft_context.pop()
 
         # Find all the temporary panel nodes created by the TabDirective.
         temp_blocks = temp_container.findall(lambda n: isinstance(n, nodes.Element) and SFT_TEMP_PANEL in n.get('classes', []))
         if not temp_blocks:
-            # Raise a clear error if the directive is empty, instead of failing silently.
             self.error("No `.. tab::` directives found inside `filter-tabs`. Content will not be rendered.")
             return []
 
@@ -292,12 +299,10 @@ def setup_collapsible_admonitions(app: Sphinx, doctree: nodes.document, docname:
     """
     Finds any admonition with the `:class: collapsible` option and transforms it
     into an HTML `<details>`/`<summary>` element for a native collapsible effect.
-    This hook runs after the document tree is resolved.
     """
     if not app.config.filter_tabs_collapsible_enabled or app.builder.name != 'html':
         return
 
-    # Iterate over a copy of the list of nodes to allow for safe modification.
     for node in list(doctree.findall(nodes.admonition)):
         if 'collapsible' not in node.get('classes', []):
             continue
@@ -306,7 +311,7 @@ def setup_collapsible_admonitions(app: Sphinx, doctree: nodes.document, docname:
         title_node = next(iter(node.findall(nodes.title)), None)
         summary_text = title_node.astext() if title_node else "Details"
         if title_node:
-            title_node.parent.remove(title_node) # Remove the old title.
+            title_node.parent.remove(title_node)
 
         # Create the new <details> node.
         details_node = DetailsNode(classes=[COLLAPSIBLE_SECTION])
@@ -316,7 +321,7 @@ def setup_collapsible_admonitions(app: Sphinx, doctree: nodes.document, docname:
         # Create the new <summary> node with a custom arrow.
         summary_node = SummaryNode()
         arrow_span = nodes.inline(classes=[CUSTOM_ARROW])
-        arrow_span += nodes.Text("►")
+        arrow_span += nodes.Text("▶")
         summary_node += arrow_span
         summary_node += nodes.Text(summary_text)
         details_node += summary_node
@@ -337,8 +342,6 @@ def _get_html_attrs(node: nodes.Element) -> Dict[str, Any]:
     return attrs
 
 # --- HTML Visitor Functions ---
-# These functions translate the custom docutils nodes into HTML tags.
-
 def visit_container_node(self: HTML5Translator, node: ContainerNode) -> None:
     self.body.append(self.starttag(node, 'div', **_get_html_attrs(node)))
 def depart_container_node(self: HTML5Translator, node: ContainerNode) -> None:
@@ -355,53 +358,80 @@ def depart_legend_node(self: HTML5Translator, node: LegendNode) -> None:
     self.body.append('</legend>')
 
 def visit_radio_input_node(self: HTML5Translator, node: RadioInputNode) -> None:
-    self.body.append(self.starttag(node, 'input', **_get_html_attrs(node)))
+    attrs = _get_html_attrs(node)
+    # Don't manually add 'id' - starttag handles 'ids' automatically
+    # Include other important attributes
+    for key in ['type', 'name', 'checked']:
+        if key in node.attributes:
+            attrs[key] = node[key]
+    self.body.append(self.starttag(node, 'input', **attrs))
+
 def depart_radio_input_node(self: HTML5Translator, node: RadioInputNode) -> None:
-    pass # No closing tag for <input>.
+    pass
 
 def visit_label_node(self: HTML5Translator, node: LabelNode) -> None:
     attrs = _get_html_attrs(node)
-    attrs['for'] = node['for_id'] # Connect the label to its radio button.
+    # Ensure the 'for' attribute is set correctly
+    if 'for_id' in node.attributes:
+        attrs['for'] = node['for_id']
+    # FIX: Don't add any ARIA attributes or IDs to labels
     self.body.append(self.starttag(node, 'label', **attrs))
+
 def depart_label_node(self: HTML5Translator, node: LabelNode) -> None:
     self.body.append('</label>')
 
 def visit_panel_node(self: HTML5Translator, node: PanelNode) -> None:
-    self.body.append(self.starttag(node, 'div', CLASS=SFT_PANEL, **_get_html_attrs(node)))
+    attrs = _get_html_attrs(node)
+    # Panels can have ARIA attributes
+    for key in ['role', 'aria-labelledby', 'tabindex']:
+        if key in node.attributes:
+            attrs[key] = node[key]
+    # Handle data attributes
+    if 'data-filter' in node.attributes:
+        attrs['data-filter'] = node['data-filter']
+    self.body.append(self.starttag(node, 'div', CLASS=SFT_PANEL, **attrs))
+
 def depart_panel_node(self: HTML5Translator, node: PanelNode) -> None:
     self.body.append('</div>')
 
 def visit_details_node(self: HTML5Translator, node: DetailsNode) -> None:
-    self.body.append(self.starttag(node, 'details', **_get_html_attrs(node)))
+    attrs = {}
+    if 'open' in node.attributes:
+        attrs['open'] = node['open']
+    self.body.append(self.starttag(node, 'details', **attrs))
+
 def depart_details_node(self: HTML5Translator, node: DetailsNode) -> None:
     self.body.append('</details>')
 
 def visit_summary_node(self: HTML5Translator, node: SummaryNode) -> None:
-    self.body.append(self.starttag(node, 'summary', **_get_html_attrs(node)))
+    self.body.append(self.starttag(node, 'summary'))
+
 def depart_summary_node(self: HTML5Translator, node: SummaryNode) -> None:
     self.body.append('</summary>')
 
 
 def copy_static_files(app: Sphinx):
     """
-    Copies the extension's static CSS file to the build output directory.
-    This hook runs when the builder is initialized, ensuring the CSS file is
-    always available for HTML builds without complex packaging maneuvers.
+    Copies the extension's static CSS and JS files to the build output directory.
     """
     if app.builder.name != 'html':
         return
-    source_css = Path(__file__).parent / "static" / "filter_tabs.css"
+    
+    static_source_dir = Path(__file__).parent / "static"
     dest_dir = Path(app.outdir) / "_static"
     dest_dir.mkdir(parents=True, exist_ok=True)
-    shutil.copy(source_css, dest_dir)
+    
+    # Copy both CSS and JS files
+    for file_pattern in ["*.css", "*.js"]:
+        for file_path in static_source_dir.glob(file_pattern):
+            shutil.copy(file_path, dest_dir)
 
 
 def setup(app: Sphinx) -> Dict[str, Any]:
     """
     The main entry point for the Sphinx extension.
-    This function registers all components with Sphinx.
     """
-    # Register custom configuration values, allowing users to theme from conf.py.
+    # Register custom configuration values
     app.add_config_value('filter_tabs_tab_highlight_color', '#007bff', 'html', [str])
     app.add_config_value('filter_tabs_tab_background_color', '#f0f0f0', 'html', [str])
     app.add_config_value('filter_tabs_tab_font_size', '1em', 'html', [str])
@@ -409,9 +439,14 @@ def setup(app: Sphinx) -> Dict[str, Any]:
     app.add_config_value('filter_tabs_debug_mode', False, 'html', [bool])
     app.add_config_value('filter_tabs_collapsible_enabled', True, 'html', [bool])
     app.add_config_value('filter_tabs_collapsible_accent_color', '#17a2b8', 'html', [str])
+    
+    # NEW: Add accessibility configuration options
+    app.add_config_value('filter_tabs_keyboard_navigation', True, 'html', [bool])
+    app.add_config_value('filter_tabs_announce_changes', True, 'html', [bool])
 
-    # Add the main stylesheet to the HTML output.
+    # Add the main stylesheet and JavaScript to the HTML output.
     app.add_css_file('filter_tabs.css')
+    app.add_js_file('filter_tabs.js')
 
     # Register all custom nodes and their HTML visitor/depart functions.
     app.add_node(ContainerNode, html=(visit_container_node, depart_container_node))
@@ -427,11 +462,10 @@ def setup(app: Sphinx) -> Dict[str, Any]:
     app.add_directive('filter-tabs', FilterTabsDirective)
     app.add_directive('tab', TabDirective)
 
-    # Connect to Sphinx events (hooks) to run custom functions at specific build stages.
+    # Connect to Sphinx events
     app.connect('doctree-resolved', setup_collapsible_admonitions)
     app.connect('builder-inited', copy_static_files)
 
-    # Return metadata about the extension.
     return {
         'version': __version__,
         'parallel_read_safe': True,

filter_tabs/static/filter_tabs.css

@@ -1,37 +1,57 @@
-/* Sphinx Filter Tabs -- Static Stylesheet */
-/* This file provides the structural and base theme styles for the component.
-   The core filtering logic (showing the active panel) is handled by a small,
-   dynamically generated <style> block created by extension.py. */
+/* Sphinx Filter Tabs -- Complete Stylesheet */
+/* This file provides both structural and accessibility styles */
 
 /* Main container for the tab component */
 .sft-container {
     border: 1px solid #e0e0e0;
-    /* THEME: The border-radius is controlled by a CSS variable from conf.py. */
     border-radius: var(--sft-border-radius, 8px);
     overflow: hidden;
     margin: 1.5em 0;
 }
 
 /* The <fieldset> provides semantic grouping for accessibility. */
-.sft-fieldset { border: none; padding: 0; margin: 0; }
+.sft-fieldset { 
+    border: none; 
+    padding: 0; 
+    margin: 0; 
+}
 
 /* The <legend> is visually hidden but essential for screen reader users. */
-.sft-legend { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+.sft-legend { 
+    position: absolute; 
+    width: 1px; 
+    height: 1px; 
+    padding: 0; 
+    margin: -1px; 
+    overflow: hidden; 
+    clip: rect(0, 0, 0, 0); 
+    white-space: nowrap; 
+    border: 0; 
+}
 
-/* The <input type="radio"> buttons are the functional core, but are not visible. */
+/* Hide radio buttons completely but keep them accessible */
 .sft-tab-bar > input[type="radio"] {
-    display: none;
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+    opacity: 0;
 }
 
 /* The tab bar containing the clickable labels. */
 .sft-tab-bar { 
     display: flex; 
     flex-wrap: wrap; 
-    /* THEME: The background color is controlled by a CSS variable. */
     background-color: var(--sft-tab-background, #f0f0f0); 
     border-bottom: 1px solid #e0e0e0; 
     padding: 0 10px; 
 }
+
 .sft-tab-bar > label { 
     padding: 12px 18px; 
     cursor: pointer; 
@@ -39,40 +59,61 @@
     border-bottom: 3px solid transparent; 
     color: #555; 
     font-weight: 500; 
-    /* THEME: The font size is controlled by a CSS variable. */
     font-size: var(--sft-tab-font-size, 1em); 
     line-height: 1.5; 
 }
 
-/* THEME: The active tab label is highlighted using a CSS variable for the color.
-   The adjacent sibling selector (+) is robust and efficient. */
+/* Style for checked state - using adjacent sibling selector */
 .sft-tab-bar > input[type="radio"]:checked + label {
     border-bottom-color: var(--sft-tab-highlight-color, #007bff);
     color: #000;
+    font-weight: 600;
+}
+
+/* Hover state for labels */
+.sft-tab-bar > label:hover {
+    color: #333;
+    border-bottom-color: rgba(0, 123, 255, 0.3);
+}
+
+/* Focus state for keyboard navigation */
+.sft-tab-bar > input[type="radio"]:focus + label {
+    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.6);
+    border-radius: 3px;
+    outline: none;
+    z-index: 1;
+    position: relative;
 }
 
 /* The container for all content panels. */
-.sft-content { padding: 20px; }
+.sft-content { 
+    padding: 20px; 
+}
 
-/* By default, hide all tab-specific panels. */
-.sft-container .sft-panel {
+/* By default, hide all tab-specific panels. The dynamic CSS will show the active one. */
+.sft-content > .sft-panel {
     display: none;
 }
-/* The "General" panel, however, is always visible. */
-.sft-container .sft-panel[data-filter="General"] {
+
+/* Always show the "General" panel, as it has no radio button to control it. */
+.sft-content > .sft-panel[data-filter="General"] {
     display: block;
 }
-/* The dynamically generated <style> block handles showing the one active panel. */
 
+/* Ensure panels have proper focus styles for screen readers */
+.sft-content > .sft-panel[role="tabpanel"]:focus {
+    outline: 2px solid var(--sft-tab-highlight-color, #007bff);
+    outline-offset: 2px;
+}
 
-/* Styles for collapsible sections, matching the golden record. */
+/* Styles for collapsible sections */
 .collapsible-section {
     border: 1px solid #e0e0e0;
-    /* THEME: The accent color is controlled by a CSS variable. */
     border-left: 4px solid var(--sft-collapsible-accent-color, #17a2b8);
     border-radius: 4px;
     margin-top: 1em;
 }
+
 .collapsible-section summary {
     display: block;
     cursor: pointer;
@@ -80,16 +121,47 @@
     font-weight: bold;
     background-color: #f9f9f9;
     outline: none;
+    list-style: none;
 }
-/* Hide the default disclosure triangle in browsers like Chrome/Safari. */
+
 .collapsible-section summary::-webkit-details-marker {
     display: none;
 }
-/* Hide the default disclosure triangle in browsers like Firefox. */
-.collapsible-section summary {
-    list-style: none;
+
+.collapsible-section[open] > summary { 
+    border-bottom: 1px solid #e0e0e0; 
+}
+
+.custom-arrow { 
+    display: inline-block; 
+    width: 1em; 
+    margin-right: 8px; 
+    transition: transform 0.2s; 
+}
+
+.collapsible-section[open] > summary .custom-arrow { 
+    transform: rotate(90deg); 
+}
+
+.collapsible-content { 
+    padding: 15px; 
+}
+
+/* Support for high contrast mode */
+@media (prefers-contrast: high) {
+    .sft-tab-bar > input[type="radio"]:checked + label {
+        border-bottom-width: 4px;
+    }
+    
+    .sft-tab-bar > input[type="radio"]:focus + label {
+        box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.8);
+    }
+}
+
+/* Support for reduced motion preferences */
+@media (prefers-reduced-motion: reduce) {
+    .sft-tab-bar > label,
+    .custom-arrow {
+        transition: none;
+    }
 }
-.collapsible-section[open] > summary { border-bottom: 1px solid #e0e0e0; }
-.custom-arrow { display: inline-block; width: 1em; margin-right: 8px; transition: transform 0.2s; }
-.collapsible-section[open] > summary .custom-arrow { transform: rotate(90deg); }
-.collapsible-content { padding: 15px; }

filter_tabs/static/filter_tabs.js

@@ -0,0 +1,130 @@
+// Progressive enhancement for keyboard navigation
+// This file ensures proper keyboard navigation while maintaining CSS-only fallback
+
+(function() {
+    'use strict';
+    
+    // Only enhance if the extension is present
+    if (!document.querySelector('.sft-container')) return;
+    
+    function initTabKeyboardNavigation() {
+        const containers = document.querySelectorAll('.sft-container');
+        
+        containers.forEach(container => {
+            const tabBar = container.querySelector('.sft-tab-bar');
+            if (!tabBar) return;
+            
+            const radios = tabBar.querySelectorAll('input[type="radio"]');
+            const labels = tabBar.querySelectorAll('label');
+            
+            if (radios.length === 0 || labels.length === 0) return;
+            
+            // Make labels focusable for keyboard navigation
+            labels.forEach(label => {
+                if (!label.hasAttribute('tabindex')) {
+                    label.setAttribute('tabindex', '0');
+                }
+            });
+            
+            // Handle keyboard navigation on labels
+            labels.forEach((label, index) => {
+                label.addEventListener('keydown', (event) => {
+                    let targetIndex = index;
+                    let handled = false;
+                    
+                    switch (event.key) {
+                        case 'ArrowRight':
+                            event.preventDefault();
+                            targetIndex = (index + 1) % labels.length;
+                            handled = true;
+                            break;
+                            
+                        case 'ArrowLeft':
+                            event.preventDefault();
+                            targetIndex = (index - 1 + labels.length) % labels.length;
+                            handled = true;
+                            break;
+                            
+                        case 'Home':
+                            event.preventDefault();
+                            targetIndex = 0;
+                            handled = true;
+                            break;
+                            
+                        case 'End':
+                            event.preventDefault();
+                            targetIndex = labels.length - 1;
+                            handled = true;
+                            break;
+                            
+                        case 'Enter':
+                        case ' ':
+                            // Activate the associated radio button
+                            event.preventDefault();
+                            if (radios[index]) {
+                                radios[index].checked = true;
+                                radios[index].dispatchEvent(new Event('change', { bubbles: true }));
+                            }
+                            return;
+                            
+                        default:
+                            return;
+                    }
+                    
+                    if (handled) {
+                        // Move focus to target label and activate its radio
+                        labels[targetIndex].focus();
+                        if (radios[targetIndex]) {
+                            radios[targetIndex].checked = true;
+                            radios[targetIndex].dispatchEvent(new Event('change', { bubbles: true }));
+                        }
+                    }
+                });
+            });
+            
+            // Optional: Announce tab changes for screen readers
+            if (window.config && window.config.filter_tabs_announce_changes !== false) {
+                radios.forEach((radio, index) => {
+                    radio.addEventListener('change', () => {
+                        if (radio.checked && labels[index]) {
+                            announceTabChange(labels[index].textContent.trim());
+                        }
+                    });
+                });
+            }
+        });
+    }
+    
+    function announceTabChange(tabName) {
+        // Create or update live region for screen reader announcements
+        let liveRegion = document.getElementById('tab-live-region');
+        if (!liveRegion) {
+            liveRegion = document.createElement('div');
+            liveRegion.id = 'tab-live-region';
+            liveRegion.setAttribute('role', 'status');
+            liveRegion.setAttribute('aria-live', 'polite');
+            liveRegion.setAttribute('aria-atomic', 'true');
+            liveRegion.style.position = 'absolute';
+            liveRegion.style.left = '-10000px';
+            liveRegion.style.width = '1px';
+            liveRegion.style.height = '1px';
+            liveRegion.style.overflow = 'hidden';
+            document.body.appendChild(liveRegion);
+        }
+        
+        // Update the announcement
+        liveRegion.textContent = `${tabName} tab selected`;
+        
+        // Clear the announcement after a short delay
+        setTimeout(() => {
+            liveRegion.textContent = '';
+        }, 1000);
+    }
+    
+    // Initialize when DOM is ready
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initTabKeyboardNavigation);
+    } else {
+        initTabKeyboardNavigation();
+    }
+})();

{sphinx_filter_tabs-0.7.0.dist-info → sphinx_filter_tabs-0.9.2.dist-info}/METADATA

@@ -1,13 +1,13 @@
 Metadata-Version: 2.4
 Name: sphinx-filter-tabs
-Version: 0.7.0
+Version: 0.9.2
 Summary: A Sphinx extension for accessible, JS-free filterable content tabs.
 Author-email: Aputsiak Niels Janussen <aputsiak+sphinx@gmail.com>
 License: GNU General Public License v3.0
 Project-URL: Homepage, https://github.com/aputtu/sphinx-filter-tabs
 Project-URL: Repository, https://github.com/aputtu/sphinx-filter-tabs.git
 Project-URL: Issues, https://github.com/aputtu/sphinx-filter-tabs/issues
-Keywords: sphinx,extension,tabs,filter,documentation,no-js
+Keywords: sphinx,extension,tabs,filter,documentation,no-js,aria,accessibility
 Classifier: Development Status :: 4 - Beta
 Classifier: Framework :: Sphinx :: Extension
 Classifier: Intended Audience :: Developers
@@ -45,3 +45,21 @@ This extension provides `filter-tabs` and `tab` directives to create user-friend
 You can install this extension using `pip`:
 ```bash
 pip install sphinx-filter-tabs
+```
+
+## Development
+
+1. You can install a local version of the Sphinx with extension using:
+```bash
+./scripts/setup_dev.sh # Initially cleans previous folders in _docs/build  and venv.
+```
+
+Command to enter venv is provided.
+
+2. Once inside virtual environment, you can use following commands:
+```bash
+pytest # Runs test suite on configured version of Sphinx.
+tox # Check across multiple Sphinx versions. Manual install of tox required.
+./scripts/export-project.sh # Outputs directory structure and code to txt
+./dev.sh [options] # Allows for faster generation for html, pdf, clean up
+```

sphinx_filter_tabs-0.9.2.dist-info/RECORD

@@ -0,0 +1,10 @@
+filter_tabs/__init__.py,sha256=VPpIhj4HaLeMX7ai7dZFkUm81ii2ePPGjCd9hsMjsN4,397
+filter_tabs/extension.py,sha256=VWZj6fcgkH2WSBX8r7JPyarpqCSLAq1dtqzZdBDGejo,19457
+filter_tabs/static/filter_tabs.css,sha256=M-6VbOsWU7xiklpHeRtD-iVDK-Bmk_NZle6e7AgiYLE,3994
+filter_tabs/static/filter_tabs.js,sha256=r_zWkPYDgdKEQP4vkXRbe3YtcChEvzJ5WPVKzpS8-Q0,5309
+sphinx_filter_tabs-0.9.2.dist-info/licenses/LICENSE,sha256=OXLcl0T2SZ8Pmy2_dmlvKuetivmyPd5m1q-Gyd-zaYY,35149
+sphinx_filter_tabs-0.9.2.dist-info/METADATA,sha256=JIzur1-LMOiUgZz3Oazsp-FyJLnvl6UsQEq1dQ4grF0,2872
+sphinx_filter_tabs-0.9.2.dist-info/WHEEL,sha256=_zCd3N1l69ArxyTb8rzEoP9TpbYXkqRFSNOD5OuxnTs,91
+sphinx_filter_tabs-0.9.2.dist-info/entry_points.txt,sha256=za_bQcueY8AHyq7XnnjkW9X3C-LsZjeERVQ_ds7jV1A,62
+sphinx_filter_tabs-0.9.2.dist-info/top_level.txt,sha256=K0Iy-6EsYYdvlyXdsJT0SQg-BLDBgT5-Y8ZKy5SNAfc,12
+sphinx_filter_tabs-0.9.2.dist-info/RECORD,,

sphinx_filter_tabs-0.7.0.dist-info/RECORD

@@ -1,9 +0,0 @@
-filter_tabs/__init__.py,sha256=VPpIhj4HaLeMX7ai7dZFkUm81ii2ePPGjCd9hsMjsN4,397
-filter_tabs/extension.py,sha256=tU2ZBYWRmYHyvQh8NgPWWqFidunsL16KHhoyqMfboCw,20739
-filter_tabs/static/filter_tabs.css,sha256=btJoI-Q87e0XUQARwJUhM6RCfg5m2dvxKtfABZ2zRsc,3429
-sphinx_filter_tabs-0.7.0.dist-info/licenses/LICENSE,sha256=OXLcl0T2SZ8Pmy2_dmlvKuetivmyPd5m1q-Gyd-zaYY,35149
-sphinx_filter_tabs-0.7.0.dist-info/METADATA,sha256=WJjRU9rRRzgFFKlheXL4QTa_c1vF0FWhd3bqMyiG_zA,2264
-sphinx_filter_tabs-0.7.0.dist-info/WHEEL,sha256=_zCd3N1l69ArxyTb8rzEoP9TpbYXkqRFSNOD5OuxnTs,91
-sphinx_filter_tabs-0.7.0.dist-info/entry_points.txt,sha256=za_bQcueY8AHyq7XnnjkW9X3C-LsZjeERVQ_ds7jV1A,62
-sphinx_filter_tabs-0.7.0.dist-info/top_level.txt,sha256=K0Iy-6EsYYdvlyXdsJT0SQg-BLDBgT5-Y8ZKy5SNAfc,12
-sphinx_filter_tabs-0.7.0.dist-info/RECORD,,