Add missing link from label to inputs on ticket create page

To improve the accessibility of the ticket creation page so it can be better used by screen readers, add missing labels and input fields relationships across multiple elements used in the ticket creation page.
bestpractical · Dec 18, 2024 · a887851 · a887851
1 parent 7f0b00d
commit a887851
Show file tree

Hide file tree

Showing 10 changed files with 40 additions and 21 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 type="text" class="form-control" name="<%$id%>-DependsOn" id="<%$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 type="text" class="form-control" name="DependsOn-<%$id%>" id="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 type="text" class="form-control" name="<%$id%>-MemberOf" id="<%$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 type="text" class="form-control" name="MemberOf-<%$id%>" id="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 type="text" class="form-control" name="<%$id%>-RefersTo" id="<%$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 type="text" class="form-control" name="RefersTo-<%$id%>" id="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,9 @@
 %#
 %# 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/SelectOwnerAutocomplete b/share/html/Elements/SelectOwnerAutocomplete
@@ -69,4 +69,4 @@ if ( $Default ) {
 my $limit = join '|', map { join '-', ref($_), ($_->id || '') } @$Objects;
 </%INIT>
 
-<input type="text" name="<%$Name%>" value="<% $value %>" data-autocomplete="Owners" data-autocomplete-return="<% $ValueAttribute %>" data-autocomplete-limit="<% $limit %>" class="form-control" />
+<input type="text" name="<%$Name%>" id="<%$Name%>" value="<% $value %>" data-autocomplete="Owners" data-autocomplete-return="<% $ValueAttribute %>" data-autocomplete-limit="<% $limit %>" class="form-control" />
diff --git a/share/html/Elements/SelectOwnerDropdown b/share/html/Elements/SelectOwnerDropdown
@@ -45,7 +45,7 @@
 %# those contributions and any derivatives thereof.
 %#
 %# END BPS TAGGED BLOCK }}}
-<select name="<%$Name%>" class="selectpicker form-select <%$Name%>" <% $Size ? qq{data-size="$Size"} : '' |n %>>
+<select name="<%$Name%>" id="<%$Name%>" class="selectpicker form-select <%$Name%>" <% $Size ? qq{data-size="$Size"} : '' |n %>>
 %if ($DefaultValue) {
 <option value=""<% !$Default ? qq[ selected="selected"] : '' |n %>><%$DefaultLabel |n%></option>
 %}

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 name="<%$Name%>" id="<%$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 }}}
+<label
+% if ( $LabelFor ) {
+    for="<% $LabelFor | h %>"
+% }
+>
 % if ($SearchURL) {
 <a href="<% $SearchURL %>"><% $Label %></a>
 % } else {
 <% $Label %>
 % }
+</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        => $Queue->Id,
@@ -67,6 +68,7 @@
         {
             name => 'Status',
             comp => '/Ticket/Elements/SelectStatus',
+            labelfor => "SelectStatus",
             args => {
                 Name     => "Status",
                 QueueObj => $Queue,
@@ -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} : $Queue->DefaultValue('InitialPriority'),
@@ -97,6 +101,7 @@
         {
             name => 'FinalPriority',
             comp => '/Elements/SelectPriority',
+            labelfor => 'SelectFinalPriority',
             args => {
                 Name     => "FinalPriority",
                 Default  => $ARGS{FinalPriority} ? $ARGS{FinalPriority} : $Queue->DefaultValue('FinalPriority'),
@@ -109,6 +114,7 @@
             {
                 name => 'SLA',
                 comp => '/Elements/SelectSLA',
+                labelfor => 'SLA',
                 args => {
                     Name         => "SLA",
                     Default      => $ARGS{SLA} || RT::SLA->GetDefaultServiceLevel( Queue => $Queue ),

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} || $Queue->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} || $Queue->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 => $Queue, Escape => 0)), class => 'messagedetails' &>
 
 % $m->callback(CallbackName => 'BeforeRequestors', QueueObj => $Queue, 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 class="form-control" type="text" name="Subject" id="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} || '',