Add an "ARIA label" field to the navigation module

[leofeyer]

Implements #6977

[zoglo]

I feel like this option should be available in many languages. I've had a project that focuses on an accessible navigation and I used translations for 5 different languages.

If people would want to change it, they wouldn't need the field but could override the translation, wdyt?

[fritzmg]

@zoglo you can use the {{label::*}} insert tag for that - or create multiple navigation modules (one for each language).

[zoglo]

I was just thinking about pre-delivery of the Aria-labels within translations so people don't need to set it up manually, they could still override it within this module 🤔.

Maybe it's good the way it's implemented in the PR, especially for other types of navigations..

Going the long way of creating the language files for the label insert tag would just need a proper documentation.

[fritzmg]

What do you want to do to pre-deliver here? The label will be be different for each navigation module.

[zoglo]

What do you want to do to pre-deliver here? The label will be be different for each navigation module.

You are right, you already convinced me :D

[leofeyer]

Having to create multiple modules just to change the label is quite inconvenient indeed. The {{label::*}} and the {{iflng::*}} insert tags are good workarounds, but maybe we can come up with a better (in terms of more i18n-like) solution?

[fritzmg]

Having to create multiple modules just to change the label is quite inconvenient indeed. The {{label::*}} and the {{iflng::*}} insert tags are good workarounds, but maybe we can come up with a better (in terms of more i18n-like) solution?

But you already have to do that with several modules anyway - especially the navigation module. For example:

• If you want to have different labels for the back link in the news reader module, you either use {{label::*}} or multiple modules.
• If you have a navigation with a reference page, you need to create multiple instances of this module if you have multiple website roots (for multiple languages).

In each case you typically create another module - the root page dependent module selector - and then integrate that module in your page layout or a page's content.

[zoglo]

Having to create multiple modules just to change the label is quite inconvenient indeed. The {{label::*}} and the {{iflng::*}} insert tags are good workarounds, but maybe we can come up with a better (in terms of more i18n-like) solution?

That's why I proposed having a fallback translation in place when the aria label is not set.
However, it would just say something likeNavigation or Menu.

If people would want it to be more accessible, they could use the new field you introduced in this PR.

However, idk if it makes things worse or better because it would be so universal.

[fritzmg]

It would make things worse in my opinion. If you have multiple modules on your site - e.g. the main menu in your header and a footer menu in your footer, they would both just say aria-label="Main". Either you define the label yourself or no aria-label attribute should be output, otherwise there is no gain.

[fritzmg]

Suggested change

	<nav class="<?= $this->class ?> block"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?><?php if ($this->ariaLabel): ?> aria-label="<?= $this->ariaLabel ?>"<?php endif; ?>>
	<nav<?= $this->attr($this->cssID)->addClass((string) $this->class)->addStyle((string) $this->style)->setIfExists('aria-label', $this->ariaLabel) ?>>

@leofeyer wdyt? Should we do it like that for all templates, now that we have $this->attr()?

[leofeyer]

Yes, why not. Do we need a ->setIfExists('id', $this->???) instead of $this->cssID as well then?

[fritzmg]

Well, the $this->??? is the problem :). The CSS ID is currently not available in the template. Only the string including the attribute (i.e. ' id="foobar"'). We could introduce a rawCssID variable or something and pass $cssID[0] to that variable in various places, so that we can use ->setIfExists('id', $this->rawCssID).

Another option would be to use:

$this->attr($this->cssID)->…

This should automatically parse the id="..." string and add it as an attribute (if applicable). (haven't tested this though)

[leofeyer]

That would be nice if it works.

[fritzmg]

Just tested it - it does work.

[ausi]

$this->attr()…->mergeWith($this->cssID) would also work, JFI ☺️

[fritzmg]

I'd prefer passing it to attr().

[leofeyer]

See #7218

[leofeyer]

That’s right, the label must never be "menu" or "navigation", because screen readers already announce the element type. It would read "menu navigation" or "navigation navigation". The label should just be "main" or "top".

[leofeyer]

If you have a navigation with a reference page, you need to create multiple instances of this module

Yes, because you change the module configuration → valid case. But if the configuration remains the same and only the label changes → not a valid case. At least in my opinion.

[fritzmg]

Yes, because you change the module configuration → valid case. But if the configuration remains the same and only the label changes → not a valid case. At least in my opinion.

It doesn't really matter what type of field you have to change. If you have 3 languages and 3 footer navigations (where the footer navigation is represented by one parent page in the site structure) you have to clone the navigation module 3 times and change one field accordingly. The rest of the configuration stays the same.

And regardless: all the fields of a module are part of its configuration, not just specific fields.

[fritzmg]

In #7218 I noticed that we already have a hardcoded aria-label="Breadcrumb" attribute for the breadcrumb module. I think this should then be adjustable in the module as well.