Bears FAQ Module For Joomla 4/5

A modern, accessible Joomla module that displays FAQ articles grouped as tabs and accordions based on article tags. Built with Bootstrap 5 and comprehensive accessibility features.

Features

Core Functionality

Tag-based Organization: Automatically groups FAQ articles by their assigned tags
Multiple Navigation Styles: Tabs, Pills, or List
Flexible Layouts: Horizontal or vertical tab orientations
Accordion Content: Each tab contains an accordion of FAQ questions and answers
Smart Fallback: Untagged articles are grouped under a "General" category

Styling and Layout

Color Customization: Active/inactive tab backgrounds, borders, tab font color, underline color
Layout Options: Alignment presets (left, right, centered, justified, equal width), tab gap, and rounded corners
Responsive Design: Works seamlessly across device sizes
Professional Appearance: Enhanced styling with borders and smooth transitions

Accessibility

WCAG 2.1 AA oriented patterns
Keyboard Navigation: Arrow keys, Home/End, Enter/Space
Screen Reader Optimized: Proper ARIA roles/labels and live announcements
Focus Management: Logical tab order and visible focus states
High Contrast and Reduced Motion support

Requirements

Joomla 4.x or 5.x
PHP 7.4+
Bootstrap 5 (loaded automatically by the module)

Installation

Download the module package
In Joomla Administrator, go to Extensions > Manage > Install
Upload the module package file
Go to Extensions > Modules to configure and assign the module

Content Setup

Create a Category for FAQs (e.g., "FAQ") under Content > Categories
Create Articles in that category for each question/answer
Create/Assign Tags to group related questions (articles can have multiple tags)
Optionally, set Tag Access to control who can see each group (e.g., set a tag to "Special")

Configuration

Basic Settings

FAQ Category (required): Category containing your FAQ articles
Max Articles: Maximum number of FAQ articles to display (default 100)
Tab Orientation: Horizontal or Vertical (default Horizontal)
Tab Style: Tabs, Pills, or List (default Tabs)
Tab Alignment: Left, Right, Centered, Space Between, Space Around, Justified, Equal Width (default Left)
Tab Gap (px): Space between tabs (default 2, 0–64)

Styling

Active Tab Background Color
Active Tab Underline Color (RGBA supported)
Inactive Tab Background Color
Tab Font Color
Question Color (accordion question links)
Border Color
Border Radius (px)

Advanced

Module Class Suffix
Caching: Use Global or No Caching
Cache Time (seconds)

List Style works best with vertical orientation. In list mode, inactive items display bullets and the active item is highlighted using your template's primary color.

Access Control (ACL)

The module respects Joomla view access levels on tags. Tabs for tags the viewer cannot access (for example, tags set to the Special access level) are not rendered.

If a tag's Access is Special, guests or users outside that level will not see the tab or its FAQs.
Logged-in users who belong to the tag's view level will see it normally.

Behavior Details

Tabs vs Pills vs List

Tabs: Traditional Bootstrap tabs with an underline and borders
Pills: Pill-shaped navigation with consistent active background
List: Optimized for vertical layout; shows bullets for inactive items and highlights the active item

Vertical Orientation

Uses Bootstrap flex-column for vertical navigation
Tab pane content appears adjacent under typical templates

CSS Variables

Adjust presentation via CSS custom properties (override in your template if desired):

.bearsfaq-tabs {
  --bfq-accent: var(--bs-primary);
  --bfq-active-tab-color: inherit;           /* active tab background */
  --bfq-inactive-tab-color: transparent;     /* inactive tab background */
  --bfq-tab-font-color: inherit;             /* tab/pill font color */
  --bfq-question-color: inherit;             /* accordion question links */
  --bfq-border-color: rgba(0,0,0,0.275);     /* tab borders */
  --bfq-active-underline-color: rgba(13,110,253,1); /* active underline color */
  --bfq-border-radius: 8px;                  /* top radius for tab corners */
  --bfq-tab-gap: 2px;                        /* gap between tabs */
  --bfq-tab-alignment: flex-start;           /* alignment within container */
}

Note: Underline height defaults to a subtle value. You can override it via CSS if desired.

JavaScript Enhancements

Keyboard navigation across tabs (Left/Right, Home/End)
Live announcements for screen readers on tab changes
Focus management and tabindex adjustments
Syncs active state in List style

Troubleshooting

Common Issues

No FAQs Displayed: Ensure the selected category exists and has published articles
Tags Not Grouping: Verify articles have tags; ensure tags are published
Styling Issues: Clear Joomla cache; check for template CSS conflicts; ensure Bootstrap 5 is loading
Accessibility: Test keyboard navigation and screen reader output; check console for JS errors

File Structure

mod_bearsfaq/
├── mod_bearsfaq.php          # Main module file
├── mod_bearsfaq.xml          # Module manifest
├── README.md                 # Documentation
├── LICENSE                   # GPL v3 license
├── language/
│   └── en-GB/
│       ├── en-GB.mod_bearsfaq.ini
│       └── en-GB.mod_bearsfaq.sys.ini
├── media/
│   ├── css/
│   │   └── mod_bearsfaq.css  # Styles
│   └── js/
│       └── mod_bearsfaq.js   # Accessibility enhancements
└── index.html                # This documentation article

Support & License

Licensed under the GNU General Public License v3.0. See LICENSE for details.

Issues: GitHub Issues
Community: Joomla forums

Credits

Author: N6REJ
Email: troy@hallhome.us
Website: https://hallhome.us
Framework: Joomla 4.x/5.x
UI Framework: Bootstrap 5
Accessibility: WCAG 2.1 AA oriented

software
faq