To remove a label from a ticket on todo.sr.ht one has to click on the
little X next to the label. This X is a SVG.
This leads to problems for text browser users (and I assume for screen
reader users, too).
Here is how different browser behave:
elinks (0.13.2): Does not show anything
links (2.21): Shows submit button and action as URL at bottom
lynx (2.9.0dev6): Shows a button, but does not indicate what it does
w3m (0.5.3+git20220429): Does not show anything
I consider this a bug. Should I file a ticket for this?
From a quick look at the reference the <svg> element has no alt
attribute. While doing some research I found [0].
With this I built the following and did the test again:
<!DOCTYPE HTML>
<html lang=en>
<head><title>sitetitle</title><meta charset="utf-8"></head><body>
<svg role="img" aria-label="[title + description]">
<title>[title]</title>
<desc>[long description]</desc>
<path d="M10 10"/>
</svg></body>
</html>
All four browsers show [long description]
lynx and w3m override the title in <head> with the title from the <svg>.
For w3m there is a patch pending at upstream which fixes this. With the
patch applied w3m shows '[title] [long description]'. I already reported
this to the lynx mailing list.
[0]: https://stackoverflow.com/questions/4697100/accessibility-recommended-alt-text-convention-for-svg-and-mathml/4756461#4756461
On Thu, Jan 05, 2023 at 02:08:43PM +0100, Drew DeVault wrote:
> Patches welcome for this one>
Ok, I had a look at the sources, but I have no idea where to go from
there. I have no experience with flask.
The relevant places seem to be
todosrht/filter.py:111
and
todosrht/templates/ticket.html:209
based on commit fc70ae13a47f976dfa773586daee982be6231654
I hope someone familiar with this topic can take care of this. I'm going
to fix w3m to show empty forms.
Should I file a ticket so that this does not get lost?
On 2023-01-06 at 09:39+01:00, Rene Kita wrote:
> On Thu, Jan 05, 2023 at 02:08:43PM +0100, Drew DeVault wrote:> > Patches welcome for this one>> Ok, I had a look at the sources, but I have no idea where to go from> there. I have no experience with flask.>> The relevant places seem to be> todosrht/filter.py:111
The function icon is defined in core.sr.ht/srht/flask.py,
and the actual SVG is in core.sr.ht/srht/static/icons/times.svg
I am not familiar with a11y, but if the SVG must be modified,
you'll need to grep all of the projects using core.sr.ht
for icon\(.times.\) in case it has a different meaning else where.
(Or maybe X is informative enough, I don't know.)
On Fri, Jan 06, 2023 at 07:00:55PM +0900, Nguyễn Gia Phong wrote:
> On 2023-01-06 at 09:39+01:00, Rene Kita wrote:
> > On Thu, Jan 05, 2023 at 02:08:43PM +0100, Drew DeVault wrote:
> > > Patches welcome for this one
> >
> > Ok, I had a look at the sources, but I have no idea where to go from
> > there. I have no experience with flask.
> >
> > The relevant places seem to be
> > todosrht/filter.py:111
>
> The function icon is defined in core.sr.ht/srht/flask.py,
> and the actual SVG is in core.sr.ht/srht/static/icons/times.svg
Thanks for the pointer.
> I am not familiar with a11y, but if the SVG must be modified,
> you'll need to grep all of the projects using core.sr.ht
> for icon\(.times.\) in case it has a different meaning else where.
> (Or maybe X is informative enough, I don't know.)
The <title> element is part of the <svg>, so I think something like the
patch below might suffice. I split the line to make the change more
obvious.
I've tested this by manipulating the HTML by hand and can confirm that
it works with a patched w3m and shows the expected wrong behaviour with
lynx (which is a bug known to lynx upstream).
Using Firefox the <title> is shown when one hovers with the mouse pointer
over the SVG, as expected.
I don't have a sourcehut instance set up to test the patch.
---
HTML MWE taken from the source of https://todo.sr.ht/~rkta/w3m/6:
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="utf8"/> </head> <body>
<span href="/~rkta/w3m?search=label%3A%22patch%20exists%22"> <a href="/~rkta/w3m?search=label%3A%22patch%20exists%22" rel="nofollow">patch exists</a>
<form action="/~rkta/w3m/6/remove_label/8609" method="POST">
<input dir="auto" name="_csrf_token" type="hidden" value="foobar"/>
<button aria-label="Remove" class="btn btn-link" type="submit">
<span aria-hidden="true" class="icon icon-times">
<svg viewbox="0 0 352 512" xmlns="http://www.w3.org/2000/svg">
<title>X</title>
<path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path></svg>
</span> </button> </form> </span> </body> </html>
---
diff --git a/srht/static/icons/times.svg b/srht/static/icons/times.svg
index f796972..2c27777 100644
--- a/srht/static/icons/times.svg+++ b/srht/static/icons/times.svg
@@ -1 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"/></svg>+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512">+<title>X</title>+<path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"/></svg>
On Fri, Jan 06, 2023 at 02:48:12PM +0100, Rene Kita wrote:
> On Fri, Jan 06, 2023 at 07:00:55PM +0900, Nguyễn Gia Phong wrote:
> > On 2023-01-06 at 09:39+01:00, Rene Kita wrote:
> > > On Thu, Jan 05, 2023 at 02:08:43PM +0100, Drew DeVault wrote:
> > > > Patches welcome for this one
> > >
> > > Ok, I had a look at the sources, but I have no idea where to go from
> > > there. I have no experience with flask.
> > >
> > > The relevant places seem to be
> > > todosrht/filter.py:111
> >
> > The function icon is defined in core.sr.ht/srht/flask.py,
> > and the actual SVG is in core.sr.ht/srht/static/icons/times.svg
>
> Thanks for the pointer.
>
>
> > I am not familiar with a11y, but if the SVG must be modified,
> > you'll need to grep all of the projects using core.sr.ht
> > for icon\(.times.\) in case it has a different meaning else where.
> > (Or maybe X is informative enough, I don't know.)
>
> The <title> element is part of the <svg>, so I think something like the
> patch below might suffice. I split the line to make the change more
> obvious.
After re-reading MDN and testing with w3m, lynx and links I think the
patch below is the correct fix. If a single X is descriptive enough may
be up for discussion. In this case I think so.
diff --git a/srht/static/icons/times.svg b/srht/static/icons/times.svg
index f796972..2c27777 100644
--- a/srht/static/icons/times.svg+++ b/srht/static/icons/times.svg
@@ -1 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"/></svg>+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512">+<desc>X</desc>+<path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"/></svg>