Commit 4 of 5:
3938dabcb2
fix(a11y): give every form control and icon button an accessible name
previous
next
whole branch
Review threads live on the whole diff, not on one commit, so
none are shown here - a thread's line means something in the
branch's final form, and painting it into an intermediate
step would put it on code it is not about.
resources/components/Bench/Admin/ReviewsTable.stx modified +1 -0 Changes to resources/components/Bench/Admin/ReviewsTable.stx ⋯ 271 lines Show the 271 lines above this hunk 272 272 < textarea 273 273 x - model = "responseDraft" 274 274 rows = "4" 275 + aria - label = "Judge's official response" 275 276 placeholder = "Enter the judge's official response…" 276 277 class = "block mt-2 px-3 py-2 w-full text-gray-900 text-sm bg-white border border-gray-300 rounded-md focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200" 277 278 > < / textarea >
resources/components/Bench/ArticleView.stx modified +1 -0 Changes to resources/components/Bench/ArticleView.stx ⋯ 819 lines Show the 819 lines above this hunk 820 820 < textarea 821 821 x - model = "judgeResponseDraft" 822 822 rows = "4" 823 + aria - label = "Your official response to this review" 823 824 placeholder = "Write your official response…" 824 825 class = "block mt-2 px-3 py-2 w-full text-gray-900 text-sm bg-white border border-gray-300 rounded-md focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200" 825 826 > < / textarea >
resources/components/Bench/BenchComingSoon.stx modified +1 -1 Changes to resources/components/Bench/BenchComingSoon.stx ⋯ 77 lines Show the 77 lines above this hunk 78 78 < div class = "mt-12" > 79 79 < form @ submit . prevent = "submitEmail()" class = "flex gap-x-4 max-w-md" > 80 80 < div class = "relative flex-auto" > 81 - < input type = "email" x - model = "email" placeholder = "Enter your email" required x - disabled = "loading" 81 + < input type = "email" x - model = "email" aria - label = "Email address" placeholder = "Enter your email" required x - disabled = "loading" 82 82 class = "block px-4 py-3 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 bg-off-gray border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-gray-600 focus:ring-inset shadow-sm" > 83 83 < / div > 84 84 < button type = "submit" x - disabled = "loading"
resources/components/Bench/ConfirmHost.stx modified +14 -3 Changes to resources/components/Bench/ConfirmHost.stx ⋯ 116 lines Show the 116 lines above this hunk 117 117 @ click = "$event.stopPropagation()" 118 118 class = "p-6 max-w-md w-full bg-white border border-gray-200 rounded-2xl shadow-xl" 119 119 > 120 - < h2 id = "bench-confirm-title" class = "font-semibold text-gray-900 text-lg" : text = "confirmStore.title()" > < / h2 > 120 + { { - - 121 + The static text inside these four elements mirrors the confirm store 's 122 + own defaults ( 'Are you sure?' / 'Confirm' / 'Cancel' ) , and `:text` 123 + overwrites it the moment the dialog is asked to open . It is NOT dead 124 + markup : without it the static build ships an empty < h2 > and two buttons 125 + with no accessible name , which is both an a11y defect ( a screen reader 126 + announces an empty heading and two unlabelled buttons ) and a 127 + release - gate failure — scripts / validate - release . ts rejects an empty 128 + primary heading , and scripts / validate - ui . ts rejects an icon - only button 129 + with no name . Keep these in sync with resources / stores / confirm . ts . 130 + - - } } 131 + < h2 id = "bench-confirm-title" class = "font-semibold text-gray-900 text-lg" : text = "confirmStore.title()" > Are you sure ? < / h2 > 121 132 < p id = "bench-confirm-message" class = "mt-2 text-gray-600 text-sm" : text = "confirmStore.message()" > < / p > 122 133 < div class = "flex gap-3 justify-end mt-6" > 123 134 < button ⋯ 1 line Show the 1 line above this hunk 125 136 @ click = "confirmStore.dismiss()" 126 137 class = "px-4 py-2 font-medium text-gray-700 text-sm bg-white hover:bg-gray-50 border border-gray-300 rounded-lg transition-colors" 127 138 : text = "confirmStore.cancelLabel()" 128 - > < / button > 139 + > Cancel < / button > 129 140 < button 130 141 type = "button" 131 142 @ click = "confirmStore.accept()" 132 143 class = "px-4 py-2 font-medium text-sm text-white rounded-lg transition-colors" 133 144 x - class = "acceptClass()" 134 145 : text = "confirmStore.confirmLabel()" 135 - > < / button > 146 + > Confirm < / button > 136 147 < / div > 137 148 < / div > 138 149 < / div >
resources/components/Bench/Court/CourtHouseDirectory.stx modified +1 -0 Changes to resources/components/Bench/Court/CourtHouseDirectory.stx ⋯ 195 lines Show the 195 lines above this hunk 196 196 < input 197 197 type = "text" 198 198 x - model = "searchQuery" 199 + aria - label = "Search courthouses by name, city, or state" 199 200 placeholder = "Search by name, city, or state..." 200 201 class = "block pl-12 pr-4 py-3 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 bg-gray-50 border-0 ring-1 ring-gray-200 ring-inset rounded-xl focus:ring-2 focus:ring-inset focus:ring-softBrown duration-200 transition-all" 201 202 >
resources/components/Bench/Court/CourtJudges.stx modified +1 -1 Changes to resources/components/Bench/Court/CourtJudges.stx ⋯ 21 lines Show the 21 lines above this hunk 22 22 < p class = "mt-1 text-gray-500 text-sm" > { { `Active judges currently sitting at ${court.name}` } } < / p > 23 23 < / div > 24 24 < div class = "hidden sm:block" > 25 - < select class = "pl-3 pr-10 py-2 text-gray-900 sm:text-sm bg-white ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-blue-600 focus:ring-inset" > 25 + < select aria - label = "Filter judges by department" class = "pl-3 pr-10 py-2 text-gray-900 sm:text-sm bg-white ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-blue-600 focus:ring-inset" > 26 26 < option > All Departments < / option > 27 27 < option > Criminal < / option > 28 28 < option > Civil < / option >
resources/components/Bench/Judge/JudgeDirectory.stx modified +1 -0 Changes to resources/components/Bench/Judge/JudgeDirectory.stx ⋯ 262 lines Show the 262 lines above this hunk 263 263 type = "text" 264 264 x - model = "searchQuery" 265 265 @ input = "resetWindow()" 266 + aria - label = "Search judges by name, court, or location" 266 267 placeholder = "Search by name, court, or location..." 267 268 class = "block pl-12 pr-4 py-3 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 bg-gray-50 border-0 ring-1 ring-gray-200 ring-inset rounded-xl focus:ring-2 focus:ring-inset focus:ring-softBrown duration-200 transition-all" 268 269 >
resources/components/Bench/Judge/ReviewJudgeSearch.stx modified +1 -0 Changes to resources/components/Bench/Judge/ReviewJudgeSearch.stx ⋯ 87 lines Show the 87 lines above this hunk 88 88 : value = "searchInput()" 89 89 @ input = "handleInput($event.target.value)" 90 90 class = "block pl-10 pr-10 py-3 w-full text-gray-900 text-sm placeholder:text-gray-400 bg-white border border-gray-300 rounded-md focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 shadow-sm" 91 + aria - label = "Search for a judge" 91 92 placeholder = "Search for a judge..." 92 93 autocomplete = "off" 93 94 >
resources/components/Bench/SearchView.stx modified +1 -0 Changes to resources/components/Bench/SearchView.stx ⋯ 74 lines Show the 74 lines above this hunk 75 75 < input 76 76 type = "text" 77 77 x - model = "search.query" 78 + aria - label = "Search judges, courts, or locations" 78 79 placeholder = "Search judges, courts, or locations..." 79 80 class = "block pl-12 pr-32 py-4 w-full text-gray-900 sm:text-base placeholder:text-gray-400 bg-white border-0 ring-1 ring-gray-200 ring-inset rounded-xl focus:ring-2 focus:ring-blue-600 focus:ring-inset shadow-sm" 80 81 >
resources/components/Bench/VerifyEmail.stx modified +2 -2 Changes to resources/components/Bench/VerifyEmail.stx ⋯ 92 lines Show the 92 lines above this hunk 93 93 x - disabled = "resending" 94 94 class = "inline-flex items-center mt-5 px-4 py-2 font-semibold text-sm text-white bg-blue-600 hover:bg-blue-700 rounded-md disabled:opacity-50" 95 95 : text = "resending() ? 'Sending…' : 'Resend verification email'" 96 - > < / button > 96 + > Resend verification email < / button > 97 97 < p class = "mt-3 text-gray-500 text-xs" : text = "resendNote()" > < / p > 98 98 < / div > 99 99 ⋯ 7 lines Show the 7 lines above this hunk 107 107 x - disabled = "resending" 108 108 class = "inline-flex items-center mt-5 px-4 py-2 font-semibold text-gray-800 text-sm bg-white hover:bg-gray-50 border border-gray-300 rounded-md disabled:opacity-50" 109 109 : text = "resending() ? 'Sending…' : 'Resend verification email'" 110 - > < / button > 110 + > Resend verification email < / button > 111 111 < p class = "mt-3 text-gray-500 text-xs" : text = "resendNote()" > < / p > 112 112 < / div > 113 113 < / div >