fix(a11y): remediate WCAG 2.2 AA failures across 9 elements

- validate: add aria-invalid on fields, aria-live on error messages
- virtual-list: add role=listbox/option, keyboard nav (Arrow/Home/End)
- dnd: replace deprecated aria-grabbed with aria-roledescription, add
  live-region screen reader announcements, role=button on draggables
- table sort: add tabindex=0 and Enter/Space keyboard activation
- table reorder: replace aria-grabbed with aria-roledescription
- accordion: add aria-expanded, aria-controls, role=region on panels
- popover: add role=dialog (respecting existing roles), aria-haspopup=dialog
- toast/stepper: already WCAG-compliant, no changes needed
- Update tests to match new ARIA attributes

Author: ErickXavier

__tests__/dnd.test.js

@@ -315,6 +315,7 @@ describe('Drag Directive', () => {
     el.dispatchEvent(new Event('dragend', { bubbles: true }));
     expect(el.classList.contains('nojs-dragging')).toBe(false);
     expect(el.getAttribute('aria-grabbed')).toBeNull();
+    expect(el.getAttribute('aria-roledescription')).toBe('draggable item');
   });
 
   test('26 - dragend dispatches drag-end custom event', () => {
@@ -346,6 +347,7 @@ describe('Drag Directive', () => {
 
     expect(_dndState.dragging).toBeTruthy();
     expect(el.getAttribute('aria-grabbed')).toBeNull();
+    expect(el.getAttribute('aria-roledescription')).toBe('draggable item');
     expect(el.classList.contains('nojs-dragging')).toBe(true);
   });
 
@@ -357,6 +359,7 @@ describe('Drag Directive', () => {
     el.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
     expect(_dndState.dragging).toBeNull();
     expect(el.getAttribute('aria-grabbed')).toBeNull();
+    expect(el.getAttribute('aria-roledescription')).toBe('draggable item');
     expect(el.classList.contains('nojs-dragging')).toBe(false);
   });
 });

__tests__/integrations.test.js

@@ -64,11 +64,11 @@ describe('Table + DnD: table-reorder directive', () => {
     expect(rows[2].draggable).toBe(true);
   });
 
-  test('2 - rows have aria-grabbed=false initially', () => {
+  test('2 - rows have aria-roledescription initially', () => {
     const { tbody } = setupReorderTable();
     const rows = tbody.querySelectorAll('tr');
     for (const row of rows) {
-      expect(row.getAttribute('aria-grabbed')).toBe('false');
+      expect(row.getAttribute('aria-roledescription')).toBe('draggable row');
     }
   });
 
@@ -94,7 +94,7 @@ describe('Table + DnD: table-reorder directive', () => {
     row.dispatchEvent(evt);
 
     expect(row.classList.contains('nojs-row-dragging')).toBe(true);
-    expect(row.getAttribute('aria-grabbed')).toBe('true');
+    expect(row.getAttribute('aria-roledescription')).toBe('draggable row');
   });
 
   test('5 - custom drag class is used', () => {
@@ -119,7 +119,7 @@ describe('Table + DnD: table-reorder directive', () => {
 
     row.dispatchEvent(new Event('dragend', { bubbles: true }));
     expect(row.classList.contains('nojs-row-dragging')).toBe(false);
-    expect(row.getAttribute('aria-grabbed')).toBe('false');
+    expect(row.getAttribute('aria-roledescription')).toBe('draggable row');
   });
 
   test('7 - dispatches table:reorder event on drop', () => {

__tests__/tooltip.test.js

@@ -224,7 +224,7 @@ describe('Popover Directive', () => {
 
   test('13 - popover trigger has correct ARIA attributes', () => {
     const { triggerEl } = setupPopover('my-popover');
-    expect(triggerEl.getAttribute('aria-haspopup')).toBe('true');
+    expect(triggerEl.getAttribute('aria-haspopup')).toBe('dialog');
     expect(triggerEl.getAttribute('aria-expanded')).toBe('false');
     expect(triggerEl.getAttribute('aria-controls')).toBe('my-popover');
   });

dist/cjs/nojs-elements.js

@@ -129,6 +129,7 @@ export function registerPopoverDirective(NoJS) {
 
       // Set native popover attribute for Popover API
       el.setAttribute("popover", "auto");
+      if (!el.getAttribute("role")) el.setAttribute("role", "dialog");
       el.classList.add("nojs-popover");
 
       const position = el.getAttribute("popover-position") || "bottom";
@@ -198,7 +199,7 @@ export function registerPopoverDirective(NoJS) {
         }
       }
 
-      el.setAttribute("aria-haspopup", "true");
+      el.setAttribute("aria-haspopup", "dialog");
       el.setAttribute("aria-expanded", "false");
       el.setAttribute("aria-controls", popoverId);