deblan/side_menu
deblan/side_menu
3
6
Fork 5
Code Issues 6 Pull requests 11 Projects Releases 119 Wiki Activity

[Bug] Custom menu is not labeled for screen readers #311

New issue
Closed
opened 2024-01-26 20:26:44 +01:00 by citygabor · 15 comments
citygabor commented 2024-01-26 20:26:44 +01:00
Copy link

Environment

3.11.3* Custom menu version:

  • Nextcloud version:
  • PHP version:
  • Web server (Nginx, Apache2):
  • Web browser and version (Firefox 80, Google Chrome 74, etc):

Configuration

Hello Simon Vieille,

I am using screen reader and noticed that your Custom Menu app is not labeled for a screen reader.
I belive that when the Custom Menu app is enabled in the administration settings after that a new button goes to the top left of the menu.

When the virtual cursor is on with any of my screen reader app(JAWS, Narrator, NVDA) and pressing "B" to navigate to the bottons then the first button has no label.

I assume it has no labels for visual people as it may look 3 dots.. But for screen readers it is necessary to no what is the label of that button.
Please label as:

  • Custom Apps Menu
  • Navigation Apps menu
  • NextCloud Apps menu
  • Whatever you feel it would be the best menu name.

I belive this label technic can be made without any visual changes on the current look.

Many thanks,
Regards,
Gabor

Steps to reproduce

Just enabling the virtual cursor mode on and hit the "B" key from my keyboard and this will navigate to the three dots menu and my screen reader reads as "button has no label".

Observed Results

Any of the popular screen readers find no labels for the Custom Menu app.

Expected Results

At least a meaningful label should be added to the button.

More informations

No response

### Environment 3.11.3* Custom menu version: * Nextcloud version: * PHP version: * Web server (Nginx, Apache2): * Web browser and version (Firefox 80, Google Chrome 74, etc): ### Configuration Hello Simon Vieille, I am using screen reader and noticed that your Custom Menu app is not labeled for a screen reader. I belive that when the Custom Menu app is enabled in the administration settings after that a new button goes to the top left of the menu. When the virtual cursor is on with any of my screen reader app(JAWS, Narrator, NVDA) and pressing "B" to navigate to the bottons then the first button has no label. I assume it has no labels for visual people as it may look 3 dots.. But for screen readers it is necessary to no what is the label of that button. Please label as: - Custom Apps Menu - Navigation Apps menu - NextCloud Apps menu - Whatever you feel it would be the best menu name. I belive this label technic can be made without any visual changes on the current look. Many thanks, Regards, Gabor ### Steps to reproduce Just enabling the virtual cursor mode on and hit the "B" key from my keyboard and this will navigate to the three dots menu and my screen reader reads as "button has no label". ### Observed Results Any of the popular screen readers find no labels for the Custom Menu app. ### Expected Results At least a meaningful label should be added to the button. ### More informations _No response_
citygabor added the
bug
 label 2024-01-26 20:26:44 +01:00
deblan added the
WIP
 label 2024-01-26 22:47:57 +01:00
deblan added
next release
 and removed
WIP
 labels 2024-01-26 23:16:19 +01:00
deblan commented 2024-01-26 23:16:46 +01:00
Owner
Copy link

Hi,

It will be released soon!

Hi, It will be released soon!
deblan reopened this issue 2024-01-26 23:16:46 +01:00
citygabor commented 2024-01-26 23:37:33 +01:00
Author
Copy link

Hello,

Thanks a lot,

G

Hello, Thanks a lot, G
deblan commented 2024-01-27 10:55:19 +01:00
Owner
Copy link

Released in v3.11.4! Feel free to open a new issue if there are more accessibilities issues.

Released in v3.11.4! Feel free to open a new issue if there are more accessibilities issues.
citygabor commented 2024-01-27 18:52:33 +01:00
Author
Copy link

Hello Simon,

That was really quick.

I updated your app and it is updated tot he mentioned version. However I still do not see the label on the button with my screen reader.

I am running NextCloud on a TrueNas Scale system as an app.

What I did:

  1. I updated your Custom Menu app tot he latest version. Tested no succes.
  2. I Stopped the NextCloud app to restart apache or any web component. But before that I removed your Custom Menu app from the Apps menu. But still no success.
  3. Restarted my Browser and my screen reader as well, but still no success.
  4. I also checked under ...p/nexcloud/data/custom_apps/ directory side_menu directory is gone after I disabled and removed your Custom Menu app. And when I again enabled this app the side_menu directory is back again.

Can you please let me know what other steps should I do more to investigate from my end?

Thank you very much,

Regards,

Gabor

Hello Simon, That was really quick. I updated your app and it is updated tot he mentioned version. However I still do not see the label on the button with my screen reader. I am running NextCloud on a TrueNas Scale system as an app. What I did: 1. I updated your Custom Menu app tot he latest version. Tested no succes. 2. I Stopped the NextCloud app to restart apache or any web component. But before that I removed your Custom Menu app from the Apps menu. But still no success. 3. Restarted my Browser and my screen reader as well, but still no success. 4. I also checked under ...p/nexcloud/data/custom_apps/ directory side_menu directory is gone after I disabled and removed your Custom Menu app. And when I again enabled this app the side_menu directory is back again. Can you please let me know what other steps should I do more to investigate from my end? Thank you very much, Regards, Gabor
deblan reopened this issue 2024-01-27 20:05:02 +01:00
deblan commented 2024-01-27 20:13:15 +01:00
Owner
Copy link

If nextcloud show v3.11.4 as current version of Custom menu so you have the good one. Try to force the cache reload with this shortcut: ctrl + shift + r.

The fix add the attribute aria-label on buttons (https://gitnet.fr/deblan/side_menu/pulls/312/files#diff-91485a133f35202d95111125162f1f7d248b6d77) according to this documentation.

I don't use Windows so I can test Narrative. I'm working on a solution to test it.

If nextcloud show v3.11.4 as current version of Custom menu so you have the good one. Try to force the cache reload with this shortcut: `ctrl + shift + r`. The fix add the attribute `aria-label` on buttons (https://gitnet.fr/deblan/side_menu/pulls/312/files#diff-91485a133f35202d95111125162f1f7d248b6d77) according [to this documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label). I don't use Windows so I can test Narrative. I'm working on a solution to test it.
deblan added
question
 and removed
next release
 labels 2024-01-27 20:44:39 +01:00
citygabor commented 2024-01-27 21:33:19 +01:00
Author
Copy link

Hello,

Yes, it shows that one.

I noticed something:

When I opened the Files app and navigate tot he top of the screen the following HTML elements can be seen by screen reader.. With the following order.

Files - Nextcloud
Skip to main content
Skip to navigation of app
Felirat nélküli 0 Gomb (it means in English? No labeled 0 button )

Go to Dashboard

But when I open my dashboard I can see the following:

Dashboard - Nextcloud
Skip to main content
Felirat nélküli 0 Gomb (it means in English? No labeled 0 button )

Go to Dashboard

So before the “Go to Dashboard” link there is a 3dots button without label.

How did you named that button:

This is the words you used? “navigation of app”

If yes, maybe you named it the navigation pane, but not the button.

I did restart my Truenas nas and my computer too. I did used the Ctrl+F5 and the Ctrl+Shift+R keyboard combination before my first mail as well.

Also did a research on my own.

I used a Microsoft Accessibility insight Browser extension

I am suspecting this needs to be corrected, but I am not a developer so am just trying to find a wrong labels.

Wrong code:

Correct code:

I am attaching the result of the Fast pass from the Accessibility Insight app.

If that is not the right direction please apologize I am not a developer.

Thanks,

Regards,

Gabor

Hello, Yes, it shows that one. I noticed something: When I opened the Files app and navigate tot he top of the screen the following HTML elements can be seen by screen reader.. With the following order. Files - Nextcloud Skip to main content Skip to navigation of app Felirat nélküli 0 Gomb (it means in English? No labeled 0 button ) Go to Dashboard But when I open my dashboard I can see the following: Dashboard - Nextcloud Skip to main content Felirat nélküli 0 Gomb (it means in English? No labeled 0 button ) Go to Dashboard So before the “Go to Dashboard” link there is a 3dots button without label. How did you named that button: This is the words you used? “navigation of app” If yes, maybe you named it the navigation pane, but not the button. I did restart my Truenas nas and my computer too. I did used the Ctrl+F5 and the Ctrl+Shift+R keyboard combination before my first mail as well. Also did a research on my own. I used a Microsoft Accessibility insight Browser extension I am suspecting this needs to be corrected, but I am not a developer so am just trying to find a wrong labels. Wrong code: <button class="side-menu-opener" :arial-label="label"></button> Correct code: <button class="side-menu-opener" aria-label="Navigation Apps"></button> I am attaching the result of the Fast pass from the Accessibility Insight app. If that is not the right direction please apologize I am not a developer. Thanks, Regards, Gabor
citygabor commented 2024-01-28 19:29:16 +01:00
Author
Copy link

Hello,

Can You please provide me a test account for your test system?

I reported a similar issue to Passwords App team and they could provided me a test account and I was able to find their correction as a link in the Passwords Ap. And now I could provided back some response about that button.

If you have a test environment where I can test your Custom Menu app navigation app button that would be great. As I may have local issue with your Custom Menu app with the new release as I still do not see your label on that button.

Thanks,

Regards,

g

Hello, Can You please provide me a test account for your test system? I reported a similar issue to Passwords App team and they could provided me a test account and I was able to find their correction as a link in the Passwords Ap. And now I could provided back some response about that button. If you have a test environment where I can test your Custom Menu app navigation app button that would be great. As I may have local issue with your Custom Menu app with the new release as I still do not see your label on that button. Thanks, Regards, g
deblan commented 2024-01-28 22:58:20 +01:00
Owner
Copy link

I don't have an online dev environement.

I think I found the problem.

I don't have an online dev environement. I think I found the problem.
deblan added the
next release
 label 2024-01-28 23:11:18 +01:00
deblan reopened this issue 2024-01-28 23:11:22 +01:00
deblan commented 2024-01-28 23:23:13 +01:00
Owner
Copy link

Updated on v3.11.5!

Updated on v3.11.5!
deblan removed the
question
next release
 labels 2024-01-28 23:24:34 +01:00
deblan commented 2024-01-29 12:14:59 +01:00
Owner
Copy link

Can I close this issue?

Can I close this issue?
citygabor commented 2024-01-29 19:34:12 +01:00
Author
Copy link

Hello,

I updated this to 3.11.5, but still no success. I did reinstalled the “Custom menu” app from the app store and rebooted my NextCloud instance too.

Can you please turn on Voice Over if you use Apple?

Or if you use Linux turn Orca on and try to navigate .

…with down or up arrow keys when the virtual cursor is on?

Enable Orca:

https://help.ubuntu.com/stable/ubuntu-help/a11y-screen-reader.html.en https://help.ubuntu.com/stable/ubuntu-help/a11y-screen-reader.html.en

enable Voice over:

https://support.apple.com/hu-hu/guide/voiceover/vo2682/mac#:~:text=Choose%20Apple%20menu%20%3E%20System%20Settings,turn%20VoiceOver%20on%20or%20off https://support.apple.com/hu-hu/guide/voiceover/vo2682/mac#:~:text=Choose%20Apple%20menu%20%3E%20System%20Settings,turn%20VoiceOver%20on%20or%20off.

When you are on the dashboard of NextCloud or any app is open. just type Ctrl + Home and you will be on the first region of the screen and then pressing the down key till to reach the Custom menu app.

Please try to open any of the screen reader from your machine.

Thanks,

regards,

G

Hello, I updated this to 3.11.5, but still no success. I did reinstalled the “Custom menu” app from the app store and rebooted my NextCloud instance too. Can you please turn on Voice Over if you use Apple? Or if you use Linux turn Orca on and try to navigate . …with down or up arrow keys when the virtual cursor is on? Enable Orca: <https://help.ubuntu.com/stable/ubuntu-help/a11y-screen-reader.html.en> https://help.ubuntu.com/stable/ubuntu-help/a11y-screen-reader.html.en enable Voice over: <https://support.apple.com/hu-hu/guide/voiceover/vo2682/mac#:~:text=Choose%20Apple%20menu%20%3E%20System%20Settings,turn%20VoiceOver%20on%20or%20off> https://support.apple.com/hu-hu/guide/voiceover/vo2682/mac#:~:text=Choose%20Apple%20menu%20%3E%20System%20Settings,turn%20VoiceOver%20on%20or%20off. When you are on the dashboard of NextCloud or any app is open. just type Ctrl + Home and you will be on the first region of the screen and then pressing the down key till to reach the Custom menu app. Please try to open any of the screen reader from your machine. Thanks, regards, G
deblan commented 2024-02-14 19:56:11 +01:00
Owner
Copy link

Should be fixed in v3.11.7!

Should be fixed in v3.11.7!
citygabor commented 2024-02-15 22:26:36 +01:00
Author
Copy link

Hello Simon,

Thanks for your action and help,

After installed the latest version and refreshed the screen both issue are gone.

both case are solved now. I think you already closed them.

May I know how you could solve the issue?

Thanks again,

regards,,

Gabor

Hello Simon, Thanks for your action and help, After installed the latest version and refreshed the screen both issue are gone. both case are solved now. I think you already closed them. May I know how you could solve the issue? Thanks again, regards,, Gabor
deblan commented 2024-02-16 09:05:28 +01:00
Owner
Copy link

The aria-label attribute on buttons didn't work as expected First I tried to add a hidden span element using display: none in CSS but orca didn't read. So I moved away the span using this trick:

Lines 89 to 92 in 951dd74
.side-menu-opener span {
position: relative;
left: 50px;
}

The `aria-label` attribute on buttons didn't work as expected First I tried to add a hidden span element using `display: none` in CSS but `orca` didn't read. So I moved away the span using this trick: https://gitnet.fr/deblan/side_menu/src/commit/951dd742d85e3dbee2763d977c2d7b17bfa81234/css/sideMenu.css#L89-L92
citygabor commented 2024-02-17 17:17:17 +01:00
Author
Copy link

Hello,

With this goal you could fix the focus on the side menu for my screen .reader and I believe those sighted person who use the navigation with keyboards.

Before this version, Til now whenever I opened the side menu my focus was still on the actual NextCloud app. But Now whenever I open the side menu my focus directly on the actual application menu “button” inside the navigation menu.

So thanks for this as well as it solved some extra keyboard combination for my movement too.

Regards,

Gabor

Hello, With this goal you could fix the focus on the side menu for my screen .reader and I believe those sighted person who use the navigation with keyboards. Before this version, Til now whenever I opened the side menu my focus was still on the actual NextCloud app. But Now whenever I open the side menu my focus directly on the actual application menu “button” inside the navigation menu. So thanks for this as well as it solved some extra keyboard combination for my movement too. Regards, Gabor
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
develop
master
translations
renovate/stylelint-scss-6.x
renovate/stylelint-config-recommended-scss-14.x
renovate/stylelint-16.x
renovate/sass-loader-14.x
renovate/eslint-webpack-plugin-4.x
renovate/eslint-plugin-node-11.x
feature/ci-refactoring
bugfix/issue278-239
renovate/babel-loader-9.x
renovate/nextcloud-vue-8.x
feature/dependencies-upgrade
renovate/nextcloud-browserslist-config-3.x
renovate/eslint-import-resolver-webpack-0.x
v2.x
v3.12.0
v3.11.8
v3.11.7
v3.11.6
v3.11.5
v3.11.4
v3.11.3
v3.11.2
v3.11.1
v3.11.0
v3.10.3
v3.10.2
v3.10.1
v3.10.0
v3.9.1
v3.9.0
v3.8.0
v3.7.4
v3.7.3
v3.7.2
v3.7.1
v3.7.0
v3.6.0
v3.5.2
v2.5.2
v3.5.1
v3.5.0
v3.4.1
v3.4.0
v3.3.2
v3.3.1
v3.3.0
v3.2.1
v3.2.0
v3.1.0
v3.0.1
v3.0.0
v2.5.1
v2.5.0
v2.4.3
v2.4.2
v2.4.1
v2.4.0
v2.3.5
v2.3.4
v2.3.3
v2.3.2
v2.3.1
v2.3.0
v2.2.0
v2.1.0
v2.0.1
v2.0.0
v1.28.0
v1.27.2
v1.27.1
v1.27.0
v1.26.0
v1.25.2
v1.25.1
v1.25.0
v1.24.0
v1.23.1
v1.23.0
v1.22.2
v1.22.1
v1.22.0
v1.21.0
v1.20.1
v1.20.0
v1.19.1
v1.19.0
v1.18.0
v1.17.0
v1.16.3
v1.16.2
v1.16.1
v1.16.0
v1.15.0
v1.14.0
v1.13.0
v1.12.3
v1.12.2
v1.12.1
v1.12.0
v1.11.0
v1.10.0
v1.9.3
v1.9.2
v1.8.6
v1.8.5
v1.8.4
v1.8.3
v1.8.2
v1.8.1
v1.8.0
v1.8.0-rc2
v1.7.0
v1.6.3
v1.6.2
v1.6.1
v1.6.0
v1.5.0
v1.4.1
v1.4.0
v1.3.4
v1.3.3
v1.3.2
v1.3.1
v1.3.0
v1.2.4
v1.2.3
v1.2.2
v1.2.1
v1.1.3
v1.1.2
v1.1.1
v1.0.1
v1.0.0
Labels
Clear labels   
bug

Something is not working

  
duplicate

This issue or pull request already exists

  
enhancement

New feature

  
FR accepted

Feature request is accepted

  
help wanted

Need some help

  
invalid

Something is wrong

  
need discussion

Need discussion

  
next release

   
not reproduced

The bug is not reproduced

  
PR requested

Need a pull request

  
question

More information is needed

  
reproduced

The bug is reproduced

  
WIP

Work in progress

  
wontfix

This won't be fixed

No labels
bug
duplicate
enhancement
FR accepted
help wanted
invalid
need discussion
next release
not reproduced
PR requested
question
reproduced
WIP
wontfix
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
2 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: deblan/side_menu#311
No description provided.
Delete branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?