Add LabelFor parameters to ticket create for accessibility

bestpractical · Jan 21, 2025 · 6030d1e · 6030d1e
1 parent 84f9b1b
commit 6030d1e
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 19 deletions.
diff --git a/share/html/Elements/AddLinks b/share/html/Elements/AddLinks
@@ -119,25 +119,25 @@ foreach my $exclude_type ( keys %exclude_links ) {
 <div>
 
 
-<&| /Elements/LabeledValue, RawLabel => $m->scomp('ShowRelationLabel', Object => $Object, Label => loc('Depends on'), Relation => 'DependsOn'), ReadOnly => 0 &>
-  <input type="text" class="form-control" name="<%$id%>-DependsOn" value="<% $ARGSRef->{"$id-DependsOn"} || '' %>" <% $autocomplete |n %>  <% $exclude_links{Depend} |n%>/>
+<&| /Elements/LabeledValue, RawLabel => $m->scomp('ShowRelationLabel', Object => $Object, Label => loc('Depends on'), LabelFor => $id."-dependson", Relation => 'DependsOn'), ReadOnly => 0 &>
+  <input id="<%$id%>-dependson" type="text" class="form-control" name="<%$id%>-DependsOn" value="<% $ARGSRef->{"$id-DependsOn"} || '' %>" <% $autocomplete |n %>  <% $exclude_links{Depend} |n%>/>
 </&>
-<&| /Elements/LabeledValue, RawLabel => $m->scomp('ShowRelationLabel', Object => $Object, Label => loc('Depended on by'), Relation => 'DependedOnBy'), ReadOnly => 0 &>
-  <input type="text" class="form-control" name="DependsOn-<%$id%>" value="<% $ARGSRef->{"DependsOn-$id"} || '' %>" <% $autocomplete |n %>  <% $exclude_links{Depend} |n%>/>
+<&| /Elements/LabeledValue, RawLabel => $m->scomp('ShowRelationLabel', Object => $Object, Label => loc('Depended on by'), LabelFor => "dependson-".$id, Relation => 'DependedOnBy'), ReadOnly => 0 &>
+  <input id="dependson-<%$id%>" type="text" class="form-control" name="DependsOn-<%$id%>" value="<% $ARGSRef->{"DependsOn-$id"} || '' %>" <% $autocomplete |n %>  <% $exclude_links{Depend} |n%>/>
 </&>
 
-<&| /Elements/LabeledValue, RawLabel => $m->scomp('ShowRelationLabel', Object => $Object, Label => loc('Parents'), Relation => 'Parents'), ReadOnly => 0 &>
-  <input type="text" class="form-control" name="<%$id%>-MemberOf" value="<% $ARGSRef->{"$id-MemberOf"} || '' %>" <% $autocomplete |n %>  <% $exclude_links{Member} |n%>/>
+<&| /Elements/LabeledValue, RawLabel => $m->scomp('ShowRelationLabel', Object => $Object, Label => loc('Parents'), LabelFor => $id."-memberof", Relation => 'Parents'), ReadOnly => 0 &>
+  <input id="<%$id%>-memberof" type="text" class="form-control" name="<%$id%>-MemberOf" value="<% $ARGSRef->{"$id-MemberOf"} || '' %>" <% $autocomplete |n %>  <% $exclude_links{Member} |n%>/>
 </&>
-<&| /Elements/LabeledValue, RawLabel => $m->scomp('ShowRelationLabel', Object => $Object, Label => loc('Children'), Relation => 'Children'), ReadOnly => 0 &>
-  <input type="text" class="form-control" name="MemberOf-<%$id%>" value="<% $ARGSRef->{"MemberOf-$id"} || '' %>" <% $autocomplete |n %>  <% $exclude_links{Member} |n%>/>
+<&| /Elements/LabeledValue, RawLabel => $m->scomp('ShowRelationLabel', Object => $Object, Label => loc('Children'), LabelFor => "memberof-".$id, Relation => 'Children'), ReadOnly => 0 &>
+  <input id="memberof-<%$id%>" type="text" class="form-control" name="MemberOf-<%$id%>" value="<% $ARGSRef->{"MemberOf-$id"} || '' %>" <% $autocomplete |n %>  <% $exclude_links{Member} |n%>/>
 </&>
 
-<&| /Elements/LabeledValue, RawLabel => $m->scomp('ShowRelationLabel', Object => $Object, Label => loc('Refers to'), Relation => 'RefersTo'), ReadOnly => 0 &>
-  <input type="text" class="form-control" name="<%$id%>-RefersTo" value="<% $ARGSRef->{"$id-RefersTo"} || '' %>" <% $autocomplete |n %> <% $exclude_links{Refer} |n%>/>
+<&| /Elements/LabeledValue, RawLabel => $m->scomp('ShowRelationLabel', Object => $Object, Label => loc('Refers to'), LabelFor => $id."-refersto", Relation => 'RefersTo'), ReadOnly => 0 &>
+  <input id="<%$id%>-refersto" type="text" class="form-control" name="<%$id%>-RefersTo" value="<% $ARGSRef->{"$id-RefersTo"} || '' %>" <% $autocomplete |n %> <% $exclude_links{Refer} |n%>/>
 </&>
-<&| /Elements/LabeledValue, RawLabel => $m->scomp('ShowRelationLabel', Object => $Object, Label => loc('Referred to by'), Relation => 'ReferredToBy'), ReadOnly => 0 &>
-  <input type="text" class="form-control" name="RefersTo-<%$id%>" value="<% $ARGSRef->{"RefersTo-$id"} || '' %>" <% $autocomplete |n %> <% $exclude_links{Refer} |n%>/>
+<&| /Elements/LabeledValue, RawLabel => $m->scomp('ShowRelationLabel', Object => $Object, Label => loc('Referred to by'), LabelFor => "refersto-".$id, Relation => 'ReferredToBy'), ReadOnly => 0 &>
+  <input id="refersto-<%$id%>" type="text" class="form-control" name="RefersTo-<%$id%>" value="<% $ARGSRef->{"RefersTo-$id"} || '' %>" <% $autocomplete |n %> <% $exclude_links{Refer} |n%>/>
 </&>
 
 <div class="edit-custom-fields-container" hx-get="<% RT->Config->Get('WebPath') %>/Views/Component/EditCustomFields?ObjectType=<% ref $Object %>&ObjectId=<% $Object->Id %>&Grouping=Links&InTable=1" hx-swap="innerHTML">

diff --git a/share/html/Elements/EditCustomField b/share/html/Elements/EditCustomField
@@ -46,7 +46,11 @@
 %#
 %# END BPS TAGGED BLOCK }}}
 
-<&| /Elements/LabeledValue, Label => ( $Label ? $Label : $CustomField->Name ), LabelTooltip => $CustomField->EntryHint, FormText => $FormText &>
+<&| /Elements/LabeledValue,
+        Label => ( $Label ? $Label : $CustomField->Name ),
+        LabelFor => $Name,
+        LabelTooltip => $CustomField->EntryHint,
+        FormText => $FormText &>
 
 <%perl>
 $m->comp(

diff --git a/share/html/Elements/SelectSLA b/share/html/Elements/SelectSLA
@@ -45,7 +45,7 @@
 %# those contributions and any derivatives thereof.
 %#
 %# END BPS TAGGED BLOCK }}}
-<select name="<%$Name%>" class="form-select selectpicker <%$Name%>">
+<select id="<%$Name%>" name="<%$Name%>" class="form-select selectpicker <%$Name%>">
 % if ($DefaultValue) {
 <option value=""<% !$Default ? qq[ selected="selected"] : '' |n %>><%$DefaultLabel |n%></option>
 % }

diff --git a/share/html/Elements/ShowRelationLabel b/share/html/Elements/ShowRelationLabel
@@ -45,11 +45,17 @@
 %# those contributions and any derivatives thereof.
 %#
 %# END BPS TAGGED BLOCK }}}
+% if ( $LabelFor ) {
+<label for="<% $LabelFor | h %>">
+% }
 % if ($SearchURL) {
 <a href="<% $SearchURL %>"><% $Label %></a>
 % } else {
 <% $Label %>
 % }
+% if ( $LabelFor ) {
+</label>
+% }
 <%INIT>
 my $typemap = $RT::Link::TYPEMAP{$Relation};
 my $search_mode = $typemap->{Mode};
@@ -77,4 +83,5 @@ $m->callback(
 $Object => undef
 $Label
 $Relation
+$LabelFor => undef
 </%ARGS>
diff --git a/share/html/Ticket/Widgets/Create/Basics b/share/html/Ticket/Widgets/Create/Basics
@@ -56,6 +56,7 @@
         {
             name => 'Queue',
             comp => '/Elements/SelectQueue',
+            labelfor => 'SelectRT::Queue',
             args => {
                 Name           => 'Queue',
                 Default        => $QueueObj->Id,
@@ -67,6 +68,7 @@
         {
             name => 'Status',
             comp => '/Ticket/Elements/SelectStatus',
+            labelfor => "SelectStatus",
             args => {
                 Name     => "Status",
                 QueueObj => $QueueObj,
@@ -75,6 +77,7 @@
         {
             name => 'Owner',
             comp => '/Elements/SelectOwner',
+            labelfor => 'Owner',
             args => {
                 Name         => "Owner",
                 Default      => $ARGS{Owner} || RT->Nobody->Id,
@@ -88,6 +91,7 @@
         {
             name => 'Priority',
             comp => '/Elements/SelectPriority',
+            labelfor => 'SelectInitialPriority',
             args => {
                 Name     => "InitialPriority",
                 Default  => $ARGS{InitialPriority} ? $ARGS{InitialPriority} : $QueueObj->DefaultValue('InitialPriority'),
@@ -97,6 +101,7 @@
         {
             name => 'FinalPriority',
             comp => '/Elements/SelectPriority',
+            labelfor => 'SelectFinalPriority',
             args => {
                 Name     => "FinalPriority",
                 Default  => $ARGS{FinalPriority} ? $ARGS{FinalPriority} : $QueueObj->DefaultValue('FinalPriority'),
@@ -109,6 +114,7 @@
             {
                 name => 'SLA',
                 comp => '/Elements/SelectSLA',
+                labelfor => 'SLA',
                 args => {
                     Name         => "SLA",
                     Default      => $ARGS{SLA} || RT::SLA->GetDefaultServiceLevel( Queue => $QueueObj ),

diff --git a/share/html/Ticket/Widgets/Create/Dates b/share/html/Ticket/Widgets/Create/Dates
@@ -50,12 +50,12 @@
 <&| /Widgets/TitleBox, title => loc('Dates'), class=> 'ticket-info-dates' &>
   <div class="row">
     <div class="col">
-      <&| /Elements/LabeledValue, Label => loc('Starts') &>
+      <&| /Elements/LabeledValue, Label => loc('Starts'), LabelFor => 'Starts' &>
         <& /Elements/SelectDate, Name => "Starts", Default => $ARGS{Starts} || $QueueObj->DefaultValue('Starts') || '' &>
       </&>
     </div>
     <div class="col">
-      <&| /Elements/LabeledValue, Label => loc('Due') &>
+      <&| /Elements/LabeledValue, Label => loc('Due'), LabelFor => 'Due' &>
         <& /Elements/SelectDate, Name => "Due", Default => $ARGS{Due} || $QueueObj->DefaultValue('Due') || '' &>
       </&>
     </div>

diff --git a/share/html/Ticket/Widgets/Create/Message b/share/html/Ticket/Widgets/Create/Message
@@ -50,7 +50,7 @@
 <&| /Widgets/TitleBox, title => loc("Create a new ticket in [_1]", $m->scomp("/Ticket/Elements/ShowQueue", QueueObj => $QueueObj, Escape => 0)), class => 'messagedetails' &>
 
 % $m->callback(CallbackName => 'BeforeRequestors', QueueObj => $QueueObj, ARGSRef => \%ARGS);
-<&| /Elements/LabeledValue, Label => loc("Requestors") &>
+<&| /Elements/LabeledValue, Label => loc("Requestors"), LabelFor => 'Requestors' &>
   <& /Elements/EmailInput,
       Name => 'Requestors',
       Default => $ARGS{Requestors} // $session{CurrentUser}->EmailAddress,
@@ -61,6 +61,7 @@
 
 <&| /Elements/LabeledValue,
       Label => loc("Cc"),
+      LabelFor => 'Cc',
       LabelTooltip => loc('Sends a copy of this update to the provided users or groups. These people will receive future updates.'),
 &>
   <& /Elements/EmailInput,
@@ -72,6 +73,7 @@
 
 <&| /Elements/LabeledValue,
       Label => loc("Admin Cc"),
+      LabelFor => 'AdminCc',
       LabelTooltip => loc('Sends a copy of this update to the provided users or groups. These people will receive future updates.'),
 &>
   <& /Elements/EmailInput,
@@ -91,6 +93,7 @@
 % while (my $role = $roles->Next) {
   <&| /Elements/LabeledValue,
       Label => $role->Name,
+      LabelFor => $role->GroupType,
       LabelTooltip => $role->EntryHint,
   &>
     <& /Elements/MultiUserRoleInput, role => $role, Default => $ARGS{$role->GroupType} &>
@@ -107,8 +110,8 @@
     ForCreation => 1,
   &>
 
-  <&| /Elements/LabeledValue, Label => loc("Subject") &>
-      <input class="form-control" type="text" name="Subject" maxsize="200" value="<%$ARGS{Subject} || ''%>" />
+  <&| /Elements/LabeledValue, Label => loc("Subject"), LabelFor => 'Subject' &>
+      <input id="Subject" class="form-control" type="text" name="Subject" maxsize="200" value="<%$ARGS{Subject} || ''%>" />
 % $m->callback( %ARGS, CallbackName => 'AfterSubject' );
   </&>
 

diff --git a/share/html/Ticket/Widgets/Create/Times b/share/html/Ticket/Widgets/Create/Times
@@ -68,6 +68,7 @@ my @fields = (
     {
       name => 'TimeEstimated',
       comp => '/Elements/EditTimeValue',
+      labelfor => 'SetTimeEstimated',
       args => {
         Name => 'TimeEstimated',
         Default => $ARGS{TimeEstimated} || '',