feat: Improve photo gallery accessibility + internationalization

[g123k]

HI everyone,

Here is the current layout for the gallery:

There are three issues:

• Text is poorly readable (and thus accessible)
• No accessibility node
• The date format is not translated

I've fixed all of them + added the icon from the POC:

[codecov-commenter]

Codecov Report

Attention: Patch coverage is 0% with 57 lines in your changes missing coverage. Please review.

Project coverage is 7.43%. Comparing base (4d9c7fc) to head (a45d398).
Report is 185 commits behind head on develop.

Files	Patch %	Lines
...ooth_app/lib/pages/image/product_image_widget.dart	0.00%	46 Missing ⚠️
.../pages/image/product_image_gallery_other_view.dart	0.00%	11 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           develop   #5366      +/-   ##
==========================================
- Coverage     9.54%   7.43%   -2.12%     
==========================================
  Files          325     380      +55     
  Lines        16411   19483    +3072     
==========================================
- Hits          1567    1448     -119     
- Misses       14844   18035    +3191     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[monsieurtanuki]

Hi @g123k!
It's no obvious in your UI if the date refers to the top or the bottom image.
And I have doubts about letting translators decide technical date formats and I recommend DateFormat.yMd.
Beyond those remarks, it's an improvement, thanks!
Ping @jusdekiwi who created #5128 (#5144).

[g123k]

Good point for the date placement.
What about switching to a card-based layout?

[monsieurtanuki]

What about switching to a card-based layout?

Cards would make sense 👍

[g123k]

I've implemented the change to a card-based layout.

• the color of the card is the main color of the photo.

[monsieurtanuki]

Hi @g123k!
That's almost perfect, but I would really simplify it and dismiss your palette related code, cf. my comments.

[monsieurtanuki]

If the default is true, it would be much simpler to say that the default is true, wouldn't it?

Something like bool darkBackground = true;. Et voilà.

Same for backgroundColor.

[g123k]

Here we can say it's a balance between optimization VS code clarity.
By doing bool darkBackground = true , we force all items in the grid to have a value in the memory.
Here, until the palette is computed, it's memory free.

[monsieurtanuki]

I don't believe in your palette tap dancing, for several UI/UX reasons:

• dark mode means dark mode
• let's assume that the user wants to have widgets with the same color when they do the same thing on the same page, and not a "random" meaningless patchwork of dark and light
• you're somehow downloading the full image twice - even though I guess there's cache involved behind
• the colors may change after loading is complete

[teolemon]

It's better than the current situation, approved.