@@ -18,30 +18,40 @@ Ordered by user impact.
1818- ** Where:** ` DataTableForm ` wraps the table; ` DataTableSearch ` and
1919 ` DataTablePerPageSelect ` each render their own ` <form> ` inside it.
2020 Snapshot ` data_table/full_frame ` holds three ` <form ` elements.
21- - ** Effect:** nested forms are invalid HTML. A browser ignores the inner
22- ` <form> ` start tags when a form is in scope, so the search input and the
23- per-page select become children of the outer bulk form, and
24- ` this.form.requestSubmit() ` in ` data_table_search_controller.js ` submits
25- the wrong form.
21+ - ** Effect:** nested forms are invalid HTML. The parser ignores the nested
22+ search form's start tag — with its attributes and its
23+ ` data-controller="ruby-ui--data-table-search" ` — and its end tag closes the
24+ outer bulk form early, so the search controller never connects and the
25+ per-page form that follows ends up outside the bulk form. The controller's
26+ ` this.element.requestSubmit() ` therefore never runs at all. (The golden
27+ snapshot keeps all three forms because the suite parses inside a
28+ ` <template> ` , where the form-pointer rule does not apply.)
2629- ** Fix:** render the search and per-page forms outside the bulk form, or
2730 make their controls reference it with the ` form= ` attribute; re-record
2831 ` data_table/* ` .
2932- ** 2.0 note:** Herb's ` NestingValidator ` will likely reject this at compile
30- time, which makes it a template adjustment in the DataTable migration.
31- Fixing it on 1.6 first keeps the migration a pure port.
33+ time, so the DataTable migration ports the three forms as they are and then
34+ restructures them — a template adjustment with a reviewed snapshot change,
35+ on the 2.0 line, since ` main ` stays as is.
3236
3337## 2. ` aria-* ` boolean attributes serialize as the empty string — #538
3438
35- - ** Where:** every ` aria: {hidden: true} ` , ` aria_disabled: true ` ,
36- ` aria_expanded: true ` in the catalog — breadcrumb separators and ellipsis,
37- ` CommandInput ` , and every decorative ` <svg aria-hidden> ` . Snapshots carry
38- ` aria-hidden="" ` , ` aria-disabled="" ` , ` aria-expanded="" ` .
39+ - ** Where:** the components that pass a boolean under the ` aria ` hash:
40+ ` aria: {hidden: true} ` in ` BreadcrumbSeparator ` , ` BreadcrumbEllipsis ` and
41+ ` PaginationEllipsis ` (also reached through ` DataTablePagination ` ),
42+ ` aria: {disabled: true} ` in ` BreadcrumbPage ` , ` aria_expanded: true ` in
43+ ` CommandInput ` . The breadcrumb, pagination, data_table and command
44+ snapshots carry ` aria-hidden="" ` , ` aria-disabled="" ` or ` aria-expanded="" ` .
45+ Components that pass the String ` "true" ` — ` InputOtpSlot ` ,
46+ ` NativeSelectIcon ` , ` AlertDialogContent ` — already serialize correctly and
47+ are not affected.
3948- ** Effect:** the ARIA value grammar accepts ` true ` /` false ` /` undefined ` ; an
40- empty string is invalid and browsers resolve it as * not set* . Decorative
41- icons are therefore exposed to assistive technology, "current" breadcrumb
42- items are not announced as disabled, and the command input's expanded
43- state is unset. This is Phlex's serialization of ` true ` (a bare
44- attribute), so it is library-wide, not one component.
49+ empty string is invalid and browsers resolve it as * not set* . The breadcrumb
50+ and pagination separators and ellipses are therefore exposed to assistive
51+ technology, "current" breadcrumb items are not announced as disabled, and the
52+ command input's expanded state is unset. This is Phlex's serialization of
53+ ` true ` under a nested hash (a bare attribute), so any component that passes
54+ a boolean there is affected — five today.
4555- ** Fix:** pass ` "true" ` (a String) for ` aria-* ` attributes, or add a
4656 serialization rule in ` Base ` that stringifies booleans under the ` aria `
4757 key; re-record everything that changes and review the diff.
0 commit comments