Skip navigation button text is hidden

[hanshillen]

Subject of the issue/enhancement/features

The text inside the 'skip navigation' nav button is visually hidden. When it becomes visible on focus, it looks like an empty button.

This seems to be tied to the recently added Added Navigation Button API (#339), as all nav button text labels are hidden by default. Also, even if _showLabel was set to true for the skip nav button, it seems that the default value for navigation.model.get("_showLabel") (which is false) will override _showLabel values for individual nav buttons. So the only way to get the skip nav button text to show would involve inadvertently unhiding the labels for other nav buttons, like the back button and the PageLevelProgress / Resources extension buttons.

Your environment

Framework v5.31.28 / core v6.40.0
Any browser / OS

Steps to reproduce

Press tab until the skip navigation button is focused.

Expected behaviour

Skip navigation buttons are most useful for sighted keyboard users, so the button text must be visible when the button is visible.

Possibible solution
set _showLabel to true for the skip nav button, and allow the _showLabel attribute on nav button buttons to override the _showLabel attribute on the parent navigation model.

Also, for buttons without an icon class, maybe the text should be visible by default?

Actual behaviour

The button text is visually hidden

Screenshots (if you can)