[{"data":1,"prerenderedAt":2820},["ShallowReactive",2],{"site-header-nav":3,"page-\u002Freact-nextjs-accessibility-patterns\u002Fform-handling-with-react-hook-form-a11y\u002F":156,"content-navigation":2746},[4,66,70],{"title":5,"path":6,"stem":7,"children":8},"Core Accessibility Principles For Modern Frameworks","\u002Fcore-accessibility-principles-for-modern-frameworks","core-accessibility-principles-for-modern-frameworks",[9,12,18,24,36,48,60],{"title":10,"path":6,"stem":11},"Core Accessibility Principles for Modern Frameworks","core-accessibility-principles-for-modern-frameworks\u002Findex",{"title":13,"path":14,"stem":15,"children":16},"Accessible Color Contrast & Theming","\u002Fcore-accessibility-principles-for-modern-frameworks\u002Faccessible-color-contrast-theming","core-accessibility-principles-for-modern-frameworks\u002Faccessible-color-contrast-theming\u002Findex",[17],{"title":13,"path":14,"stem":15},{"title":19,"path":20,"stem":21,"children":22},"Accessible Form Validation & Error States in Modern Frameworks","\u002Fcore-accessibility-principles-for-modern-frameworks\u002Faccessible-form-validation-error-states","core-accessibility-principles-for-modern-frameworks\u002Faccessible-form-validation-error-states\u002Findex",[23],{"title":19,"path":20,"stem":21},{"title":25,"path":26,"stem":27,"children":28},"Focus Management Strategies for SPAs","\u002Fcore-accessibility-principles-for-modern-frameworks\u002Ffocus-management-strategies-for-spas","core-accessibility-principles-for-modern-frameworks\u002Ffocus-management-strategies-for-spas\u002Findex",[29,30],{"title":25,"path":26,"stem":27},{"title":31,"path":32,"stem":33,"children":34},"Handling Focus Restoration After Dynamic Route Changes","\u002Fcore-accessibility-principles-for-modern-frameworks\u002Ffocus-management-strategies-for-spas\u002Fhandling-focus-restoration-after-dynamic-route-changes","core-accessibility-principles-for-modern-frameworks\u002Ffocus-management-strategies-for-spas\u002Fhandling-focus-restoration-after-dynamic-route-changes\u002Findex",[35],{"title":31,"path":32,"stem":33},{"title":37,"path":38,"stem":39,"children":40},"Keyboard Navigation Patterns for Modals","\u002Fcore-accessibility-principles-for-modern-frameworks\u002Fkeyboard-navigation-patterns-for-modals","core-accessibility-principles-for-modern-frameworks\u002Fkeyboard-navigation-patterns-for-modals\u002Findex",[41,42],{"title":37,"path":38,"stem":39},{"title":43,"path":44,"stem":45,"children":46},"Building Accessible Dropdowns Without External UI Kits","\u002Fcore-accessibility-principles-for-modern-frameworks\u002Fkeyboard-navigation-patterns-for-modals\u002Fbuilding-accessible-dropdowns-without-external-ui-kits","core-accessibility-principles-for-modern-frameworks\u002Fkeyboard-navigation-patterns-for-modals\u002Fbuilding-accessible-dropdowns-without-external-ui-kits\u002Findex",[47],{"title":43,"path":44,"stem":45},{"title":49,"path":50,"stem":51,"children":52},"Screen Reader Compatibility Testing for Modern Frameworks","\u002Fcore-accessibility-principles-for-modern-frameworks\u002Fscreen-reader-compatibility-testing","core-accessibility-principles-for-modern-frameworks\u002Fscreen-reader-compatibility-testing\u002Findex",[53,54],{"title":49,"path":50,"stem":51},{"title":55,"path":56,"stem":57,"children":58},"Testing ARIA Live Regions with Jest and Testing Library","\u002Fcore-accessibility-principles-for-modern-frameworks\u002Fscreen-reader-compatibility-testing\u002Ftesting-aria-live-regions-with-jest-and-testing-library","core-accessibility-principles-for-modern-frameworks\u002Fscreen-reader-compatibility-testing\u002Ftesting-aria-live-regions-with-jest-and-testing-library\u002Findex",[59],{"title":55,"path":56,"stem":57},{"title":61,"path":62,"stem":63,"children":64},"Semantic HTML vs ARIA in Component Trees","\u002Fcore-accessibility-principles-for-modern-frameworks\u002Fsemantic-html-vs-aria-in-component-trees","core-accessibility-principles-for-modern-frameworks\u002Fsemantic-html-vs-aria-in-component-trees\u002Findex",[65],{"title":61,"path":62,"stem":63},{"title":67,"path":68,"stem":69},"Modern Framework Accessibility","\u002F","index",{"title":71,"path":72,"stem":73,"children":74},"React Nextjs Accessibility Patterns","\u002Freact-nextjs-accessibility-patterns","react-nextjs-accessibility-patterns",[75,78,90,102,108,126,144],{"title":76,"path":72,"stem":77},"React & Next.js Accessibility Patterns","react-nextjs-accessibility-patterns\u002Findex",{"title":79,"path":80,"stem":81,"children":82},"Accessible Component Libraries in React","\u002Freact-nextjs-accessibility-patterns\u002Faccessible-component-libraries-in-react","react-nextjs-accessibility-patterns\u002Faccessible-component-libraries-in-react\u002Findex",[83,84],{"title":79,"path":80,"stem":81},{"title":85,"path":86,"stem":87,"children":88},"Building Accessible Tabs in React Without Radix UI","\u002Freact-nextjs-accessibility-patterns\u002Faccessible-component-libraries-in-react\u002Fbuilding-accessible-tabs-in-react-without-radix-ui","react-nextjs-accessibility-patterns\u002Faccessible-component-libraries-in-react\u002Fbuilding-accessible-tabs-in-react-without-radix-ui\u002Findex",[89],{"title":85,"path":86,"stem":87},{"title":91,"path":92,"stem":93,"children":94},"Dynamic Content & State Announcements in React & Next.js","\u002Freact-nextjs-accessibility-patterns\u002Fdynamic-content-state-announcements","react-nextjs-accessibility-patterns\u002Fdynamic-content-state-announcements\u002Findex",[95,96],{"title":91,"path":92,"stem":93},{"title":97,"path":98,"stem":99,"children":100},"Implementing React Context for Global Accessibility Preferences","\u002Freact-nextjs-accessibility-patterns\u002Fdynamic-content-state-announcements\u002Freact-context-for-global-accessibility-preferences","react-nextjs-accessibility-patterns\u002Fdynamic-content-state-announcements\u002Freact-context-for-global-accessibility-preferences\u002Findex",[101],{"title":97,"path":98,"stem":99},{"title":103,"path":104,"stem":105,"children":106},"Form Handling with React Hook Form & Accessibility","\u002Freact-nextjs-accessibility-patterns\u002Fform-handling-with-react-hook-form-a11y","react-nextjs-accessibility-patterns\u002Fform-handling-with-react-hook-form-a11y\u002Findex",[107],{"title":103,"path":104,"stem":105},{"title":109,"path":110,"stem":111,"children":112},"Next.js App Router & A11y: Implementation Guide for Modern Frameworks","\u002Freact-nextjs-accessibility-patterns\u002Fnextjs-app-router-a11y","react-nextjs-accessibility-patterns\u002Fnextjs-app-router-a11y\u002Findex",[113,114,120],{"title":109,"path":110,"stem":111},{"title":115,"path":116,"stem":117,"children":118},"Implementing Skip Links in Next.js App Router: A Step-by-Step Guide","\u002Freact-nextjs-accessibility-patterns\u002Fnextjs-app-router-a11y\u002Fimplementing-skip-links-in-nextjs-app-router","react-nextjs-accessibility-patterns\u002Fnextjs-app-router-a11y\u002Fimplementing-skip-links-in-nextjs-app-router\u002Findex",[119],{"title":115,"path":116,"stem":117},{"title":121,"path":122,"stem":123,"children":124},"Next.js Dynamic Imports and Keyboard Navigation: A Complete A11y Implementation Guide","\u002Freact-nextjs-accessibility-patterns\u002Fnextjs-app-router-a11y\u002Fnextjs-dynamic-imports-and-keyboard-navigation","react-nextjs-accessibility-patterns\u002Fnextjs-app-router-a11y\u002Fnextjs-dynamic-imports-and-keyboard-navigation\u002Findex",[125],{"title":121,"path":122,"stem":123},{"title":127,"path":128,"stem":129,"children":130},"React Hooks for Accessibility: Implementation Patterns & State Management","\u002Freact-nextjs-accessibility-patterns\u002Freact-hooks-for-accessibility","react-nextjs-accessibility-patterns\u002Freact-hooks-for-accessibility\u002Findex",[131,132,138],{"title":127,"path":128,"stem":129},{"title":133,"path":134,"stem":135,"children":136},"Fixing Focus Trap Issues in React Portals","\u002Freact-nextjs-accessibility-patterns\u002Freact-hooks-for-accessibility\u002Ffixing-focus-trap-issues-in-react-portals","react-nextjs-accessibility-patterns\u002Freact-hooks-for-accessibility\u002Ffixing-focus-trap-issues-in-react-portals\u002Findex",[137],{"title":133,"path":134,"stem":135},{"title":139,"path":140,"stem":141,"children":142},"Making React useEffect Accessible for Screen Readers","\u002Freact-nextjs-accessibility-patterns\u002Freact-hooks-for-accessibility\u002Fmaking-react-useeffect-accessible-for-screen-readers","react-nextjs-accessibility-patterns\u002Freact-hooks-for-accessibility\u002Fmaking-react-useeffect-accessible-for-screen-readers\u002Findex",[143],{"title":139,"path":140,"stem":141},{"title":145,"path":146,"stem":147,"children":148},"Server Components & Client-Side Interactivity","\u002Freact-nextjs-accessibility-patterns\u002Fserver-components-client-side-interactivity","react-nextjs-accessibility-patterns\u002Fserver-components-client-side-interactivity\u002Findex",[149,150],{"title":145,"path":146,"stem":147},{"title":151,"path":152,"stem":153,"children":154},"Handling Accessible Modals in Next.js 14 Server Components","\u002Freact-nextjs-accessibility-patterns\u002Fserver-components-client-side-interactivity\u002Fhandling-accessible-modals-in-nextjs-14-server-components","react-nextjs-accessibility-patterns\u002Fserver-components-client-side-interactivity\u002Fhandling-accessible-modals-in-nextjs-14-server-components\u002Findex",[155],{"title":151,"path":152,"stem":153},{"id":157,"title":103,"body":158,"date":2739,"description":2740,"extension":2741,"image":2739,"meta":2742,"modifiedAt":2739,"navigation":312,"noindex":2743,"path":104,"publishedAt":2739,"seo":2744,"stem":105,"updatedAt":2739,"__hash__":2745},"content\u002Freact-nextjs-accessibility-patterns\u002Fform-handling-with-react-hook-form-a11y\u002Findex.md",{"type":159,"value":160,"toc":2724},"minimark",[161,165,184,190,225,230,248,251,256,259,285,878,895,897,901,915,930,1146,1162,1164,1168,1171,1194,1672,1681,1683,1690,1703,1718,2589,2605,2607,2611,2667,2669,2673,2678,2681,2685,2692,2701,2710,2714,2720],[162,163,103],"h1",{"id":164},"form-handling-with-react-hook-form-accessibility",[166,167,168,169,174,175,178,179,183],"p",{},"Building accessible forms in modern React requires bridging uncontrolled state management with strict WCAG compliance. This guide demonstrates how to configure ",[170,171,173],"a",{"href":172},"\u002Freact-nextjs-accessibility-patterns\u002Freact-hooks-for-accessibility\u002F","React Hooks for Accessibility"," to maintain robust ARIA attributes, keyboard navigation, and screen reader announcements without sacrificing performance. By aligning with broader ",[170,176,76],{"href":177},"\u002Freact-nextjs-accessibility-patterns\u002F",", developers can ensure validation states, focus management, and dynamic content updates meet enterprise standards. When integrating with the ",[170,180,182],{"href":181},"\u002Freact-nextjs-accessibility-patterns\u002Fnextjs-app-router-a11y\u002F","Next.js App Router & A11y"," architecture, these patterns remain fully compatible across client and server boundaries.",[166,185,186],{},[187,188,189],"strong",{},"Target WCAG Criteria",[191,192,193,201,207,213,219],"ul",{},[194,195,196,200],"li",{},[197,198,199],"code",{},"1.3.1"," Info and Relationships",[194,202,203,206],{},[197,204,205],{},"2.1.1"," Keyboard",[194,208,209,212],{},[197,210,211],{},"3.3.1"," Error Identification",[194,214,215,218],{},[197,216,217],{},"3.3.3"," Error Suggestion",[194,220,221,224],{},[197,222,223],{},"4.1.2"," Name, Role, Value",[166,226,227],{},[187,228,229],{},"Key Implementation Principles",[191,231,232,235,238,241],{},[194,233,234],{},"Uncontrolled inputs require explicit ARIA wiring",[194,236,237],{},"Validation errors must be programmatically associated with fields",[194,239,240],{},"Focus management on submission failure is critical",[194,242,243,244,247],{},"RHF's ",[197,245,246],{},"useController"," bridges custom UI with native accessibility",[249,250],"hr",{},[252,253,255],"h2",{"id":254},"uncontrolled-architecture-native-accessibility","Uncontrolled Architecture & Native Accessibility",[166,257,258],{},"React Hook Form (RHF) defaults to uncontrolled inputs, which inherently preserves native HTML form semantics and reduces re-renders. However, uncontrolled architecture requires explicit ARIA intervention to maintain accessibility parity with controlled patterns.",[166,260,261,262,265,266,269,270,273,274,68,277,280,281,284],{},"Leverage native ",[197,263,264],{},"\u003Cform>"," and ",[197,267,268],{},"\u003Cinput>"," elements to establish baseline accessibility. Use ",[197,271,272],{},"register()"," to attach ",[197,275,276],{},"onChange",[197,278,279],{},"onBlur"," handlers without intercepting native focus behavior. Avoid over-abstracting inputs that rely on implicit ",[197,282,283],{},"\u003Clabel>"," associations, as React 18's concurrent rendering can occasionally desynchronize DOM mutations if custom wrappers delay native event propagation.",[286,287,292],"pre",{"className":288,"code":289,"language":290,"meta":291,"style":291},"language-tsx shiki shiki-themes github-light github-dark","'use client';\n\nimport { useForm } from 'react-hook-form';\nimport type { SubmitHandler } from 'react-hook-form';\n\ntype FormData = { email: string; password: string };\n\nexport default function NativeForm() {\n const { register, handleSubmit, formState: { errors } } = useForm\u003CFormData>();\n\n const onSubmit: SubmitHandler\u003CFormData> = (data) => console.log(data);\n\n return (\n \u003Cform onSubmit={handleSubmit(onSubmit)} noValidate>\n \u003Cdiv>\n \u003Clabel htmlFor=\"email\">Email Address\u003C\u002Flabel>\n \u003Cinput\n id=\"email\"\n type=\"email\"\n autoComplete=\"email\"\n aria-invalid={!!errors.email}\n aria-describedby={errors.email ? 'email-error' : undefined}\n {...register('email', {\n required: 'Email is required',\n pattern: { value: \u002F^\\S+@\\S+$\u002Fi, message: 'Invalid email format' }\n })}\n \u002F>\n {errors.email && (\n \u003Cp id=\"email-error\" role=\"status\" aria-live=\"polite\">\n {errors.email.message}\n \u003C\u002Fp>\n )}\n \u003C\u002Fdiv>\n {\u002F* Additional fields... *\u002F}\n \u003Cbutton type=\"submit\">Submit\u003C\u002Fbutton>\n \u003C\u002Fform>\n );\n}\n","tsx","",[197,293,294,307,314,332,349,354,394,399,417,463,468,511,516,525,553,563,586,594,605,614,624,640,666,686,698,739,745,751,762,794,800,810,816,825,836,858,867,873],{"__ignoreMap":291},[295,296,299,303],"span",{"class":297,"line":298},"line",1,[295,300,302],{"class":301},"sZZnC","'use client'",[295,304,306],{"class":305},"sVt8B",";\n",[295,308,310],{"class":297,"line":309},2,[295,311,313],{"emptyLinePlaceholder":312},true,"\n",[295,315,317,321,324,327,330],{"class":297,"line":316},3,[295,318,320],{"class":319},"szBVR","import",[295,322,323],{"class":305}," { useForm } ",[295,325,326],{"class":319},"from",[295,328,329],{"class":301}," 'react-hook-form'",[295,331,306],{"class":305},[295,333,335,337,340,343,345,347],{"class":297,"line":334},4,[295,336,320],{"class":319},[295,338,339],{"class":319}," type",[295,341,342],{"class":305}," { SubmitHandler } ",[295,344,326],{"class":319},[295,346,329],{"class":301},[295,348,306],{"class":305},[295,350,352],{"class":297,"line":351},5,[295,353,313],{"emptyLinePlaceholder":312},[295,355,357,360,364,367,370,374,377,381,384,387,389,391],{"class":297,"line":356},6,[295,358,359],{"class":319},"type",[295,361,363],{"class":362},"sScJk"," FormData",[295,365,366],{"class":319}," =",[295,368,369],{"class":305}," { ",[295,371,373],{"class":372},"s4XuR","email",[295,375,376],{"class":319},":",[295,378,380],{"class":379},"sj4cs"," string",[295,382,383],{"class":305},"; ",[295,385,386],{"class":372},"password",[295,388,376],{"class":319},[295,390,380],{"class":379},[295,392,393],{"class":305}," };\n",[295,395,397],{"class":297,"line":396},7,[295,398,313],{"emptyLinePlaceholder":312},[295,400,402,405,408,411,414],{"class":297,"line":401},8,[295,403,404],{"class":319},"export",[295,406,407],{"class":319}," default",[295,409,410],{"class":319}," function",[295,412,413],{"class":362}," NativeForm",[295,415,416],{"class":305},"() {\n",[295,418,420,423,425,428,431,434,436,439,442,445,448,451,454,457,460],{"class":297,"line":419},9,[295,421,422],{"class":319}," const",[295,424,369],{"class":305},[295,426,427],{"class":379},"register",[295,429,430],{"class":305},", ",[295,432,433],{"class":379},"handleSubmit",[295,435,430],{"class":305},[295,437,438],{"class":372},"formState",[295,440,441],{"class":305},": { ",[295,443,444],{"class":379},"errors",[295,446,447],{"class":305}," } } ",[295,449,450],{"class":319},"=",[295,452,453],{"class":362}," useForm",[295,455,456],{"class":305},"\u003C",[295,458,459],{"class":362},"FormData",[295,461,462],{"class":305},">();\n",[295,464,466],{"class":297,"line":465},10,[295,467,313],{"emptyLinePlaceholder":312},[295,469,471,473,476,478,481,483,485,488,490,493,496,499,502,505,508],{"class":297,"line":470},11,[295,472,422],{"class":319},[295,474,475],{"class":362}," onSubmit",[295,477,376],{"class":319},[295,479,480],{"class":362}," SubmitHandler",[295,482,456],{"class":305},[295,484,459],{"class":362},[295,486,487],{"class":305},"> ",[295,489,450],{"class":319},[295,491,492],{"class":305}," (",[295,494,495],{"class":372},"data",[295,497,498],{"class":305},") ",[295,500,501],{"class":319},"=>",[295,503,504],{"class":305}," console.",[295,506,507],{"class":362},"log",[295,509,510],{"class":305},"(data);\n",[295,512,514],{"class":297,"line":513},12,[295,515,313],{"emptyLinePlaceholder":312},[295,517,519,522],{"class":297,"line":518},13,[295,520,521],{"class":319}," return",[295,523,524],{"class":305}," (\n",[295,526,528,531,535,537,539,542,544,547,550],{"class":297,"line":527},14,[295,529,530],{"class":305}," \u003C",[295,532,534],{"class":533},"s9eBZ","form",[295,536,475],{"class":362},[295,538,450],{"class":319},[295,540,541],{"class":305},"{",[295,543,433],{"class":362},[295,545,546],{"class":305},"(onSubmit)} ",[295,548,549],{"class":362},"noValidate",[295,551,552],{"class":305},">\n",[295,554,556,558,561],{"class":297,"line":555},15,[295,557,530],{"class":305},[295,559,560],{"class":533},"div",[295,562,552],{"class":305},[295,564,566,568,571,574,576,579,582,584],{"class":297,"line":565},16,[295,567,530],{"class":305},[295,569,570],{"class":533},"label",[295,572,573],{"class":362}," htmlFor",[295,575,450],{"class":319},[295,577,578],{"class":301},"\"email\"",[295,580,581],{"class":305},">Email Address\u003C\u002F",[295,583,570],{"class":533},[295,585,552],{"class":305},[295,587,589,591],{"class":297,"line":588},17,[295,590,530],{"class":305},[295,592,593],{"class":533},"input\n",[295,595,597,600,602],{"class":297,"line":596},18,[295,598,599],{"class":362}," id",[295,601,450],{"class":319},[295,603,604],{"class":301},"\"email\"\n",[295,606,608,610,612],{"class":297,"line":607},19,[295,609,339],{"class":362},[295,611,450],{"class":319},[295,613,604],{"class":301},[295,615,617,620,622],{"class":297,"line":616},20,[295,618,619],{"class":362}," autoComplete",[295,621,450],{"class":319},[295,623,604],{"class":301},[295,625,627,630,632,634,637],{"class":297,"line":626},21,[295,628,629],{"class":362}," aria-invalid",[295,631,450],{"class":319},[295,633,541],{"class":305},[295,635,636],{"class":319},"!!",[295,638,639],{"class":305},"errors.email}\n",[295,641,643,646,648,651,654,657,660,663],{"class":297,"line":642},22,[295,644,645],{"class":362}," aria-describedby",[295,647,450],{"class":319},[295,649,650],{"class":305},"{errors.email ",[295,652,653],{"class":319},"?",[295,655,656],{"class":301}," 'email-error'",[295,658,659],{"class":319}," :",[295,661,662],{"class":379}," undefined",[295,664,665],{"class":305},"}\n",[295,667,669,672,675,677,680,683],{"class":297,"line":668},23,[295,670,671],{"class":305}," {",[295,673,674],{"class":319},"...",[295,676,427],{"class":362},[295,678,679],{"class":305},"(",[295,681,682],{"class":301},"'email'",[295,684,685],{"class":305},", {\n",[295,687,689,692,695],{"class":297,"line":688},24,[295,690,691],{"class":305}," required: ",[295,693,694],{"class":301},"'Email is required'",[295,696,697],{"class":305},",\n",[295,699,701,704,707,710,713,716,720,722,725,727,730,733,736],{"class":297,"line":700},25,[295,702,703],{"class":305}," pattern: { value:",[295,705,706],{"class":301}," \u002F",[295,708,709],{"class":319},"^",[295,711,712],{"class":379},"\\S",[295,714,715],{"class":319},"+",[295,717,719],{"class":718},"sA_wV","@",[295,721,712],{"class":379},[295,723,724],{"class":319},"+$",[295,726,68],{"class":301},[295,728,729],{"class":319},"i",[295,731,732],{"class":305},", message: ",[295,734,735],{"class":301},"'Invalid email format'",[295,737,738],{"class":305}," }\n",[295,740,742],{"class":297,"line":741},26,[295,743,744],{"class":305}," })}\n",[295,746,748],{"class":297,"line":747},27,[295,749,750],{"class":305}," \u002F>\n",[295,752,754,757,760],{"class":297,"line":753},28,[295,755,756],{"class":305}," {errors.email ",[295,758,759],{"class":319},"&&",[295,761,524],{"class":305},[295,763,765,767,769,771,773,776,779,781,784,787,789,792],{"class":297,"line":764},29,[295,766,530],{"class":305},[295,768,166],{"class":533},[295,770,599],{"class":362},[295,772,450],{"class":319},[295,774,775],{"class":301},"\"email-error\"",[295,777,778],{"class":362}," role",[295,780,450],{"class":319},[295,782,783],{"class":301},"\"status\"",[295,785,786],{"class":362}," aria-live",[295,788,450],{"class":319},[295,790,791],{"class":301},"\"polite\"",[295,793,552],{"class":305},[295,795,797],{"class":297,"line":796},30,[295,798,799],{"class":305}," {errors.email.message}\n",[295,801,803,806,808],{"class":297,"line":802},31,[295,804,805],{"class":305}," \u003C\u002F",[295,807,166],{"class":533},[295,809,552],{"class":305},[295,811,813],{"class":297,"line":812},32,[295,814,815],{"class":305}," )}\n",[295,817,819,821,823],{"class":297,"line":818},33,[295,820,805],{"class":305},[295,822,560],{"class":533},[295,824,552],{"class":305},[295,826,828,830,834],{"class":297,"line":827},34,[295,829,671],{"class":305},[295,831,833],{"class":832},"sJ8bj","\u002F* Additional fields... *\u002F",[295,835,665],{"class":305},[295,837,839,841,844,846,848,851,854,856],{"class":297,"line":838},35,[295,840,530],{"class":305},[295,842,843],{"class":533},"button",[295,845,339],{"class":362},[295,847,450],{"class":319},[295,849,850],{"class":301},"\"submit\"",[295,852,853],{"class":305},">Submit\u003C\u002F",[295,855,843],{"class":533},[295,857,552],{"class":305},[295,859,861,863,865],{"class":297,"line":860},36,[295,862,805],{"class":305},[295,864,534],{"class":533},[295,866,552],{"class":305},[295,868,870],{"class":297,"line":869},37,[295,871,872],{"class":305}," );\n",[295,874,876],{"class":297,"line":875},38,[295,877,665],{"class":305},[166,879,880,881,884,885,265,888,891,892,894],{},"🧪 ",[187,882,883],{},"Testing Hook:"," Verify that screen readers announce input names and types correctly using native DOM inspection. Ensure ",[197,886,887],{},"id",[197,889,890],{},"htmlFor"," attributes match exactly, and that ",[197,893,427],{}," does not strip native attributes during hydration.",[249,896],{},[252,898,900],{"id":899},"accessible-validation-error-association","Accessible Validation & Error Association",[166,902,903,904,907,908,265,911,914],{},"Dynamic validation states must be programmatically linked to their respective controls. RHF's ",[197,905,906],{},"formState.errors"," object provides the necessary state, but developers must manually wire ",[197,909,910],{},"aria-invalid",[197,912,913],{},"aria-describedby"," to maintain screen reader compatibility.",[166,916,917,918,921,922,925,926,929],{},"Render error messages in a predictable DOM order immediately following their inputs. Reserve ",[197,919,920],{},"role=\"alert\""," only for critical, non-recoverable validation states (e.g., server-side security blocks). For inline field validation, ",[197,923,924],{},"role=\"status\""," with ",[197,927,928],{},"aria-live=\"polite\""," prevents interrupting the user's typing flow while ensuring assistive technology queues the announcement.",[286,931,933],{"className":288,"code":932,"language":290,"meta":291,"style":291},"import { useForm, FieldValues } from 'react-hook-form';\n\ninterface FieldErrorProps {\n id: string;\n message?: string;\n}\n\nexport function FieldError({ id, message }: FieldErrorProps) {\n if (!message) return null;\n\n return (\n \u003Cp\n id={`${id}-error`}\n role=\"status\"\n aria-live=\"polite\"\n className=\"error-message\"\n >\n {message}\n \u003C\u002Fp>\n );\n}\n\n\u002F\u002F Usage inside form:\n\u002F\u002F \u003CFieldError id=\"email\" message={errors.email?.message} \u002F>\n",[197,934,935,948,952,963,973,985,989,993,1022,1043,1047,1053,1060,1078,1087,1096,1106,1111,1116,1124,1128,1132,1136,1141],{"__ignoreMap":291},[295,936,937,939,942,944,946],{"class":297,"line":298},[295,938,320],{"class":319},[295,940,941],{"class":305}," { useForm, FieldValues } ",[295,943,326],{"class":319},[295,945,329],{"class":301},[295,947,306],{"class":305},[295,949,950],{"class":297,"line":309},[295,951,313],{"emptyLinePlaceholder":312},[295,953,954,957,960],{"class":297,"line":316},[295,955,956],{"class":319},"interface",[295,958,959],{"class":362}," FieldErrorProps",[295,961,962],{"class":305}," {\n",[295,964,965,967,969,971],{"class":297,"line":334},[295,966,599],{"class":372},[295,968,376],{"class":319},[295,970,380],{"class":379},[295,972,306],{"class":305},[295,974,975,978,981,983],{"class":297,"line":351},[295,976,977],{"class":372}," message",[295,979,980],{"class":319},"?:",[295,982,380],{"class":379},[295,984,306],{"class":305},[295,986,987],{"class":297,"line":356},[295,988,665],{"class":305},[295,990,991],{"class":297,"line":396},[295,992,313],{"emptyLinePlaceholder":312},[295,994,995,997,999,1002,1005,1007,1009,1012,1015,1017,1019],{"class":297,"line":401},[295,996,404],{"class":319},[295,998,410],{"class":319},[295,1000,1001],{"class":362}," FieldError",[295,1003,1004],{"class":305},"({ ",[295,1006,887],{"class":372},[295,1008,430],{"class":305},[295,1010,1011],{"class":372},"message",[295,1013,1014],{"class":305}," }",[295,1016,376],{"class":319},[295,1018,959],{"class":362},[295,1020,1021],{"class":305},") {\n",[295,1023,1024,1027,1029,1032,1035,1038,1041],{"class":297,"line":419},[295,1025,1026],{"class":319}," if",[295,1028,492],{"class":305},[295,1030,1031],{"class":319},"!",[295,1033,1034],{"class":305},"message) ",[295,1036,1037],{"class":319},"return",[295,1039,1040],{"class":379}," null",[295,1042,306],{"class":305},[295,1044,1045],{"class":297,"line":465},[295,1046,313],{"emptyLinePlaceholder":312},[295,1048,1049,1051],{"class":297,"line":470},[295,1050,521],{"class":319},[295,1052,524],{"class":305},[295,1054,1055,1057],{"class":297,"line":513},[295,1056,530],{"class":305},[295,1058,1059],{"class":533},"p\n",[295,1061,1062,1064,1066,1068,1071,1073,1076],{"class":297,"line":518},[295,1063,599],{"class":362},[295,1065,450],{"class":319},[295,1067,541],{"class":305},[295,1069,1070],{"class":301},"`${",[295,1072,887],{"class":305},[295,1074,1075],{"class":301},"}-error`",[295,1077,665],{"class":305},[295,1079,1080,1082,1084],{"class":297,"line":527},[295,1081,778],{"class":362},[295,1083,450],{"class":319},[295,1085,1086],{"class":301},"\"status\"\n",[295,1088,1089,1091,1093],{"class":297,"line":555},[295,1090,786],{"class":362},[295,1092,450],{"class":319},[295,1094,1095],{"class":301},"\"polite\"\n",[295,1097,1098,1101,1103],{"class":297,"line":565},[295,1099,1100],{"class":362}," className",[295,1102,450],{"class":319},[295,1104,1105],{"class":301},"\"error-message\"\n",[295,1107,1108],{"class":297,"line":588},[295,1109,1110],{"class":305}," >\n",[295,1112,1113],{"class":297,"line":596},[295,1114,1115],{"class":305}," {message}\n",[295,1117,1118,1120,1122],{"class":297,"line":607},[295,1119,805],{"class":305},[295,1121,166],{"class":533},[295,1123,552],{"class":305},[295,1125,1126],{"class":297,"line":616},[295,1127,872],{"class":305},[295,1129,1130],{"class":297,"line":626},[295,1131,665],{"class":305},[295,1133,1134],{"class":297,"line":642},[295,1135,313],{"emptyLinePlaceholder":312},[295,1137,1138],{"class":297,"line":668},[295,1139,1140],{"class":832},"\u002F\u002F Usage inside form:\n",[295,1142,1143],{"class":297,"line":688},[295,1144,1145],{"class":832},"\u002F\u002F \u003CFieldError id=\"email\" message={errors.email?.message} \u002F>\n",[166,1147,880,1148,1150,1151,1153,1154,1157,1158,1161],{},[187,1149,883],{}," Test with VoiceOver (macOS\u002FiOS) and NVDA (Windows) to confirm error messages are read immediately after invalid input focus. Validate that ",[197,1152,910],{}," toggles from ",[197,1155,1156],{},"false"," to ",[197,1159,1160],{},"true"," synchronously with validation state updates.",[249,1163],{},[252,1165,1167],{"id":1166},"focus-management-submission-flow","Focus Management & Submission Flow",[166,1169,1170],{},"Keyboard users lose context when form submission fails validation. Programmatic focus routing must be implemented to return focus to the first invalid field, preventing disorientation during error cycles.",[166,1172,1173,1174,1177,1178,1181,1182,1185,1186,1189,1190,1193],{},"Use the ",[197,1175,1176],{},"handleSubmit()"," error callback to intercept validation failures. Store field references via ",[197,1179,1180],{},"useRef"," or leverage RHF's internal registry to route focus. Announce submission status via an ",[197,1183,1184],{},"aria-live"," region to provide non-visual feedback. In React 18, wrap focus shifts in ",[197,1187,1188],{},"startTransition"," or ",[197,1191,1192],{},"requestAnimationFrame"," to avoid layout thrashing during concurrent updates.",[286,1195,1197],{"className":288,"code":1196,"language":290,"meta":291,"style":291},"'use client';\n\nimport { useForm, useId, useRef } from 'react-hook-form';\nimport { startTransition } from 'react';\n\nexport default function FocusManagedForm() {\n const { register, handleSubmit, formState: { errors, isSubmitting } } = useForm();\n const statusId = useId();\n const formRef = useRef\u003CHTMLFormElement>(null);\n\n const onError = () => {\n \u002F\u002F Find first invalid field and focus it\n const firstInvalid = Object.keys(errors)[0];\n if (firstInvalid) {\n const input = formRef.current?.querySelector(`[name=\"${firstInvalid}\"]`) as HTMLElement;\n startTransition(() => input?.focus());\n }\n };\n\n const onSubmit = (data: any) => {\n \u002F\u002F Simulate async submission\n setTimeout(() => console.log('Submitted', data), 1000);\n };\n\n return (\n \u003Cform ref={formRef} onSubmit={handleSubmit(onSubmit, onError)} noValidate>\n {\u002F* Fields... *\u002F}\n \u003Cdiv aria-live=\"assertive\" id={statusId} className=\"sr-only\">\n {isSubmitting ? 'Submitting form...' : ''}\n \u003C\u002Fdiv>\n \u003Cbutton type=\"submit\" disabled={isSubmitting}>\n {isSubmitting ? 'Processing...' : 'Submit'}\n \u003C\u002Fbutton>\n \u003C\u002Fform>\n );\n}\n",[197,1198,1199,1205,1209,1222,1236,1240,1253,1287,1301,1327,1331,1347,1352,1376,1383,1419,1438,1442,1446,1450,1473,1478,1504,1508,1512,1518,1548,1557,1587,1604,1612,1632,1648,1656,1664,1668],{"__ignoreMap":291},[295,1200,1201,1203],{"class":297,"line":298},[295,1202,302],{"class":301},[295,1204,306],{"class":305},[295,1206,1207],{"class":297,"line":309},[295,1208,313],{"emptyLinePlaceholder":312},[295,1210,1211,1213,1216,1218,1220],{"class":297,"line":316},[295,1212,320],{"class":319},[295,1214,1215],{"class":305}," { useForm, useId, useRef } ",[295,1217,326],{"class":319},[295,1219,329],{"class":301},[295,1221,306],{"class":305},[295,1223,1224,1226,1229,1231,1234],{"class":297,"line":334},[295,1225,320],{"class":319},[295,1227,1228],{"class":305}," { startTransition } ",[295,1230,326],{"class":319},[295,1232,1233],{"class":301}," 'react'",[295,1235,306],{"class":305},[295,1237,1238],{"class":297,"line":351},[295,1239,313],{"emptyLinePlaceholder":312},[295,1241,1242,1244,1246,1248,1251],{"class":297,"line":356},[295,1243,404],{"class":319},[295,1245,407],{"class":319},[295,1247,410],{"class":319},[295,1249,1250],{"class":362}," FocusManagedForm",[295,1252,416],{"class":305},[295,1254,1255,1257,1259,1261,1263,1265,1267,1269,1271,1273,1275,1278,1280,1282,1284],{"class":297,"line":396},[295,1256,422],{"class":319},[295,1258,369],{"class":305},[295,1260,427],{"class":379},[295,1262,430],{"class":305},[295,1264,433],{"class":379},[295,1266,430],{"class":305},[295,1268,438],{"class":372},[295,1270,441],{"class":305},[295,1272,444],{"class":379},[295,1274,430],{"class":305},[295,1276,1277],{"class":379},"isSubmitting",[295,1279,447],{"class":305},[295,1281,450],{"class":319},[295,1283,453],{"class":362},[295,1285,1286],{"class":305},"();\n",[295,1288,1289,1291,1294,1296,1299],{"class":297,"line":401},[295,1290,422],{"class":319},[295,1292,1293],{"class":379}," statusId",[295,1295,366],{"class":319},[295,1297,1298],{"class":362}," useId",[295,1300,1286],{"class":305},[295,1302,1303,1305,1308,1310,1313,1315,1318,1321,1324],{"class":297,"line":419},[295,1304,422],{"class":319},[295,1306,1307],{"class":379}," formRef",[295,1309,366],{"class":319},[295,1311,1312],{"class":362}," useRef",[295,1314,456],{"class":305},[295,1316,1317],{"class":362},"HTMLFormElement",[295,1319,1320],{"class":305},">(",[295,1322,1323],{"class":379},"null",[295,1325,1326],{"class":305},");\n",[295,1328,1329],{"class":297,"line":465},[295,1330,313],{"emptyLinePlaceholder":312},[295,1332,1333,1335,1338,1340,1343,1345],{"class":297,"line":470},[295,1334,422],{"class":319},[295,1336,1337],{"class":362}," onError",[295,1339,366],{"class":319},[295,1341,1342],{"class":305}," () ",[295,1344,501],{"class":319},[295,1346,962],{"class":305},[295,1348,1349],{"class":297,"line":513},[295,1350,1351],{"class":832}," \u002F\u002F Find first invalid field and focus it\n",[295,1353,1354,1356,1359,1361,1364,1367,1370,1373],{"class":297,"line":518},[295,1355,422],{"class":319},[295,1357,1358],{"class":379}," firstInvalid",[295,1360,366],{"class":319},[295,1362,1363],{"class":305}," Object.",[295,1365,1366],{"class":362},"keys",[295,1368,1369],{"class":305},"(errors)[",[295,1371,1372],{"class":379},"0",[295,1374,1375],{"class":305},"];\n",[295,1377,1378,1380],{"class":297,"line":527},[295,1379,1026],{"class":319},[295,1381,1382],{"class":305}," (firstInvalid) {\n",[295,1384,1385,1387,1390,1392,1395,1398,1400,1403,1406,1409,1411,1414,1417],{"class":297,"line":555},[295,1386,422],{"class":319},[295,1388,1389],{"class":379}," input",[295,1391,366],{"class":319},[295,1393,1394],{"class":305}," formRef.current?.",[295,1396,1397],{"class":362},"querySelector",[295,1399,679],{"class":305},[295,1401,1402],{"class":301},"`[name=\"${",[295,1404,1405],{"class":305},"firstInvalid",[295,1407,1408],{"class":301},"}\"]`",[295,1410,498],{"class":305},[295,1412,1413],{"class":319},"as",[295,1415,1416],{"class":362}," HTMLElement",[295,1418,306],{"class":305},[295,1420,1421,1424,1427,1429,1432,1435],{"class":297,"line":565},[295,1422,1423],{"class":362}," startTransition",[295,1425,1426],{"class":305},"(() ",[295,1428,501],{"class":319},[295,1430,1431],{"class":305}," input?.",[295,1433,1434],{"class":362},"focus",[295,1436,1437],{"class":305},"());\n",[295,1439,1440],{"class":297,"line":588},[295,1441,738],{"class":305},[295,1443,1444],{"class":297,"line":596},[295,1445,393],{"class":305},[295,1447,1448],{"class":297,"line":607},[295,1449,313],{"emptyLinePlaceholder":312},[295,1451,1452,1454,1456,1458,1460,1462,1464,1467,1469,1471],{"class":297,"line":616},[295,1453,422],{"class":319},[295,1455,475],{"class":362},[295,1457,366],{"class":319},[295,1459,492],{"class":305},[295,1461,495],{"class":372},[295,1463,376],{"class":319},[295,1465,1466],{"class":379}," any",[295,1468,498],{"class":305},[295,1470,501],{"class":319},[295,1472,962],{"class":305},[295,1474,1475],{"class":297,"line":626},[295,1476,1477],{"class":832}," \u002F\u002F Simulate async submission\n",[295,1479,1480,1483,1485,1487,1489,1491,1493,1496,1499,1502],{"class":297,"line":642},[295,1481,1482],{"class":362}," setTimeout",[295,1484,1426],{"class":305},[295,1486,501],{"class":319},[295,1488,504],{"class":305},[295,1490,507],{"class":362},[295,1492,679],{"class":305},[295,1494,1495],{"class":301},"'Submitted'",[295,1497,1498],{"class":305},", data), ",[295,1500,1501],{"class":379},"1000",[295,1503,1326],{"class":305},[295,1505,1506],{"class":297,"line":668},[295,1507,393],{"class":305},[295,1509,1510],{"class":297,"line":688},[295,1511,313],{"emptyLinePlaceholder":312},[295,1513,1514,1516],{"class":297,"line":700},[295,1515,521],{"class":319},[295,1517,524],{"class":305},[295,1519,1520,1522,1524,1527,1529,1532,1535,1537,1539,1541,1544,1546],{"class":297,"line":741},[295,1521,530],{"class":305},[295,1523,534],{"class":533},[295,1525,1526],{"class":362}," ref",[295,1528,450],{"class":319},[295,1530,1531],{"class":305},"{formRef} ",[295,1533,1534],{"class":362},"onSubmit",[295,1536,450],{"class":319},[295,1538,541],{"class":305},[295,1540,433],{"class":362},[295,1542,1543],{"class":305},"(onSubmit, onError)} ",[295,1545,549],{"class":362},[295,1547,552],{"class":305},[295,1549,1550,1552,1555],{"class":297,"line":747},[295,1551,671],{"class":305},[295,1553,1554],{"class":832},"\u002F* Fields... *\u002F",[295,1556,665],{"class":305},[295,1558,1559,1561,1563,1565,1567,1570,1572,1574,1577,1580,1582,1585],{"class":297,"line":753},[295,1560,530],{"class":305},[295,1562,560],{"class":533},[295,1564,786],{"class":362},[295,1566,450],{"class":319},[295,1568,1569],{"class":301},"\"assertive\"",[295,1571,599],{"class":362},[295,1573,450],{"class":319},[295,1575,1576],{"class":305},"{statusId} ",[295,1578,1579],{"class":362},"className",[295,1581,450],{"class":319},[295,1583,1584],{"class":301},"\"sr-only\"",[295,1586,552],{"class":305},[295,1588,1589,1592,1594,1597,1599,1602],{"class":297,"line":764},[295,1590,1591],{"class":305}," {isSubmitting ",[295,1593,653],{"class":319},[295,1595,1596],{"class":301}," 'Submitting form...'",[295,1598,659],{"class":319},[295,1600,1601],{"class":301}," ''",[295,1603,665],{"class":305},[295,1605,1606,1608,1610],{"class":297,"line":796},[295,1607,805],{"class":305},[295,1609,560],{"class":533},[295,1611,552],{"class":305},[295,1613,1614,1616,1618,1620,1622,1624,1627,1629],{"class":297,"line":802},[295,1615,530],{"class":305},[295,1617,843],{"class":533},[295,1619,339],{"class":362},[295,1621,450],{"class":319},[295,1623,850],{"class":301},[295,1625,1626],{"class":362}," disabled",[295,1628,450],{"class":319},[295,1630,1631],{"class":305},"{isSubmitting}>\n",[295,1633,1634,1636,1638,1641,1643,1646],{"class":297,"line":812},[295,1635,1591],{"class":305},[295,1637,653],{"class":319},[295,1639,1640],{"class":301}," 'Processing...'",[295,1642,659],{"class":319},[295,1644,1645],{"class":301}," 'Submit'",[295,1647,665],{"class":305},[295,1649,1650,1652,1654],{"class":297,"line":818},[295,1651,805],{"class":305},[295,1653,843],{"class":533},[295,1655,552],{"class":305},[295,1657,1658,1660,1662],{"class":297,"line":827},[295,1659,805],{"class":305},[295,1661,534],{"class":533},[295,1663,552],{"class":305},[295,1665,1666],{"class":297,"line":838},[295,1667,872],{"class":305},[295,1669,1670],{"class":297,"line":860},[295,1671,665],{"class":305},[166,1673,880,1674,1676,1677,1680],{},[187,1675,883],{}," Validate that keyboard-only users can navigate directly to the first error after a failed submit attempt. Confirm that ",[197,1678,1679],{},"aria-live=\"assertive\""," announces submission state without trapping focus.",[249,1682],{},[252,1684,1686,1687,1689],{"id":1685},"custom-components-usecontroller-integration","Custom Components & ",[197,1688,246],{}," Integration",[166,1691,1692,1693,1695,1696,265,1699,1702],{},"Bridging RHF state with complex UI components (dropdowns, toggles, date pickers) requires controlled wrapper patterns. ",[197,1694,246],{}," exposes ",[197,1697,1698],{},"field",[197,1700,1701],{},"fieldState",", enabling seamless integration while preserving accessibility.",[166,1704,1705,1706,430,1709,430,1711,1713,1714,1717],{},"Forward ",[197,1707,1708],{},"ref",[197,1710,276],{},[197,1712,279],{},", and ARIA attributes to the underlying interactive element. Maintain consistent keyboard navigation patterns (Arrow keys, Escape, Enter). When rendering dropdowns or modals via React Portals, ensure ",[197,1715,1716],{},"aria-controls"," points to the portal's root element, and implement focus trapping to prevent keyboard escape during interaction.",[286,1719,1721],{"className":288,"code":1720,"language":290,"meta":291,"style":291},"'use client';\n\nimport { useController, useForm } from 'react-hook-form';\nimport { useState, useRef, useEffect } from 'react';\n\ninterface CustomSelectProps {\n name: string;\n control: any;\n options: { value: string; label: string }[];\n}\n\nexport function AccessibleSelect({ name, control, options }: CustomSelectProps) {\n const { field, fieldState } = useController({ name, control });\n const [isOpen, setIsOpen] = useState(false);\n const listboxRef = useRef\u003CHTMLUListElement>(null);\n\n useEffect(() => {\n if (isOpen) listboxRef.current?.focus();\n }, [isOpen]);\n\n return (\n \u003Cdiv className=\"custom-select-wrapper\">\n \u003Cbutton\n type=\"button\"\n aria-haspopup=\"listbox\"\n aria-expanded={isOpen}\n aria-controls={`${name}-listbox`}\n aria-invalid={fieldState.invalid}\n aria-describedby={fieldState.invalid ? `${name}-error` : undefined}\n onClick={() => setIsOpen(!isOpen)}\n onBlur={() => setIsOpen(false)}\n onKeyDown={(e) => {\n if (e.key === 'Escape') setIsOpen(false);\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n setIsOpen(!isOpen);\n }\n }}\n >\n {options.find(o => o.value === field.value)?.label || 'Select...'}\n \u003C\u002Fbutton>\n\n {isOpen && (\n \u003Cul\n id={`${name}-listbox`}\n ref={listboxRef}\n role=\"listbox\"\n tabIndex={-1}\n aria-label=\"Options\"\n >\n {options.map(opt => (\n \u003Cli\n key={opt.value}\n role=\"option\"\n aria-selected={field.value === opt.value}\n onClick={() => {\n field.onChange(opt.value);\n setIsOpen(false);\n }}\n >\n {opt.label}\n \u003C\u002Fli>\n ))}\n \u003C\u002Ful>\n )}\n\n {fieldState.error && (\n \u003Cp id={`${name}-error`} role=\"status\" aria-live=\"polite\">\n {fieldState.error.message}\n \u003C\u002Fp>\n )}\n \u003C\u002Fdiv>\n );\n}\n",[197,1722,1723,1729,1733,1746,1759,1763,1772,1783,1794,1821,1825,1829,1861,1884,1913,1935,1939,1950,1961,1966,1970,1976,1991,1998,2007,2017,2027,2045,2054,2078,2100,2120,2139,2162,2186,2196,2207,2211,2216,2221,2254,2263,2268,2278,2286,2303,2313,2322,2340,2351,2356,2373,2381,2392,2402,2418,2431,2442,2453,2458,2463,2469,2478,2484,2493,2498,2503,2513,2550,2556,2565,2570,2579,2584],{"__ignoreMap":291},[295,1724,1725,1727],{"class":297,"line":298},[295,1726,302],{"class":301},[295,1728,306],{"class":305},[295,1730,1731],{"class":297,"line":309},[295,1732,313],{"emptyLinePlaceholder":312},[295,1734,1735,1737,1740,1742,1744],{"class":297,"line":316},[295,1736,320],{"class":319},[295,1738,1739],{"class":305}," { useController, useForm } ",[295,1741,326],{"class":319},[295,1743,329],{"class":301},[295,1745,306],{"class":305},[295,1747,1748,1750,1753,1755,1757],{"class":297,"line":334},[295,1749,320],{"class":319},[295,1751,1752],{"class":305}," { useState, useRef, useEffect } ",[295,1754,326],{"class":319},[295,1756,1233],{"class":301},[295,1758,306],{"class":305},[295,1760,1761],{"class":297,"line":351},[295,1762,313],{"emptyLinePlaceholder":312},[295,1764,1765,1767,1770],{"class":297,"line":356},[295,1766,956],{"class":319},[295,1768,1769],{"class":362}," CustomSelectProps",[295,1771,962],{"class":305},[295,1773,1774,1777,1779,1781],{"class":297,"line":396},[295,1775,1776],{"class":372}," name",[295,1778,376],{"class":319},[295,1780,380],{"class":379},[295,1782,306],{"class":305},[295,1784,1785,1788,1790,1792],{"class":297,"line":401},[295,1786,1787],{"class":372}," control",[295,1789,376],{"class":319},[295,1791,1466],{"class":379},[295,1793,306],{"class":305},[295,1795,1796,1799,1801,1803,1806,1808,1810,1812,1814,1816,1818],{"class":297,"line":419},[295,1797,1798],{"class":372}," options",[295,1800,376],{"class":319},[295,1802,369],{"class":305},[295,1804,1805],{"class":372},"value",[295,1807,376],{"class":319},[295,1809,380],{"class":379},[295,1811,383],{"class":305},[295,1813,570],{"class":372},[295,1815,376],{"class":319},[295,1817,380],{"class":379},[295,1819,1820],{"class":305}," }[];\n",[295,1822,1823],{"class":297,"line":465},[295,1824,665],{"class":305},[295,1826,1827],{"class":297,"line":470},[295,1828,313],{"emptyLinePlaceholder":312},[295,1830,1831,1833,1835,1838,1840,1843,1845,1848,1850,1853,1855,1857,1859],{"class":297,"line":513},[295,1832,404],{"class":319},[295,1834,410],{"class":319},[295,1836,1837],{"class":362}," AccessibleSelect",[295,1839,1004],{"class":305},[295,1841,1842],{"class":372},"name",[295,1844,430],{"class":305},[295,1846,1847],{"class":372},"control",[295,1849,430],{"class":305},[295,1851,1852],{"class":372},"options",[295,1854,1014],{"class":305},[295,1856,376],{"class":319},[295,1858,1769],{"class":362},[295,1860,1021],{"class":305},[295,1862,1863,1865,1867,1869,1871,1873,1876,1878,1881],{"class":297,"line":518},[295,1864,422],{"class":319},[295,1866,369],{"class":305},[295,1868,1698],{"class":379},[295,1870,430],{"class":305},[295,1872,1701],{"class":379},[295,1874,1875],{"class":305}," } ",[295,1877,450],{"class":319},[295,1879,1880],{"class":362}," useController",[295,1882,1883],{"class":305},"({ name, control });\n",[295,1885,1886,1888,1891,1894,1896,1899,1902,1904,1907,1909,1911],{"class":297,"line":527},[295,1887,422],{"class":319},[295,1889,1890],{"class":305}," [",[295,1892,1893],{"class":379},"isOpen",[295,1895,430],{"class":305},[295,1897,1898],{"class":379},"setIsOpen",[295,1900,1901],{"class":305},"] ",[295,1903,450],{"class":319},[295,1905,1906],{"class":362}," useState",[295,1908,679],{"class":305},[295,1910,1156],{"class":379},[295,1912,1326],{"class":305},[295,1914,1915,1917,1920,1922,1924,1926,1929,1931,1933],{"class":297,"line":555},[295,1916,422],{"class":319},[295,1918,1919],{"class":379}," listboxRef",[295,1921,366],{"class":319},[295,1923,1312],{"class":362},[295,1925,456],{"class":305},[295,1927,1928],{"class":362},"HTMLUListElement",[295,1930,1320],{"class":305},[295,1932,1323],{"class":379},[295,1934,1326],{"class":305},[295,1936,1937],{"class":297,"line":565},[295,1938,313],{"emptyLinePlaceholder":312},[295,1940,1941,1944,1946,1948],{"class":297,"line":588},[295,1942,1943],{"class":362}," useEffect",[295,1945,1426],{"class":305},[295,1947,501],{"class":319},[295,1949,962],{"class":305},[295,1951,1952,1954,1957,1959],{"class":297,"line":596},[295,1953,1026],{"class":319},[295,1955,1956],{"class":305}," (isOpen) listboxRef.current?.",[295,1958,1434],{"class":362},[295,1960,1286],{"class":305},[295,1962,1963],{"class":297,"line":607},[295,1964,1965],{"class":305}," }, [isOpen]);\n",[295,1967,1968],{"class":297,"line":616},[295,1969,313],{"emptyLinePlaceholder":312},[295,1971,1972,1974],{"class":297,"line":626},[295,1973,521],{"class":319},[295,1975,524],{"class":305},[295,1977,1978,1980,1982,1984,1986,1989],{"class":297,"line":642},[295,1979,530],{"class":305},[295,1981,560],{"class":533},[295,1983,1100],{"class":362},[295,1985,450],{"class":319},[295,1987,1988],{"class":301},"\"custom-select-wrapper\"",[295,1990,552],{"class":305},[295,1992,1993,1995],{"class":297,"line":668},[295,1994,530],{"class":305},[295,1996,1997],{"class":533},"button\n",[295,1999,2000,2002,2004],{"class":297,"line":688},[295,2001,339],{"class":362},[295,2003,450],{"class":319},[295,2005,2006],{"class":301},"\"button\"\n",[295,2008,2009,2012,2014],{"class":297,"line":700},[295,2010,2011],{"class":362}," aria-haspopup",[295,2013,450],{"class":319},[295,2015,2016],{"class":301},"\"listbox\"\n",[295,2018,2019,2022,2024],{"class":297,"line":741},[295,2020,2021],{"class":362}," aria-expanded",[295,2023,450],{"class":319},[295,2025,2026],{"class":305},"{isOpen}\n",[295,2028,2029,2032,2034,2036,2038,2040,2043],{"class":297,"line":747},[295,2030,2031],{"class":362}," aria-controls",[295,2033,450],{"class":319},[295,2035,541],{"class":305},[295,2037,1070],{"class":301},[295,2039,1842],{"class":305},[295,2041,2042],{"class":301},"}-listbox`",[295,2044,665],{"class":305},[295,2046,2047,2049,2051],{"class":297,"line":753},[295,2048,629],{"class":362},[295,2050,450],{"class":319},[295,2052,2053],{"class":305},"{fieldState.invalid}\n",[295,2055,2056,2058,2060,2063,2065,2068,2070,2072,2074,2076],{"class":297,"line":764},[295,2057,645],{"class":362},[295,2059,450],{"class":319},[295,2061,2062],{"class":305},"{fieldState.invalid ",[295,2064,653],{"class":319},[295,2066,2067],{"class":301}," `${",[295,2069,1842],{"class":305},[295,2071,1075],{"class":301},[295,2073,659],{"class":319},[295,2075,662],{"class":379},[295,2077,665],{"class":305},[295,2079,2080,2083,2085,2088,2090,2093,2095,2097],{"class":297,"line":796},[295,2081,2082],{"class":362}," onClick",[295,2084,450],{"class":319},[295,2086,2087],{"class":305},"{() ",[295,2089,501],{"class":319},[295,2091,2092],{"class":362}," setIsOpen",[295,2094,679],{"class":305},[295,2096,1031],{"class":319},[295,2098,2099],{"class":305},"isOpen)}\n",[295,2101,2102,2105,2107,2109,2111,2113,2115,2117],{"class":297,"line":802},[295,2103,2104],{"class":362}," onBlur",[295,2106,450],{"class":319},[295,2108,2087],{"class":305},[295,2110,501],{"class":319},[295,2112,2092],{"class":362},[295,2114,679],{"class":305},[295,2116,1156],{"class":379},[295,2118,2119],{"class":305},")}\n",[295,2121,2122,2125,2127,2130,2133,2135,2137],{"class":297,"line":812},[295,2123,2124],{"class":362}," onKeyDown",[295,2126,450],{"class":319},[295,2128,2129],{"class":305},"{(",[295,2131,2132],{"class":372},"e",[295,2134,498],{"class":305},[295,2136,501],{"class":319},[295,2138,962],{"class":305},[295,2140,2141,2143,2146,2149,2152,2154,2156,2158,2160],{"class":297,"line":818},[295,2142,1026],{"class":319},[295,2144,2145],{"class":305}," (e.key ",[295,2147,2148],{"class":319},"===",[295,2150,2151],{"class":301}," 'Escape'",[295,2153,498],{"class":305},[295,2155,1898],{"class":362},[295,2157,679],{"class":305},[295,2159,1156],{"class":379},[295,2161,1326],{"class":305},[295,2163,2164,2166,2168,2170,2173,2176,2179,2181,2184],{"class":297,"line":827},[295,2165,1026],{"class":319},[295,2167,2145],{"class":305},[295,2169,2148],{"class":319},[295,2171,2172],{"class":301}," 'Enter'",[295,2174,2175],{"class":319}," ||",[295,2177,2178],{"class":305}," e.key ",[295,2180,2148],{"class":319},[295,2182,2183],{"class":301}," ' '",[295,2185,1021],{"class":305},[295,2187,2188,2191,2194],{"class":297,"line":838},[295,2189,2190],{"class":305}," e.",[295,2192,2193],{"class":362},"preventDefault",[295,2195,1286],{"class":305},[295,2197,2198,2200,2202,2204],{"class":297,"line":860},[295,2199,2092],{"class":362},[295,2201,679],{"class":305},[295,2203,1031],{"class":319},[295,2205,2206],{"class":305},"isOpen);\n",[295,2208,2209],{"class":297,"line":869},[295,2210,738],{"class":305},[295,2212,2213],{"class":297,"line":875},[295,2214,2215],{"class":305}," }}\n",[295,2217,2219],{"class":297,"line":2218},39,[295,2220,1110],{"class":305},[295,2222,2224,2227,2230,2232,2235,2238,2241,2243,2246,2249,2252],{"class":297,"line":2223},40,[295,2225,2226],{"class":305}," {options.",[295,2228,2229],{"class":362},"find",[295,2231,679],{"class":305},[295,2233,2234],{"class":372},"o",[295,2236,2237],{"class":319}," =>",[295,2239,2240],{"class":305}," o.value ",[295,2242,2148],{"class":319},[295,2244,2245],{"class":305}," field.value)?.label ",[295,2247,2248],{"class":319},"||",[295,2250,2251],{"class":301}," 'Select...'",[295,2253,665],{"class":305},[295,2255,2257,2259,2261],{"class":297,"line":2256},41,[295,2258,805],{"class":305},[295,2260,843],{"class":533},[295,2262,552],{"class":305},[295,2264,2266],{"class":297,"line":2265},42,[295,2267,313],{"emptyLinePlaceholder":312},[295,2269,2271,2274,2276],{"class":297,"line":2270},43,[295,2272,2273],{"class":305}," {isOpen ",[295,2275,759],{"class":319},[295,2277,524],{"class":305},[295,2279,2281,2283],{"class":297,"line":2280},44,[295,2282,530],{"class":305},[295,2284,2285],{"class":533},"ul\n",[295,2287,2289,2291,2293,2295,2297,2299,2301],{"class":297,"line":2288},45,[295,2290,599],{"class":362},[295,2292,450],{"class":319},[295,2294,541],{"class":305},[295,2296,1070],{"class":301},[295,2298,1842],{"class":305},[295,2300,2042],{"class":301},[295,2302,665],{"class":305},[295,2304,2306,2308,2310],{"class":297,"line":2305},46,[295,2307,1526],{"class":362},[295,2309,450],{"class":319},[295,2311,2312],{"class":305},"{listboxRef}\n",[295,2314,2316,2318,2320],{"class":297,"line":2315},47,[295,2317,778],{"class":362},[295,2319,450],{"class":319},[295,2321,2016],{"class":301},[295,2323,2325,2328,2330,2332,2335,2338],{"class":297,"line":2324},48,[295,2326,2327],{"class":362}," tabIndex",[295,2329,450],{"class":319},[295,2331,541],{"class":305},[295,2333,2334],{"class":319},"-",[295,2336,2337],{"class":379},"1",[295,2339,665],{"class":305},[295,2341,2343,2346,2348],{"class":297,"line":2342},49,[295,2344,2345],{"class":362}," aria-label",[295,2347,450],{"class":319},[295,2349,2350],{"class":301},"\"Options\"\n",[295,2352,2354],{"class":297,"line":2353},50,[295,2355,1110],{"class":305},[295,2357,2359,2361,2364,2366,2369,2371],{"class":297,"line":2358},51,[295,2360,2226],{"class":305},[295,2362,2363],{"class":362},"map",[295,2365,679],{"class":305},[295,2367,2368],{"class":372},"opt",[295,2370,2237],{"class":319},[295,2372,524],{"class":305},[295,2374,2376,2378],{"class":297,"line":2375},52,[295,2377,530],{"class":305},[295,2379,2380],{"class":533},"li\n",[295,2382,2384,2387,2389],{"class":297,"line":2383},53,[295,2385,2386],{"class":362}," key",[295,2388,450],{"class":319},[295,2390,2391],{"class":305},"{opt.value}\n",[295,2393,2395,2397,2399],{"class":297,"line":2394},54,[295,2396,778],{"class":362},[295,2398,450],{"class":319},[295,2400,2401],{"class":301},"\"option\"\n",[295,2403,2405,2408,2410,2413,2415],{"class":297,"line":2404},55,[295,2406,2407],{"class":362}," aria-selected",[295,2409,450],{"class":319},[295,2411,2412],{"class":305},"{field.value ",[295,2414,2148],{"class":319},[295,2416,2417],{"class":305}," opt.value}\n",[295,2419,2421,2423,2425,2427,2429],{"class":297,"line":2420},56,[295,2422,2082],{"class":362},[295,2424,450],{"class":319},[295,2426,2087],{"class":305},[295,2428,501],{"class":319},[295,2430,962],{"class":305},[295,2432,2434,2437,2439],{"class":297,"line":2433},57,[295,2435,2436],{"class":305}," field.",[295,2438,276],{"class":362},[295,2440,2441],{"class":305},"(opt.value);\n",[295,2443,2445,2447,2449,2451],{"class":297,"line":2444},58,[295,2446,2092],{"class":362},[295,2448,679],{"class":305},[295,2450,1156],{"class":379},[295,2452,1326],{"class":305},[295,2454,2456],{"class":297,"line":2455},59,[295,2457,2215],{"class":305},[295,2459,2461],{"class":297,"line":2460},60,[295,2462,1110],{"class":305},[295,2464,2466],{"class":297,"line":2465},61,[295,2467,2468],{"class":305}," {opt.label}\n",[295,2470,2472,2474,2476],{"class":297,"line":2471},62,[295,2473,805],{"class":305},[295,2475,194],{"class":533},[295,2477,552],{"class":305},[295,2479,2481],{"class":297,"line":2480},63,[295,2482,2483],{"class":305}," ))}\n",[295,2485,2487,2489,2491],{"class":297,"line":2486},64,[295,2488,805],{"class":305},[295,2490,191],{"class":533},[295,2492,552],{"class":305},[295,2494,2496],{"class":297,"line":2495},65,[295,2497,815],{"class":305},[295,2499,2501],{"class":297,"line":2500},66,[295,2502,313],{"emptyLinePlaceholder":312},[295,2504,2506,2509,2511],{"class":297,"line":2505},67,[295,2507,2508],{"class":305}," {fieldState.error ",[295,2510,759],{"class":319},[295,2512,524],{"class":305},[295,2514,2516,2518,2520,2522,2524,2526,2528,2530,2532,2535,2538,2540,2542,2544,2546,2548],{"class":297,"line":2515},68,[295,2517,530],{"class":305},[295,2519,166],{"class":533},[295,2521,599],{"class":362},[295,2523,450],{"class":319},[295,2525,541],{"class":305},[295,2527,1070],{"class":301},[295,2529,1842],{"class":305},[295,2531,1075],{"class":301},[295,2533,2534],{"class":305},"} ",[295,2536,2537],{"class":362},"role",[295,2539,450],{"class":319},[295,2541,783],{"class":301},[295,2543,786],{"class":362},[295,2545,450],{"class":319},[295,2547,791],{"class":301},[295,2549,552],{"class":305},[295,2551,2553],{"class":297,"line":2552},69,[295,2554,2555],{"class":305}," {fieldState.error.message}\n",[295,2557,2559,2561,2563],{"class":297,"line":2558},70,[295,2560,805],{"class":305},[295,2562,166],{"class":533},[295,2564,552],{"class":305},[295,2566,2568],{"class":297,"line":2567},71,[295,2569,815],{"class":305},[295,2571,2573,2575,2577],{"class":297,"line":2572},72,[295,2574,805],{"class":305},[295,2576,560],{"class":533},[295,2578,552],{"class":305},[295,2580,2582],{"class":297,"line":2581},73,[295,2583,872],{"class":305},[295,2585,2587],{"class":297,"line":2586},74,[295,2588,665],{"class":305},[166,2590,880,2591,2593,2594,2596,2597,2600,2601,2604],{},[187,2592,883],{}," Ensure custom components pass axe-core audits for focus trapping and role\u002Fvalue synchronization. Verify that portal-rendered lists maintain ",[197,2595,1716],{}," linkage and that ",[197,2598,2599],{},"aria-selected"," updates synchronously with ",[197,2602,2603],{},"field.onChange",".",[249,2606],{},[252,2608,2610],{"id":2609},"common-pitfalls","Common Pitfalls",[191,2612,2613,2622,2631,2644,2654],{},[194,2614,2615,2621],{},[187,2616,2617,2618,2620],{},"Overusing ",[197,2619,913],{}," without clearing it when errors resolve:"," Leaves stale error IDs attached to valid fields, causing screen readers to announce phantom errors.",[194,2623,2624,2630],{},[187,2625,2626,2627,2629],{},"Missing ",[197,2628,910],{}," state updates:"," Causes assistive technology to ignore validation cycles entirely.",[194,2632,2633,2636,2637,2640,2641,2643],{},[187,2634,2635],{},"Blocking keyboard navigation during async validation:"," Synchronous DOM removal or ",[197,2638,2639],{},"pointer-events: none"," during validation breaks ",[197,2642,205],{}," compliance.",[194,2645,2646,2649,2650,2653],{},[187,2647,2648],{},"Relying on color alone to indicate required or invalid fields:"," Fails ",[197,2651,2652],{},"1.4.1"," Use of Color. Always pair color with icons, text, or ARIA states.",[194,2655,2656,2666],{},[187,2657,2658,2659,265,2662,2665],{},"Forgetting to forward ",[197,2660,2661],{},"tabIndex",[197,2663,2664],{},"onKeyDown"," to custom interactive wrappers:"," Breaks native focus order and keyboard operability for composite widgets.",[249,2668],{},[252,2670,2672],{"id":2671},"frequently-asked-questions","Frequently Asked Questions",[2674,2675,2677],"h3",{"id":2676},"does-react-hook-form-break-native-form-accessibility","Does React Hook Form break native form accessibility?",[166,2679,2680],{},"No. RHF uses uncontrolled inputs by default, which preserves native HTML accessibility. Issues only arise when developers manually override native behaviors without properly forwarding ARIA attributes and focus states.",[2674,2682,2684],{"id":2683},"how-do-i-handle-async-validation-without-losing-focus","How do I handle async validation without losing focus?",[166,2686,2687,2688,2691],{},"Keep the input focused during validation, use a loading state that doesn't trigger DOM removal, and apply ",[197,2689,2690],{},"aria-busy=\"true\""," to the field container until validation completes. Avoid unmounting the input or its error container during the async cycle.",[2674,2693,2695,2696,1189,2698,2700],{"id":2694},"should-i-use-aria-livepolite-or-assertive-for-form-errors","Should I use ",[197,2697,928],{},[197,2699,1569],{}," for form errors?",[166,2702,2703,2704,2706,2707,2709],{},"Use ",[197,2705,791],{}," for inline field errors to avoid interrupting the user's typing flow. Reserve ",[197,2708,1569],{}," only for global form submission failures or critical system alerts that require immediate attention.",[2674,2711,2713],{"id":2712},"how-does-rhf-integrate-with-nextjs-server-components","How does RHF integrate with Next.js Server Components?",[166,2715,2716,2717,2719],{},"RHF is client-side only. In Next.js App Router, wrap form components in ",[197,2718,302],{}," directives, ensuring validation logic and accessibility state management remain isolated from server-rendered markup. Hydrate form state carefully to avoid mismatched DOM trees during initial render.",[2721,2722,2723],"style",{},"html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sA_wV, html code.shiki .sA_wV{--shiki-default:#032F62;--shiki-dark:#DBEDFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":291,"searchDepth":309,"depth":309,"links":2725},[2726,2727,2728,2729,2731,2732],{"id":254,"depth":309,"text":255},{"id":899,"depth":309,"text":900},{"id":1166,"depth":309,"text":1167},{"id":1685,"depth":309,"text":2730},"Custom Components & useController Integration",{"id":2609,"depth":309,"text":2610},{"id":2671,"depth":309,"text":2672,"children":2733},[2734,2735,2736,2738],{"id":2676,"depth":316,"text":2677},{"id":2683,"depth":316,"text":2684},{"id":2694,"depth":316,"text":2737},"Should I use aria-live=\"polite\" or \"assertive\" for form errors?",{"id":2712,"depth":316,"text":2713},null,"Build accessible forms with React Hook Form using semantic controls, clear validation messaging, and keyboard-first interaction patterns.","md",{},false,{"title":103,"description":2740},"QbVUfI4EIpWcbF8mFcyXRujC6HzWexAVWTFLQ7pBpZI",[2747,2777,2778],{"title":5,"path":6,"stem":7,"children":2748},[2749,2750,2753,2756,2762,2768,2774],{"title":10,"path":6,"stem":11},{"title":13,"path":14,"stem":15,"children":2751},[2752],{"title":13,"path":14,"stem":15},{"title":19,"path":20,"stem":21,"children":2754},[2755],{"title":19,"path":20,"stem":21},{"title":25,"path":26,"stem":27,"children":2757},[2758,2759],{"title":25,"path":26,"stem":27},{"title":31,"path":32,"stem":33,"children":2760},[2761],{"title":31,"path":32,"stem":33},{"title":37,"path":38,"stem":39,"children":2763},[2764,2765],{"title":37,"path":38,"stem":39},{"title":43,"path":44,"stem":45,"children":2766},[2767],{"title":43,"path":44,"stem":45},{"title":49,"path":50,"stem":51,"children":2769},[2770,2771],{"title":49,"path":50,"stem":51},{"title":55,"path":56,"stem":57,"children":2772},[2773],{"title":55,"path":56,"stem":57},{"title":61,"path":62,"stem":63,"children":2775},[2776],{"title":61,"path":62,"stem":63},{"title":67,"path":68,"stem":69},{"title":71,"path":72,"stem":73,"children":2779},[2780,2781,2787,2793,2796,2805,2814],{"title":76,"path":72,"stem":77},{"title":79,"path":80,"stem":81,"children":2782},[2783,2784],{"title":79,"path":80,"stem":81},{"title":85,"path":86,"stem":87,"children":2785},[2786],{"title":85,"path":86,"stem":87},{"title":91,"path":92,"stem":93,"children":2788},[2789,2790],{"title":91,"path":92,"stem":93},{"title":97,"path":98,"stem":99,"children":2791},[2792],{"title":97,"path":98,"stem":99},{"title":103,"path":104,"stem":105,"children":2794},[2795],{"title":103,"path":104,"stem":105},{"title":109,"path":110,"stem":111,"children":2797},[2798,2799,2802],{"title":109,"path":110,"stem":111},{"title":115,"path":116,"stem":117,"children":2800},[2801],{"title":115,"path":116,"stem":117},{"title":121,"path":122,"stem":123,"children":2803},[2804],{"title":121,"path":122,"stem":123},{"title":127,"path":128,"stem":129,"children":2806},[2807,2808,2811],{"title":127,"path":128,"stem":129},{"title":133,"path":134,"stem":135,"children":2809},[2810],{"title":133,"path":134,"stem":135},{"title":139,"path":140,"stem":141,"children":2812},[2813],{"title":139,"path":140,"stem":141},{"title":145,"path":146,"stem":147,"children":2815},[2816,2817],{"title":145,"path":146,"stem":147},{"title":151,"path":152,"stem":153,"children":2818},[2819],{"title":151,"path":152,"stem":153},1778094796234]