fix(a11y): show bottom nav button labels

[shuuji3]

fix #3119

This PR includes

• showing labels below the bottom nav button icon
• a new option to hide them on the interface setting page (just below the nav button customization section)

With labels

Without labels (current state)

About the default setting, this change may surprise the existing users a bit if they like the current simpler interface. On the other hand, I also understand showing labels by default can provide better accessibility.

[netlify]

✅ Deploy Preview for elk-zone ready!

Name	Link
🔨 Latest commit	7ab0c1e
🔍 Latest deploy log	https://app.netlify.com/sites/elk-zone/deploys/6778f8321985910008147996
😎 Deploy Preview	https://deploy-preview-3120--elk-zone.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for elk-docs canceled.

Name	Link
🔨 Latest commit	7ab0c1e
🔍 Latest deploy log	https://app.netlify.com/sites/elk-docs/deploys/6778f832d5f1db000893c93d

[Dehelssey]

On deploy preview the checkbox for hiding labels does nothing 👀 (i run /e/OS (Android) with Vivaldi)

[shuuji3]

@Dehelssey Unlike other settings, it seems like reloading is required to change to be effective.

[shuuji3]

OK, I figured out how to make them reactive. Now checking should be effective immediately.

[userquin]

uhmmm, why is getPreferences not reactive?

[userquin]

I guess it will be better to move the check in the interface page to the top, between Bottom Navigation and the Choose... paragraph:

[userquin]

I guess you should also change the button layout in the interface page.

[shuuji3]

OK, I'll add labels in that preview too, and move the option below Bottom Navigation header.

uhmmm, why is getPreferences not reactive?

I'm not sure yet 😅

[shuuji3]

• moved the checkbox
• show labels in the preview area
  
  

Also, fixed the reactivity issue with compute() and made it composable. (Thanks @userquin for the help!)

Other than that, I feel like we should add a small space between icon and label. I'll update that tomorrow.

[userquin]

Don't merge yet, the preview buttons not being translated, I'm going to fix it.

preview texts not being translated

We also need to fix long texts, we shouldn't use ellispsis... @Dehelssey any idea about this? Check for example Euskera:

long button text (Euskera)

[userquin]

https://m3.material.io/components/navigation-bar/guidelines

[Dehelssey]

@userquin indeed, ellipsis is not advised. If that label can't be replaced by something shorter I'm not sure how to deal with this. French isn't as effective as english but we don't deal with that long words anyway. In my opinion, two lines label remains the best way to deal with it, but icons should be remain aligned in such a case.

[userquin]

@userquin indeed, ellipsis is not advised. If that label can't be replaced by something shorter I'm not sure how to deal with this. French isn't as effective as english but we don't deal with that long words anyway. In my opinion, two lines label remains the best way to deal with it, but icons should be remain aligned in such a case.

We cannot do that, the bottom nav should have ~67px height, we can ask if the lang has some abbr. to use in that case otherwise there is no solution for this.

(I use md, but we can just ignore that)

[shuuji3]

It seems that we need to find a short string for this new button label in some languages. For English, I think we can shorten "More menu" to "More" or something.

In various apps, developers themselves somehow come up with good short labels and if no localization is available, they fall back to English.

So how about adding new localization keys like nav_short_label next to nav keys here?
https://github.com/elk-zone/elk/blob/411fcc8/locales/en.json#L305

For example:

 "nav": {
     ....
     "conversations": "Conversations",
     ...
     "more_menu": "More menu",
     ...
+"nav_short_label": {
+    ....
+    "conversations": "Conversations",
+    ...
+    "more_menu": "More",

We can just copy the existing nav strings for languages that already have short labels and fall back to English while waiting for the update of other languages. What do you think?

Nav bars examples

I checked nav bars in various Android apps (in English, French, and German).

Slack

Play Store

Contacts

Others

Google Fit and GitHub

They failed showing a good short label in German 😅

[shuuji3]

^ small style refinement (only for the preview area)

Before

After

[userquin]

Maybe we can reduce the elements to 4 when showing the labels... or use ellipsible.

NOTE: X using 6 items without labels and Bluesky using 5 whitout labels.

[shuuji3]

Showing ellipsis is suboptimal but maybe we need to use ellipsis for now to avoid overflow or two lines of label. For some languages having ellipsis labels, users already have choices either reducing to four buttons or hiding labels when they don't want to see ellipsis. Later, we can encourage translators to shorten those labels to avoid ellipsis as possible.

I'd like to keep the maximum number to five since it's better to avoid reducing functionality just for this label issue and the Material guide does not recommend more than 5 buttons¹.

(Aside from the guideline, I don't know the current state but X app may not be reviewed by accessibility expert team so it may not be a good example in terms of accessibility²)

Footnotes

1. Navigation bar – Material Design 3 ↩

2. Elon Musk just axed key Twitter teams like human rights, accessibility, AI ethics and curation | TechCrunch ↩

[shuuji3]

I'm trying to implement the ellipsis but the current CSS does not work as expected yet. But the two-line label issue was fixed.

I referred this method: Truncate String With Ellipsis | CSS-Tricks - https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/