[Rt-commit] rt branch 5.0/contributed-accessibility-improvements created. rt-5.0.3-125-gc7e3980523

BPS Git Server git at git.bestpractical.com
Mon Oct 3 12:56:00 UTC 2022


This is an automated email from the git hooks/post-receive script. It was
generated because a ref change was pushed to the repository containing
the project "rt".

The branch, 5.0/contributed-accessibility-improvements has been created
        at  c7e39805233a39941f4fd4cd7834c90edd0a1d97 (commit)

- Log -----------------------------------------------------------------
commit c7e39805233a39941f4fd4cd7834c90edd0a1d97
Author: Brian Conry <bconry at bestpractical.com>
Date:   Wed Sep 28 08:56:54 2022 -0500

    Add aria-label to selectize remove buttons
    
    This change adds the aria-label attribute to the buttons created by the
    remove_button plugin for Selectize.js.

diff --git a/share/static/js/autocomplete.js b/share/static/js/autocomplete.js
index c967050ddf..33b3fd24af 100644
--- a/share/static/js/autocomplete.js
+++ b/share/static/js/autocomplete.js
@@ -231,3 +231,10 @@ window.RT.Autocomplete.bind = function(from) {
     });
 };
 jQuery(function(){ RT.Autocomplete.bind(document) });
+
+jQuery(function() {
+    jQuery("a.remove").each(function(){
+        var elem = jQuery(this);
+        elem.attr("aria-label", "Remove");
+    });
+});

commit 2477baea6c8234356e1f5df572bd53567edd8529
Author: Brian Conry <bconry at bestpractical.com>
Date:   Wed Sep 28 08:52:49 2022 -0500

    Label ticket subject for accessibility
    
    This change integrates a contribute improvement to the accessibility of
    the ticket Update page.

diff --git a/share/html/Ticket/Update.html b/share/html/Ticket/Update.html
index 680aedcf24..3eeefef1d5 100644
--- a/share/html/Ticket/Update.html
+++ b/share/html/Ticket/Update.html
@@ -165,13 +165,15 @@
 % $m->callback( %ARGS, CallbackName => 'AfterGnuPG' );
 
 <div class="form-row">
-  <div class="form-group label col-2">
-    <&|/l&>Subject</&>:
-  </div>
-  <div class="value col-9">
-    <input class="form-control" type="text" name="UpdateSubject" value="<% $ARGS{UpdateSubject} || $TicketObj->Subject || '' %>" />
+  <label for="UpdateSubject">
+    <div class="form-group label col-2">
+      <&|/l&>Subject</&>:
+    </div>
+    <div class="value col-9">
+      <input class="form-control" type="text" id="UpdateSubject" name="UpdateSubject" value="<% $ARGS{UpdateSubject} || $TicketObj->Subject || '' %>" />
 % $m->callback( %ARGS, CallbackName => 'AfterSubject' );
-  </div>
+    </div>
+  </label>
 </div>
 <& /Articles/Elements/BeforeMessageBox, %ARGS &>
 <div class="form-group">

commit 8f27b737e875948038baccfd439f3011b5d2f064
Author: Brian Conry <bconry at bestpractical.com>
Date:   Thu Sep 1 09:17:02 2022 -0500

    Improve Accessibility of Transaction History
    
    This change integrates contributed accessibilty improvements to the
    ticket transaction history.

diff --git a/share/html/Elements/ShowTransaction b/share/html/Elements/ShowTransaction
index 67ccc5882a..1441341f3b 100644
--- a/share/html/Elements/ShowTransaction
+++ b/share/html/Elements/ShowTransaction
@@ -60,17 +60,19 @@
       href="<% RT->Config->Get('WebPath') %>/Transaction/Display.html?id=<% $Transaction->id %>" \
 % }
 % my $alt = loc('Show transaction link');
-      ><span class="fas fa-link" alt="<% $alt %>" data-toggle="tooltip" data-placement="top" data-original-title="<% $alt %>"></span></a>
+      aria-label="<% $alt %>" ><span class="fas fa-link" alt="<% $alt %>" data-toggle="tooltip" data-placement="top" data-original-title="<% $alt %>"></span></a>
     </span>
 % $m->callback( %ARGS, Transaction => $Transaction, CallbackName => 'AfterAnchor' );
-    <span class="date"><% $date |n %></span>
-    <span class="description">
+    <h2 class="accessibility-aid">
+      <span class="date"><% $date |n %></span>
+      <span class="description">
       <& /Elements/ShowUser, User => $CreatorObj &> - <% $desc |n %>
 % $m->callback( %ARGS, Transaction => $Transaction, CallbackName => 'AfterDescription' );
-    </span>
+      </span>
 % if ( $Object->isa("RT::Ticket") and $Object->CurrentUserCanSeeTime ) {
-    <span class="time-taken"><% $time %></span>
+      <span class="time-taken"><% $time %></span>
 % }
+    </h2>
   </div>
 
   <div class="content">
@@ -199,6 +201,7 @@ if ( $txn_type =~ /EmailRecord$/ ) {
     push @actions, {
         title  => qq[<span class="fas fa-envelope-open-text" alt="$alt" data-toggle="tooltip" data-placement="top" data-original-title="$alt"></span>],
         target => '_blank',
+        label => $alt,
         path   => $EmailRecordPath
             .'?id='. $Object->id
             .'&Transaction='. $Transaction->id
@@ -212,7 +215,8 @@ elsif ($txn_type eq 'CustomField' && $Transaction->Field) {
     $cf->SetContextObject( $Transaction->Object );
     $cf->Load( $Transaction->Field );
     if ($cf->Id && $cf->Type =~ /text/i) {
-        push @actions, { class => 'toggle-txn-details', title => loc('Show Details'), path => '#' };
+        my $alt = loc('Show Details');
+        push @actions, { class => 'toggle-txn-details', title => $alt, label => $alt, path => '#' };
     }
 }
 # If the transaction has anything attached to it at all
@@ -233,6 +237,7 @@ elsif ( %$Attachments && $ShowActions ) {
         my $alt = loc('Reply');
         push @actions, {
             class  => "reply-link",
+            label => $alt,
             title  => qq[<span class="fas fa-reply" alt="$alt" data-toggle="tooltip" data-placement="top" data-original-title="$alt"></span>],
             path   => $UpdatePath
                 .'?id='. $Object->id
@@ -249,6 +254,7 @@ elsif ( %$Attachments && $ShowActions ) {
         my $alt = loc('Comment');
         push @actions, {
             class  => "comment-link",
+            label => $alt,
             title  => qq[<span class="fas fa-comment" alt="$alt" data-toggle="tooltip" data-placement="top" data-original-title="$alt"></span>],
             path   => $UpdatePath
                 .'?id='. $Object->id
@@ -263,6 +269,7 @@ elsif ( %$Attachments && $ShowActions ) {
         my $alt = loc('Forward');
         push @actions, {
             class  => "forward-link",
+            label => $alt,
             title  => qq[<span class="fas fa-forward" alt="$alt" data-toggle="tooltip" data-placement="top" data-original-title="$alt"></span>],
             path   => $ForwardPath
                 .'?id='. $Object->id
@@ -277,6 +284,7 @@ elsif ( %$Attachments && $ShowActions ) {
         my $alt = loc('Encrypt/Decrypt');
         push @actions, {
             class  => "encryption-link",
+            label => $alt,
             title  => qq[<span class="fas fa-key" alt="$alt" data-toggle="tooltip" data-placement="top" data-original-title="$alt"></span>],
             path   => $EncryptionPath
                 .'?id='. $Transaction->id
@@ -311,6 +319,7 @@ if ( @actions ) {
     foreach my $a ( @actions ) {
         $a = '<a'
             .' href="'. $i->apply_escapes( $a->{'path'}, 'h' ) .'"'
+            . ($a->{'label'} ? ' aria-label="'. $a->{'label'} .'"' : '')
             . ($a->{'target'}
                 ? ' target="'. $i->apply_escapes( $a->{'target'}, 'h' ) .'"'
                 : ''
diff --git a/share/html/Elements/ShowTransactionAttachments b/share/html/Elements/ShowTransactionAttachments
index b87a516c5e..81a50ec366 100644
--- a/share/html/Elements/ShowTransactionAttachments
+++ b/share/html/Elements/ShowTransactionAttachments
@@ -70,19 +70,19 @@ foreach my $message ( @{ $Attachments->{ $Parent || 0 } || [] } ) {
 % }
 % if ( length $name ) {  # download link with filename
 % my $download_alt = loc( 'Download [_1] [_2]', $message->ContentType, $message->FriendlyContentLength );
-alt="<% $download_alt %>" data-toggle="tooltip" data-placement="bottom" data-original-title="<% $download_alt %>">
+aria-label="<% $download_alt %>" alt="<% $download_alt %>" data-toggle="tooltip" data-placement="bottom" data-original-title="<% $download_alt %>">
   <span class="fas fa-paperclip fa-2x"></span>
   <span class="downloadfilename"><% $name %></span>
 </a>
 % }
 % else {  # view source and view source headers, without filename or size
 % my $view_source_alt = loc( 'View source' );
->
+aria-label="<% $view_source_alt %>">
   <span class="far fa-file fa-2x" alt="<% $view_source_alt %>" data-toggle="tooltip" data-placement="bottom" data-original-title="<% $view_source_alt %>"></span>
 </a>
 % if ( $DownloadableHeaders && ! length $name && $message->ContentType =~ /text/  ) {
 % my $download_with_headers_alt = loc('View source with headers');
-<a href="<% $AttachmentPath %>/WithHeaders/<% $message->Id %>" target="_blank">
+<a href="<% $AttachmentPath %>/WithHeaders/<% $message->Id %>" target="_blank" aria-label="<% $download_with_headers_alt %>">
   <span class="fa-stack" alt="<% $download_with_headers_alt %>" data-toggle="tooltip" data-placement="bottom" data-original-title="<% $download_with_headers_alt %>">
     <i class="far fa-file fa-stack-2x"></i>
     <i class="fas fa-plus fa-stack-1x"></i>
diff --git a/share/static/css/elevator-light/misc.css b/share/static/css/elevator-light/misc.css
index 1219bff839..7d1d52e9b5 100644
--- a/share/static/css/elevator-light/misc.css
+++ b/share/static/css/elevator-light/misc.css
@@ -164,3 +164,15 @@ span.pagenum {
 .w-15 {
     width: 15% !important;
 }
+
+/* This style is used for heading elements (h1, h2, etc) that have been
+ * added to improve accessibility (navigation within the page) but we want
+ * the visual layout to be the same as if we had used a span or div */
+.accessibility-aid {
+    /* from body */
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    margin-block-start: 0;
+    margin-block-end: 0;
+}

-----------------------------------------------------------------------


hooks/post-receive
-- 
rt


More information about the rt-commit mailing list