Replace initialjs-rails with custom avatar code

The initialjs-rails gem hasn't been maintained for years, and it
currently requires `railties < 7.0`, meaning we can't upgrade to Rails 7
while we depend on it.

Since the code in the gem is simple, and we were already rewriting its
most complex part (generating a background color), we can implement the
same code, only we're using Ruby instead of JavaScript. This way, the
avatars will be shown on browsers without JavaScript as well. Since
we're adding a component test that checks SVG images are displayed even
without JavaScript, we no longer need the test that checked images were
displayed after AJAX requests.

Now the tests show the user experience better; people don't care about
the internal name used to select the initial (which is what we were
checking); they care about the initial actually displayed.

Note initialjs generated an <img> tag using a `src="data:image/svg+xml;`
attribute. We're generating an <svg> tag instead, because it's easier.
For this reason, we need to change the code slightly, giving the <svg>
tag the `img` role and using `aria-label` so its contents won't be read
aloud by screen readers. We could give it a `presentation` role instead
and forget about `aria-label`, but then screen readers would read the
text anyway (or, at least, some of them would).
This commit is contained in:
Javi Martín
2024-03-29 20:01:45 +01:00
parent d3b1b21d3d
commit 35659d4419
15 changed files with 81 additions and 51 deletions

View File

@@ -1,6 +1,5 @@
class Shared::AvatarComponent < ApplicationComponent
attr_reader :record, :given_options
use_helpers :avatar_image
def initialize(record, **given_options)
@record = record
@@ -10,7 +9,7 @@ class Shared::AvatarComponent < ApplicationComponent
private
def default_options
{ background_color: colors[seed % colors.size], alt: "" }
{ background_color: colors[seed % colors.size], size: 100, color: "white" }
end
def options
@@ -27,4 +26,53 @@ class Shared::AvatarComponent < ApplicationComponent
def seed
record.id
end
def size
options[:size]
end
def font_size
(size * 0.6).round
end
def background_color
options[:background_color]
end
def color
options[:color]
end
def svg_options
{
xmlns: "http://www.w3.org/2000/svg",
width: size,
height: size,
role: "img",
"aria-label": "",
style: "background-color: #{background_color}",
class: "initialjs-avatar #{options[:class]}".strip
}
end
def text_options
{
x: "50%",
y: "50%",
dy: "0.35em",
"text-anchor": "middle",
fill: color,
style: "font-size: #{font_size}px"
}
end
def initial
record.name.first.upcase
end
def avatar_image
tag.svg(**svg_options) do
tag.text(initial, **text_options)
end
end
end