Cockpit alpha - links appearing blank (without label or title text)

Bug
1

So after finally updating to ns 7.6, as promised I’d do, I gave cockpit a second chance. I seem to like the layout currently applied better, since it feels less cluttered. However, all the collapsed buttons found under the system page, for instance the account configuration (derived from what showed up after I clicked it) are appearing blank for me: no title, lable, alt text, is present as far as I can tell, making them appear as just ( link ) .

2

Sounds like something is missing. Did the installation works without any errors?

3

I’m not sure to understand correctly: can you please post a screenshot to explain what are you expecting?

Thanks in advance

4

The installation went just fine, and behaviour shows in both ff (esr) and chrome on win10. Will try on my iphone to see if it gets better there.
The account button shows fine, though I’d personally expand that title / description to (user settings for “accound” ) , but all the other buttons / links just are blank for me.

Steps to reproduce:

  1. Easyest (win10 only):

  • press ctrl plus winkey plus enter to turn on narrator.

  • Open your cockpit page

  • Put your mouse far far away, and use the tab key to navigate around the page.

  • When done, press ctrl plus winkey plus enter to quit narrator.

(note: this is just the fast aproach, but not the one I’m using)

  1. The more thorrough approach (for win8, win81 and win10)

  • Download nvda (non visual desktop access (www.nvda-project.org)

  • install the software, or run as portable copy

  • open the cockpit interface

  • put your mouse away, and navigate the page with arrows or tab

  • in case of form field difficulties, you can use the mouse to switch fields, though, it’s not really how I get around the web.

Note: for optimal performance, a sound card / sound output is recommended. It’s not what’s on the screen that is important, but how it’s being spoken out loud that makes the difference.
An example:
let’s pick the img html tag. Below are two lines as example, and I’ll mark the one best suited. i’ll replace the less than and greater than signs with parentheses
(img src=“imagefile”) -= bad
(img src=“imagefile” alt=“a non existing image”) -= perfect

The perfect example would render the image with “a non existing image” as an image descriptor so I know more or less what the image represents.

The above is only a way for others to maybe get more insights in what might be rong, my html is limited to very old and basic lessons, and that’s where it ends, so I’m trying my best to explain with as best of terms as I can.

1 Like
5

alternatively, the link below could maybe also help out in case my explanations are too dark:
Web Accessibility Evaluation Tools List - World Wide Web Consortium

6

I’m not sure if I understand correctly, but you are talking about navigation in cockpit without using the mouse, navigating the web in a “old way”?

Do we need to improve usability from that point of view? It’s correct?

Thanks

7

Believe it or not, but I finally found a way to make the entire cokpit interface blind / screen reader readable. Who would have guessed that it’s a matter of turning off the page style under current ff esr. A while back, I downloaded the page source and left it in my dropbox, forgetting the filename. Opening the file today, accidentaly, I found out I could read the whole page. Then, I decided to open the interface again, and on a wim turned off the style (was set to basic before), and voila, the whole interface shows up with links and all.

8

I’m not sure I’m fully understand what you did. Can you describe the steps?

9

Since I’m completely blind, the way I interact with the os “windows” in my case, is fairly different from what everyone else does. Rather than using the mouse and screen, I use the keyboard only and a software sollution called a screenreader. Without going into too much technicalities, suffice it to say a screen reader converts on screen text and elements and so on, into spoken output or braille. What nvda is for windows, is orca for gnome and brltty or speakup for the console.

  I'm not sure on why things behaved like they did, because I'm not sure what influence firefoxe's "view > page style" item in the menu has, but:

  - With the page style set to "basic" most links except those at the beginning of the page like system, applications ... show up for me.

  - With the page style set to "no style" all links, including those to chose a power scheme and all subsections of "system" are showing up, making the entire interface readable.

You could basically imagine it like this:

  - With the style set to "basic" [seems the default] the page for me, looked like a whole page with text, and links being white text on a white background only showing the "link icon" so that I got an indication it was a link, but clueless on what ever that link was. I'm not using a screen, so the background reference is only to try and get a more or less visual representation across.

  - With the page style turned off, that same page, transformed into a page with text, and links, now with a "so to speak" black text on a white background, clearly marking what a link points at or is supposed to do when clicked.
10

Great explanation!

Do you know if there are some way to check if the page is opened using the screen reader and automatically remove the style?

11

I somehow think the style is the cause of the issue, since as soon as I make firefox turn off the page style it’s fine. I will ask around to try and find someone more familiar with screenreaders and web page accessibility in a more programming orientation. Where would I have to look to get the pages / scripts of the cockpit interface (otherwise I’d have to ask people to install nethserver), wich still is the first I’ll propose, but just in case…

1 Like
12

Everything is hosted here: nethserver-cockpit/ui at master · NethServer/nethserver-cockpit · GitHub

The style comes from a RedHat css framework: https://www.patternfly.org/