Fix accessibility of app navigation toggle

[jancborchardt]

hover/focus feedback before:

hover/focus feedback after:

[jancborchardt]

Also added the missing aria-label to the AppNavigationToggle, but couldn’t figure out how to make it translatable. (Tried via props and also via :aria-label="open ? t('Close navigation') : t('Open navigation')" but both just resulted in empty aria-label.)

[raimund-schluessler]

Also added the missing aria-label to the AppNavigationToggle, but couldn’t figure out how to make it translatable. (Tried via props and also via :aria-label="open ? t('Close navigation') : t('Open navigation')" but both just resulted in empty aria-label.)

@jancborchardt You need to import the l10n mixin like so (maybe adjust the path):
https://github.com/nextcloud/nextcloud-vue/blob/b1d53388b6aaae47a5609f2dc5fe476aca821c1f/src/components/SettingsSelectGroup/SettingsSelectGroup.vue#L48

and use it in the component like so:
https://github.com/nextcloud/nextcloud-vue/blob/b1d53388b6aaae47a5609f2dc5fe476aca821c1f/src/components/SettingsSelectGroup/SettingsSelectGroup.vue#L54

Then you can use t('string') in the template:
https://github.com/nextcloud/nextcloud-vue/blob/b1d53388b6aaae47a5609f2dc5fe476aca821c1f/src/components/SettingsSelectGroup/SettingsSelectGroup.vue#L38

[jancborchardt]

Thanks a lot @raimund-schluessler (and @marcelklehr via chat too), works now and ready to review! :)

[raimund-schluessler]

@jancborchardt I took the liberty to fix the warning and import error on this branch. It works as it should now.

I am just not so sure about the background-color, as it differs from what we use on other Actions. And thinking about that, I figured that it would actually make sense to simply use an ActionButton for the AppNavigationToggle. So I created another PR which solves the same issue by using an ActionButton, see #1844.

[raimund-schluessler]

Closing in favor of #1844.