Explicit ARIA Roles vs. Accessible Component Refactor for Netbox Data Tables

Answer

Based on the constraints—preserve Bootstrap‑5 styling, layout, and existing JavaScript—adding explicit ARIA attributes to the current <table> markup is the approach that most reliably improves screen‑reader comprehension while keeping the visual and behavioral aspects unchanged.

Likely explanation

Native table elements already convey row/column relationships to assistive technology. Augmenting them with ARIA roles (role="table", role="row", role="columnheader", role="cell") and attributes such as scope, aria‑sort, and live‑region announcements supplies the missing information without altering the DOM structure that Bootstrap styles and JavaScript depend on.

Confirmed facts

• ARIA augmentation does not require replacing the <table> element, so existing Bootstrap classes (e.g., table, table‑striped) remain applied.
• Refactoring to a component library such as React‑Table replaces the native markup with wrapper <div>s; matching the current Bootstrap‑5 theme would necessitate re‑applying custom CSS overrides.
• For filter dropdowns and header controls, attaching aria‑label or aria‑describedby to the existing focusable element preserves keyboard navigation when the DOM order stays the same.
• A migration that adds attributes only can be rolled out instantly behind a feature flag, requiring no asset rebuild and thus zero downtime.

Steps to add ARIA attributes and labels

1. Ensure each <th> has scope="col" (or scope="row" for row headers).
2. Add role="table" to the <table> element if the surrounding context removes native table semantics; otherwise rely on native semantics and skip redundant roles.
3. On sortable headers, include aria‑sort="none|ascending|descending" and update a polite live region (<div role="status" aria-live="polite">) when the sort state changes.
4. For each filter <select> or button, add aria-label="Filter by …" or point to a hidden <span id="filterHelp"> with aria-describedby="filterHelp".
5. Verify that tab order moves through filters then into the table without alteration; arrow‑key navigation inside the table should remain functional if custom JS is preserved.

Migration strategy for zero‑downtime with custom themes

• Implement the ARIA changes behind a feature flag.
• Deploy to a staging environment that uses the exact custom Bootstrap overrides.
• Run automated visual regression and screen‑reader checks (NVDA/JAWS) to confirm layout, colors, and behavior are unchanged.
• If validation passes, enable the flag in production; the change is instantaneous because only attributes are added.
• Should a full component‑library refactor be considered later, wrap the new component in a shallow <div class="table table‑striped …> that mirrors the existing Bootstrap classes and re‑apply any custom theme overrides before cut‑over.

Missing diagnostic detail

To finalize the recommendation, could you confirm which custom Bootstrap classes or CSS overrides are applied to the table elements (e.g., .table‑striped‑custom, .table‑hover‑netbox)? Knowing these will ensure they remain intact during ARIA augmentation and any future component swap.