Help with Unlabeled Buttons

Keith_Creasy · June 27, 2014, 4:48pm

Hello.

RT 4.2.3 has some unlabeled buttons. We have several users who access the interface with a screen reader (for blind users) and these buttons are simply identified as “button” rather than something more meaningful. I think they are mostly arrow icons. One place they appear is in the search builder.

Can we simply add the labels ourselves for our installation? How can I find where the HTML files are in order to edit the interface?

Thanks.

Keith

Kevin_Falcone · June 27, 2014, 6:47pm

RT 4.2.3 has some unlabeled buttons. We have several users who access the
interface with a screen reader (for blind users) and these buttons are simply
identified as “button” rather than something more meaningful. I think they are
mostly arrow icons. One place they appear is in the search builder.

Can we simply add the labels ourselves for our installation? How can I find
where the HTML files are in order to edit the interface?

Add the labels and please send a patch
http://bestpractical.com/rt/issues.html

If you’d been more specific about which buttons, I could point more
directly, but all of the html in RT is generated from mason templates
in share/html/

-kevin

Keith_Creasy · June 27, 2014, 8:20pm

Thanks.

The buttons appear in several places but one example is the screen where you modify the “content” of a “dashboard”. The buttons to add a search for example I think is a right-pointing arrow. There are also up and down arrows that I believe move the item higher or lower on the view. This isn’t the only place but maybe that helps you pinpoint what we need to change.

Regards,
Keith-----Original Message-----
From: rt-users [mailto:rt-users-bounces@lists.bestpractical.com] On Behalf Of Kevin Falcone
Sent: Friday, June 27, 2014 2:47 PM
To: rt-users@lists.bestpractical.com
Subject: Re: [rt-users] Help with Unlabeled Buttons

On Fri, Jun 27, 2014 at 04:48:38PM +0000, Keith Creasy wrote:

RT 4.2.3 has some unlabeled buttons. We have several users who access
the interface with a screen reader (for blind users) and these buttons
are simply identified as “button” rather than something more
meaningful. I think they are mostly arrow icons. One place they appear is in the search builder.

Can we simply add the labels ourselves for our installation? How can I
find where the HTML files are in order to edit the interface?

Add the labels and please send a patch
http://bestpractical.com/rt/issues.html

If you’d been more specific about which buttons, I could point more directly, but all of the html in RT is generated from mason templates in share/html/

-kevin

Kevin_Falcone · June 27, 2014, 10:12pm

The buttons appear in several places but one example is the screen
where you modify the “content” of a “dashboard”. The buttons to add a
search for example I think is a right-pointing arrow. There are also
up and down arrows that I believe move the item higher or lower on the
view. This isn’t the only place but maybe that helps you pinpoint what
we need to change.

github.com

bestpractical/rt/blob/stable/share/html/Widgets/SelectionBox#L179


      
          <& SelectionBox:current, self => $self &>
          
          <div class="form-row">
            <div class="col-5">
              <&|/l&>Available</&>:
            </div>
          </div>
          
          <div class="form-row">
            <div class="col-5">
              <div class="form-row">
                <div class="col-12">
                  <select name="<%$name%>-Available" id="<%$name%>-Available" size="<%$size%>" multiple="multiple" class="tall selection-box form-control">
          % for (@{$self->{Available}}) {
                    <option value="<% $_->[0] %>"><% $_->[1] %></option>
          % }
                  </select>
                </div>
              </div>
            </div>

github.com

bestpractical/rt/blob/stable/share/html/Widgets/SelectionBox#L193


      
                    <option value="<% $_->[0] %>"><% $_->[1] %></option>
          % }
                  </select>
                </div>
              </div>
            </div>
          
          % unless ($self->{ReadOnly}) {
            <div class="col-auto">
              <div class="form-row">
                <div class="col-12">
                  <input aria-label="Add" name="add" type="submit" class="button btn btn-primary form-control" value=" &rarr; " />
                </div>
              </div>
            </div>
          % }
          
            <div class="col-5">
              <div class="form-row">
                <div class="col-12">
                  <select name="<%$name%>-Selected" id="<%$name%>-Selected" size="<%$size%>" multiple="multiple" class="tall selection-box form-control">

That widget is used in a number of places, so may fix several spots in
the UI. I assume the problem is that we’re using an HTML entity which
the reader doesn’t know how to deal with?

-kevin

Keith_Creasy · June 30, 2014, 3:37pm

Thanks Kevin.

You are correct. For example JAWS and NVDA screen readers don’t seem to know how to speak the entity ↓ (down arrow). Now that I see what’s actually happening I wonder if this should be fixed in the screen reader configuration. Interestingly JAWS doesn’t speak any of the arrows but another screen reader (NVDA) speaks the right arrow but not the up or down arrows. Maybe those character entities can be just added to JAWS and/or NDVA.

We could also perhaps use WAI ARIA to fix it.

Keith

-From: rt-users [mailto:rt-users-bounces@lists.bestpractical.com] On Behalf Of Kevin FalconeSent: Friday, June 27, 2014 6:13 PM
To: rt-users@lists.bestpractical.com
Subject: Re: [rt-users] Help with Unlabeled Buttons

The buttons appear in several places but one example is the screen
where you modify the “content” of a “dashboard”. The buttons to add a
search for example I think is a right-pointing arrow. There are also
up and down arrows that I believe move the item higher or lower on the
view. This isn’t the only place but maybe that helps you pinpoint what
we need to change.

github.com

bestpractical/rt/blob/stable/share/html/Widgets/SelectionBox#L179


      
          <& SelectionBox:current, self => $self &>
          
          <div class="form-row">
            <div class="col-5">
              <&|/l&>Available</&>:
            </div>
          </div>
          
          <div class="form-row">
            <div class="col-5">
              <div class="form-row">
                <div class="col-12">
                  <select name="<%$name%>-Available" id="<%$name%>-Available" size="<%$size%>" multiple="multiple" class="tall selection-box form-control">
          % for (@{$self->{Available}}) {
                    <option value="<% $_->[0] %>"><% $_->[1] %></option>
          % }
                  </select>
                </div>
              </div>
            </div>

github.com

bestpractical/rt/blob/stable/share/html/Widgets/SelectionBox#L193


      
                    <option value="<% $_->[0] %>"><% $_->[1] %></option>
          % }
                  </select>
                </div>
              </div>
            </div>
          
          % unless ($self->{ReadOnly}) {
            <div class="col-auto">
              <div class="form-row">
                <div class="col-12">
                  <input aria-label="Add" name="add" type="submit" class="button btn btn-primary form-control" value=" &rarr; " />
                </div>
              </div>
            </div>
          % }
          
            <div class="col-5">
              <div class="form-row">
                <div class="col-12">
                  <select name="<%$name%>-Selected" id="<%$name%>-Selected" size="<%$size%>" multiple="multiple" class="tall selection-box form-control">

That widget is used in a number of places, so may fix several spots in the UI. I assume the problem is that we’re using an HTML entity which the reader doesn’t know how to deal with?

-kevin

Keith_Creasy · June 30, 2014, 5:27pm

Hi Kevin.

This fixes the problem but I can’t figure out where on our server to make the change so that I can test the result. I tested on a simple, local file but when I change our server location which happens to be “/opt/rt4/share/html/Widgets/SelectionBox” It doesn’t seem to make any difference.

I used aria-label like this:

I’ll b Happy to submit a patch but would like to get it on our own server first.-----Original Message-----
From: rt-users [mailto:rt-users-bounces@lists.bestpractical.com] On Behalf Of Kevin Falcone
Sent: Friday, June 27, 2014 6:13 PM
To: rt-users@lists.bestpractical.com
Subject: Re: [rt-users] Help with Unlabeled Buttons

On Fri, Jun 27, 2014 at 08:20:30PM +0000, Keith Creasy wrote:

The buttons appear in several places but one example is the screen
where you modify the “content” of a “dashboard”. The buttons to add a
search for example I think is a right-pointing arrow. There are also
up and down arrows that I believe move the item higher or lower on the
view. This isn’t the only place but maybe that helps you pinpoint what
we need to change.

github.com

bestpractical/rt/blob/stable/share/html/Widgets/SelectionBox#L179


      
          <& SelectionBox:current, self => $self &>
          
          <div class="form-row">
            <div class="col-5">
              <&|/l&>Available</&>:
            </div>
          </div>
          
          <div class="form-row">
            <div class="col-5">
              <div class="form-row">
                <div class="col-12">
                  <select name="<%$name%>-Available" id="<%$name%>-Available" size="<%$size%>" multiple="multiple" class="tall selection-box form-control">
          % for (@{$self->{Available}}) {
                    <option value="<% $_->[0] %>"><% $_->[1] %></option>
          % }
                  </select>
                </div>
              </div>
            </div>

github.com

bestpractical/rt/blob/stable/share/html/Widgets/SelectionBox#L193


      
                    <option value="<% $_->[0] %>"><% $_->[1] %></option>
          % }
                  </select>
                </div>
              </div>
            </div>
          
          % unless ($self->{ReadOnly}) {
            <div class="col-auto">
              <div class="form-row">
                <div class="col-12">
                  <input aria-label="Add" name="add" type="submit" class="button btn btn-primary form-control" value=" &rarr; " />
                </div>
              </div>
            </div>
          % }
          
            <div class="col-5">
              <div class="form-row">
                <div class="col-12">
                  <select name="<%$name%>-Selected" id="<%$name%>-Selected" size="<%$size%>" multiple="multiple" class="tall selection-box form-control">

That widget is used in a number of places, so may fix several spots in the UI. I assume the problem is that we’re using an HTML entity which the reader doesn’t know how to deal with?

-kevin

Kevin_Falcone · June 30, 2014, 9:27pm

This fixes the problem but I can’t figure out where on our server to
make the change so that I can test the result. I tested on a simple,
local file but when I change our server location which happens to be
“/opt/rt4/share/html/Widgets/SelectionBox” It doesn’t seem to make any
difference.

Are you clearing the mason cache and restarting apache?
rm -rf /opt/rt4/var/mason_data/obj/*

Otherwise RT serves the cached version of the file.

-kevin

Keith_Creasy · June 30, 2014, 9:58pm

No, I am not. This is probably what’s happening. Thanks.

KeithFrom: rt-users [mailto:rt-users-bounces@lists.bestpractical.com] On Behalf Of Kevin Falcone
Sent: Monday, June 30, 2014 5:28 PM
To: rt-users@lists.bestpractical.com
Subject: Re: [rt-users] Help with Unlabeled Buttons

This fixes the problem but I can’t figure out where on our server to
make the change so that I can test the result. I tested on a simple,
local file but when I change our server location which happens to be
“/opt/rt4/share/html/Widgets/SelectionBox” It doesn’t seem to make any
difference.

Are you clearing the mason cache and restarting apache?
rm -rf /opt/rt4/var/mason_data/obj/*

Otherwise RT serves the cached version of the file.

-kevin

I used aria-label like this:

I’ll b Happy to submit a patch but would like to get it on our own server first.

-----Original Message-----
From: rt-users [mailto:rt-users-bounces@lists.bestpractical.com] On
Behalf Of Kevin Falcone
Sent: Friday, June 27, 2014 6:13 PM
To: rt-users@lists.bestpractical.com
Subject: Re: [rt-users] Help with Unlabeled Buttons

The buttons appear in several places but one example is the screen
where you modify the “content” of a “dashboard”. The buttons to add
a search for example I think is a right-pointing arrow. There are
also up and down arrows that I believe move the item higher or lower
on the view. This isn’t the only place but maybe that helps you
pinpoint what we need to change.

https://github.com/bestpractical/rt/blob/stable/share/html/Widgets/Sel
ectionBox#L179
https://github.com/bestpractical/rt/blob/stable/share/html/Widgets/Sel
ectionBox#L193

That widget is used in a number of places, so may fix several spots in the UI. I assume the problem is that we’re using an HTML entity which the reader doesn’t know how to deal with?