sphinx-filter-tabs 1.2.2__py3-none-any.whl → 1.2.5__py3-none-any.whl

filter_tabs/renderer.py

@@ -46,31 +46,31 @@ class ContentTypeInferrer:
         (['development', 'staging', 'production', 'test', 'local'], 'environment'),
         (['source', 'binary', 'docker', 'manual', 'automatic'], 'installation method'),
     ]
-    
+
     @classmethod
     def infer_type(cls, tab_names: List[str]) -> str:
         """
         Infer content type from a list of tab names.
-        
+
         Args:
             tab_names: List of tab names to analyze
-            
+
         Returns:
             Inferred content type string (e.g., 'programming language', 'operating system')
         """
         lower_names = [name.lower() for name in tab_names]
-        
+
         # First pass: exact matches
         for keywords, content_type in cls.PATTERNS:
             if any(name in keywords for name in lower_names):
                 return content_type
-        
+
         # Second pass: substring matches
         for keywords, content_type in cls.PATTERNS:
             for name in lower_names:
                 if any(keyword in name for keyword in keywords):
                     return content_type
-        
+
         # Default fallback
         return 'option'
 
@@ -92,53 +92,52 @@ class FilterTabsRenderer:
         self.tab_data = tab_data
         self.general_content = general_content
         self.custom_legend = custom_legend
-        
+
         # 1. Load configuration first
         self.config = FilterTabsConfig.from_sphinx_config(self.app.config)
-        
+
         # 2. Safely initialize the counter on the environment if it doesn't exist
         if not hasattr(self.env, 'filter_tabs_counter'):
             self.env.filter_tabs_counter = 0
-            
+
         # 3. Increment the counter for this new tab group
         self.env.filter_tabs_counter += 1
-        
+
         # 4. Generate the unique group ID and the ID generator instance
         self.group_id = f"filter-group-{self.env.filter_tabs_counter}"
         self.id_gen = IDGenerator(self.group_id)
-        
+
         # 5. Perform debug logging now that config and group_id are set
         if self.config.debug_mode:
             logger.info(f"Initialized new tab group with id: '{self.group_id}'")
 
     def render_html(self) -> List[nodes.Node]:
-        """Render HTML with a browser-compatible CSS approach."""
+        """Render HTML with CSS-only approach (no inline styles)."""
         if self.config.debug_mode:
             logger.info(f"Rendering filter-tabs group {self.group_id}")
 
-        css_node = self._generate_compatible_css()
-
         container_attrs = self._get_container_attributes()
         container = ContainerNode(**container_attrs)
 
         fieldset = self._create_fieldset()
         container.children = [fieldset]
-        
-        return [css_node, container]
+
+        # FIXED: No more inline CSS generation
+        return [container]
 
     def render_fallback(self) -> List[nodes.Node]:
         """Render for non-HTML builders (e.g., LaTeX)."""
         output_nodes: List[nodes.Node] = []
-        
+
         if self.general_content:
             output_nodes.extend(copy.deepcopy(self.general_content))
-        
+
         for tab in self.tab_data:
             admonition = nodes.admonition()
             admonition += nodes.title(text=tab.name)
             admonition.extend(copy.deepcopy(tab.content))
             output_nodes.append(admonition)
-        
+
         return output_nodes
 
     def _get_container_attributes(self) -> Dict[str, Any]:
@@ -150,42 +149,31 @@ class FilterTabsRenderer:
             'style': self.config.to_css_properties()
         }
 
-    def _generate_compatible_css(self) -> nodes.raw:
-        """Generate CSS using sibling selectors to show/hide panels."""
-        css_rules = []
-        for i, tab in enumerate(self.tab_data):
-            radio_id = self.id_gen.radio_id(i)
-            panel_id = self.id_gen.panel_id(i)
-            css_rules.append(
-                f"#{radio_id}:checked ~ .{SFT_CONTENT} #{panel_id} {{ display: block; }}"
-            )
-        
-        css_content = "\n".join(css_rules)
-        return nodes.raw(text=f"<style>\n{css_content}\n</style>", format='html')
+    # REMOVED: _generate_compatible_css method - no longer needed!
 
     def _create_fieldset(self) -> FieldsetNode:
         """Create the main fieldset containing the legend, radio buttons, and panels."""
         fieldset = FieldsetNode(role="radiogroup")
-        
+
         fieldset += self._create_legend()
-        
+
         radio_group = ContainerNode(classes=[SFT_RADIO_GROUP])
         self._populate_radio_group(radio_group)
-        
+
         content_area = ContainerNode(classes=[SFT_CONTENT])
         self._populate_content_area(content_area)
-        
+
         # This is the fix: place the content_area inside the radio_group.
         radio_group += content_area
-        
+
         fieldset += radio_group
-        
+
         return fieldset
 
     def _create_legend(self) -> LegendNode:
         """Create a meaningful, visible legend for the tab group."""
         legend = LegendNode(classes=[SFT_LEGEND], ids=[self.id_gen.legend_id()])
-        
+
         # Use the custom legend if it exists
         if self.custom_legend:
             legend_text = self.custom_legend
@@ -194,14 +182,14 @@ class FilterTabsRenderer:
             tab_names = [tab.name for tab in self.tab_data]
             content_type = ContentTypeInferrer.infer_type(tab_names)
             legend_text = f"Choose {content_type}: {', '.join(tab_names)}"
-        
+
         legend += nodes.Text(legend_text)
         return legend
 
     def _populate_radio_group(self, radio_group: ContainerNode) -> None:
         """Create and add all radio buttons and labels to the radio group container."""
         default_index = next((i for i, tab in enumerate(self.tab_data) if tab.is_default), 0)
-     
+
         for i, tab in enumerate(self.tab_data):
             radio_group += self._create_radio_button(i, tab, is_checked=(i == default_index))
             radio_group += self._create_label(i, tab)
@@ -241,7 +229,7 @@ class FilterTabsRenderer:
             general_panel = PanelNode(classes=[SFT_PANEL], **{'data-filter': 'General'})
             general_panel.extend(copy.deepcopy(self.general_content))
             content_area += general_panel
-        
+
         for i, tab in enumerate(self.tab_data):
             content_area += self._create_tab_panel(i, tab)
 
@@ -250,7 +238,7 @@ class FilterTabsRenderer:
         panel_attrs = {
             'classes': [SFT_PANEL],
             'ids': [self.id_gen.panel_id(index)],
-            'role': 'region',
+            'role': 'tabpanel',
             'aria-labelledby': self.id_gen.radio_id(index),
             'tabindex': '0',
             'data-tab': tab.name.lower().replace(' ', '-')
@@ -258,4 +246,3 @@ class FilterTabsRenderer:
         panel = PanelNode(**panel_attrs)
         panel.extend(copy.deepcopy(tab.content))
         return panel
-    

filter_tabs/static/filter_tabs.css

@@ -86,7 +86,7 @@
 /* Content area */
 .sft-content {
     padding: 20px;
-    flex-basis: 100%; /* Add this line */
+    flex-basis: 100%;
 }
 
 /* Panels - hidden by default */
@@ -110,6 +110,32 @@
     border-bottom: 1px solid #eee;
 }
 
+/* 
+ * FIXED: Panel visibility using CSS without inline styles
+ * This uses a general approach with nth-child selectors
+ * No more inline <style> elements needed!
+ */
+
+/* Show panels when corresponding radio is checked */
+.sft-radio-group input[type="radio"]:nth-child(1):checked ~ .sft-content .sft-panel:nth-of-type(1),
+.sft-radio-group input[type="radio"]:nth-child(3):checked ~ .sft-content .sft-panel:nth-of-type(2),
+.sft-radio-group input[type="radio"]:nth-child(5):checked ~ .sft-content .sft-panel:nth-of-type(3),
+.sft-radio-group input[type="radio"]:nth-child(7):checked ~ .sft-content .sft-panel:nth-of-type(4),
+.sft-radio-group input[type="radio"]:nth-child(9):checked ~ .sft-content .sft-panel:nth-of-type(5),
+.sft-radio-group input[type="radio"]:nth-child(11):checked ~ .sft-content .sft-panel:nth-of-type(6),
+.sft-radio-group input[type="radio"]:nth-child(13):checked ~ .sft-content .sft-panel:nth-of-type(7),
+.sft-radio-group input[type="radio"]:nth-child(15):checked ~ .sft-content .sft-panel:nth-of-type(8),
+.sft-radio-group input[type="radio"]:nth-child(17):checked ~ .sft-content .sft-panel:nth-of-type(9),
+.sft-radio-group input[type="radio"]:nth-child(19):checked ~ .sft-content .sft-panel:nth-of-type(10) {
+    display: block;
+}
+
+/* Alternative approach using CSS custom properties (more elegant) */
+/*
+ * If you prefer a more modern approach, you could use CSS custom properties
+ * and update the renderer to set --active-tab instead of generating CSS rules
+ */
+
 /* Screen reader only content */
 .sr-only {
     position: absolute;

filter_tabs/static/filter_tabs.js

@@ -1,13 +1,12 @@
-// Progressive enhancement for keyboard navigation and accessibility.
-// This file ensures proper keyboard navigation and focus management,
-// while maintaining a CSS-only fallback.
+// Progressive enhancement for focus management and accessibility announcements.
+// This file provides enhancements while maintaining native radio button keyboard behavior.
 
 (function() {
     'use strict';
-    
+
     // Only enhance if the extension's HTML is present on the page.
     if (!document.querySelector('.sft-container')) return;
-    
+
     /**
      * Moves focus to the content panel associated with a given radio button.
      * This improves accessibility by directing screen reader users to the new content.
@@ -15,12 +14,12 @@
      */
     function focusOnPanel(radio) {
         if (!radio.checked) return;
-        
+
         // Derive the panel's ID from the radio button's ID.
         // e.g., 'filter-group-1-radio-0' becomes 'filter-group-1-panel-0'
         const panelId = radio.id.replace('-radio-', '-panel-');
         const panel = document.getElementById(panelId);
-        
+
         if (panel) {
             panel.focus();
         }
@@ -47,10 +46,10 @@
             liveRegion.style.overflow = 'hidden';
             document.body.appendChild(liveRegion);
         }
-        
+
         // Update the announcement text.
         liveRegion.textContent = `${tabName} tab selected`;
-        
+
         // Clear the announcement after a short delay to prevent clutter.
         setTimeout(() => {
             liveRegion.textContent = '';
@@ -58,103 +57,45 @@
     }
 
     /**
-     * Initializes keyboard navigation for all filter-tab components on the page.
+     * Initializes progressive enhancements for all filter-tab components.
+     * REMOVED: Custom keyboard navigation (now uses native radio button behavior)
+     * KEPT: Focus management and screen reader announcements
      */
-    function initTabKeyboardNavigation() {
+    function initTabEnhancements() {
         const containers = document.querySelectorAll('.sft-container');
-        
+
         containers.forEach(container => {
             const tabBar = container.querySelector('.sft-radio-group');
             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 to act as keyboard navigation targets.
-            labels.forEach(label => {
-                if (!label.hasAttribute('tabindex')) {
-                    label.setAttribute('tabindex', '0');
-                }
-            });
 
-            // Handle keyboard navigation on the tab 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 on Enter/Space.
-                            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 the target label and activate its radio button.
-                        labels[targetIndex].focus();
-                        if (radios[targetIndex]) {
-                            radios[targetIndex].checked = true;
-                            radios[targetIndex].dispatchEvent(new Event('change', { bubbles: true }));
-                        }
-                    }
-                });
-            });
-            
-            // Add listeners for announcements and focus management.
+            // Add change listeners for announcements and focus management
             radios.forEach((radio, index) => {
                 radio.addEventListener('change', () => {
                     if (radio.checked) {
-                        // Announce the change to screen readers.
-                        if (labels[index]) {
-                            announceTabChange(labels[index].textContent.trim());
-                        }
-                        // Move focus to the newly visible panel.
+                        // Get the tab name from the associated label
+                        const label = labels[index];
+                        const tabName = label ? label.textContent.trim() : 'Unknown';
+                        
+                        // Announce the change to screen readers
+                        announceTabChange(tabName);
+                        
+                        // Move focus to the newly visible panel
                         focusOnPanel(radio);
                     }
                 });
             });
         });
     }
-    
-    // Initialize the script once the DOM is ready.
+
+    // Initialize the enhancements once the DOM is ready
     if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', initTabKeyboardNavigation);
+        document.addEventListener('DOMContentLoaded', initTabEnhancements);
     } else {
-        initTabKeyboardNavigation();
+        initTabEnhancements();
     }
 })();

{sphinx_filter_tabs-1.2.2.dist-info → sphinx_filter_tabs-1.2.5.dist-info}/METADATA

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: sphinx-filter-tabs
-Version: 1.2.2
+Version: 1.2.5
 Summary: A Sphinx extension for accessible, CSS-first filterable content tabs.
 Author-email: Aputsiak Niels Janussen <aputtu+sphinx@gmail.com>
 License: GNU General Public License v3.0

sphinx_filter_tabs-1.2.5.dist-info/RECORD

@@ -0,0 +1,11 @@
+filter_tabs/__init__.py,sha256=VPpIhj4HaLeMX7ai7dZFkUm81ii2ePPGjCd9hsMjsN4,397
+filter_tabs/extension.py,sha256=Dspt9r8TVoYChHFvGsncuV01GEga7BOOsPaMwYdMQcg,18014
+filter_tabs/renderer.py,sha256=m0_sD5ujtT4rmhYlhm6vMgSn0W1WAJPJWaTjh6zXezY,9730
+filter_tabs/static/filter_tabs.css,sha256=EbsG5zdEv8g3rdV7y76CXSwEMiBaBTX01qFYDiXeJt0,5379
+filter_tabs/static/filter_tabs.js,sha256=URduEo1P8y_-TaT485U6APGXsdQg6rFBpib3yaNc-9g,3989
+sphinx_filter_tabs-1.2.5.dist-info/licenses/LICENSE,sha256=OXLcl0T2SZ8Pmy2_dmlvKuetivmyPd5m1q-Gyd-zaYY,35149
+sphinx_filter_tabs-1.2.5.dist-info/METADATA,sha256=nH86wxyNL4OAwRnPL0W8k4vJcj0mxKpoc_bk_2b2cv0,3483
+sphinx_filter_tabs-1.2.5.dist-info/WHEEL,sha256=_zCd3N1l69ArxyTb8rzEoP9TpbYXkqRFSNOD5OuxnTs,91
+sphinx_filter_tabs-1.2.5.dist-info/entry_points.txt,sha256=za_bQcueY8AHyq7XnnjkW9X3C-LsZjeERVQ_ds7jV1A,62
+sphinx_filter_tabs-1.2.5.dist-info/top_level.txt,sha256=K0Iy-6EsYYdvlyXdsJT0SQg-BLDBgT5-Y8ZKy5SNAfc,12
+sphinx_filter_tabs-1.2.5.dist-info/RECORD,,

sphinx_filter_tabs-1.2.2.dist-info/RECORD

@@ -1,11 +0,0 @@
-filter_tabs/__init__.py,sha256=VPpIhj4HaLeMX7ai7dZFkUm81ii2ePPGjCd9hsMjsN4,397
-filter_tabs/extension.py,sha256=Dspt9r8TVoYChHFvGsncuV01GEga7BOOsPaMwYdMQcg,18014
-filter_tabs/renderer.py,sha256=e_nUV67ojDHfEXWB7jFkclzy4fOLotluKBg573fGng8,10436
-filter_tabs/static/filter_tabs.css,sha256=V7y8BCp0UTQ1KXZNeIYtfz0Zt6b-uJPKYeXcx4PHz4A,3913
-filter_tabs/static/filter_tabs.js,sha256=-d_TJREyNxu9TtQNDLvQ0G5qCVWR2TxwrWmApGs2CBo,6559
-sphinx_filter_tabs-1.2.2.dist-info/licenses/LICENSE,sha256=OXLcl0T2SZ8Pmy2_dmlvKuetivmyPd5m1q-Gyd-zaYY,35149
-sphinx_filter_tabs-1.2.2.dist-info/METADATA,sha256=qX7ycCD1JfwXgju5W5pnlhoN1p09cnR_U9yUQZrFpBk,3483
-sphinx_filter_tabs-1.2.2.dist-info/WHEEL,sha256=_zCd3N1l69ArxyTb8rzEoP9TpbYXkqRFSNOD5OuxnTs,91
-sphinx_filter_tabs-1.2.2.dist-info/entry_points.txt,sha256=za_bQcueY8AHyq7XnnjkW9X3C-LsZjeERVQ_ds7jV1A,62
-sphinx_filter_tabs-1.2.2.dist-info/top_level.txt,sha256=K0Iy-6EsYYdvlyXdsJT0SQg-BLDBgT5-Y8ZKy5SNAfc,12
-sphinx_filter_tabs-1.2.2.dist-info/RECORD,,