Skip to content

[A11y] MODX Manager Accessibility #16612

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
jenswittmann opened this issue Sep 5, 2024 · 3 comments
Open

[A11y] MODX Manager Accessibility #16612

jenswittmann opened this issue Sep 5, 2024 · 3 comments
Labels
feature Request about implementing a brand new function or possibility.

Comments

@jenswittmann
Copy link
Contributor

jenswittmann commented Sep 5, 2024 •
edited
Loading

Feature request

Summary

The MODX Manager is based on ExtJS and is not accessible for keyboard navigation and screen readers. The manager should therefore also be accessible to the employees of a company who maintain the website.

See this for public discussion: https://community.modx.com/t/modx-manager-accessibilty/7990

Why is it needed?

The Barrierefreiheitsstärkungsgesetz (BFSG) 2 comes into force on 28 June 2025.

Suggested solution(s)

Bring Keyboardnavigation and Screenreadertest in the MODX Dev Workflow.

Related issue(s)/PR(s)

Commits/PR will be prefixed with [A11y].
@jenswittmann jenswittmann added the feature Request about implementing a brand new function or possibility. label Sep 5, 2024
jenswittmann added a commit to jenswittmann/revolution that referenced this issue Sep 5, 2024
@jenswittmann
A11y: add _a11y.scss and reset focus outline in manager modxcms#16612
f4a4c48 
override .ext-webkit *:focus{ outline: none !important; }
jenswittmann added a commit to jenswittmann/revolution that referenced this issue Sep 5, 2024
@jenswittmann
A11y: add keyboard navigation demo for manager main nav modxcms#16612
c865b45
@jenswittmann jenswittmann mentioned this issue Sep 5, 2024
Merged
jenswittmann added a commit to jenswittmann/revolution that referenced this issue Sep 5, 2024
@jenswittmann
A11y: add _a11y.scss and reset focus outline in manager modxcms#16612
5774259 
override .ext-webkit *:focus{ outline: none !important; }
jenswittmann added a commit to jenswittmann/revolution that referenced this issue Sep 5, 2024
@jenswittmann
A11y: add keyboard navigation demo for manager main nav modxcms#16612
6fe508a
jenswittmann added a commit to jenswittmann/revolution that referenced this issue Sep 5, 2024
@jenswittmann
A11y: add _a11y.scss and reset focus outline in manager modxcms#16612
1b72c88 
override .ext-webkit *:focus{ outline: none !important; }
jenswittmann added a commit to jenswittmann/revolution that referenced this issue Sep 5, 2024
@jenswittmann
A11y: add keyboard navigation demo for manager main nav modxcms#16612
4e10ab2
@jenswittmann jenswittmann changed the title MODX Manager Accessibilty A11y: MODX Manager Navigation Sep 9, 2024
@jenswittmann jenswittmann changed the title A11y: MODX Manager Navigation A11y: MODX Manager Accessibilty Sep 9, 2024
jenswittmann added a commit to jenswittmann/revolution that referenced this issue Sep 9, 2024
@jenswittmann
A11y: optimize keyboard navigation for manager main nav modxcms#16612
0aea18d
jenswittmann added a commit to jenswittmann/revolution that referenced this issue Sep 11, 2024
@jenswittmann
A11y: add missing href attribute for manager main nav to ensure oncli…
b993603 
…ck fires on keyboard navigation modxcms#16612
jenswittmann added a commit to jenswittmann/revolution that referenced this issue Sep 12, 2024
@jenswittmann
A11y: add keydown escape for manager main nav modxcms#16612
96e2542
jenswittmann added a commit to jenswittmann/revolution that referenced this issue Sep 12, 2024
@jenswittmann
A11y: make modx-tabs focusable modxcms#16612
c284dc8
@jenswittmann jenswittmann mentioned this issue Sep 12, 2024
Closed
jenswittmann added a commit to jenswittmann/revolution that referenced this issue Sep 12, 2024
@jenswittmann
A11y: make modx-tabs focusable modxcms#16612
b158e07
jenswittmann added a commit to jenswittmann/revolution that referenced this issue Sep 12, 2024
@jenswittmann
A11y: make modx-tabs focusable modxcms#16612
c7cdbc3
@jenswittmann jenswittmann changed the title A11y: MODX Manager Accessibilty [A11y] MODX Manager Accessibilty Sep 13, 2024
jenswittmann added a commit to jenswittmann/revolution that referenced this issue Sep 13, 2024
@jenswittmann
A11y: make modx-tabs focusable modxcms#16612
5b5b2ba
jenswittmann added a commit to jenswittmann/revolution that referenced this issue Sep 13, 2024
@jenswittmann
A11y: optimie JS _this/el modxcms#16612
1c92247
jenswittmann added a commit to jenswittmann/revolution that referenced this issue Sep 13, 2024
@jenswittmann
A11y: bugfix JS var openSubnav = modxcms#16612
4be7479
jenswittmann added a commit to jenswittmann/revolution that referenced this issue Sep 13, 2024
@jenswittmann
A11y: optimize focus for checkboxes modxcms#16612
ec4e1d9
@jenswittmann jenswittmann changed the title [A11y] MODX Manager Accessibilty [A11y] MODX Manager Accessibility Sep 13, 2024
jenswittmann added a commit to jenswittmann/revolution that referenced this issue Sep 13, 2024
@jenswittmann
A11y: use <a> element for modx-button to be focusable in resource tre…
f903a73 
…e for create/refresh modxcms#16612
@jenswittmann jenswittmann mentioned this issue Sep 13, 2024
Open
jenswittmann added a commit to jenswittmann/revolution that referenced this issue Sep 18, 2024
@jenswittmann
A11y: add skiplinks and correct tabindex order modxcms#16612
aac69f5
opengeek pushed a commit to jenswittmann/revolution that referenced this issue Sep 23, 2024
@jenswittmann @opengeek
A11y: add _a11y.scss and reset focus outline in manager modxcms#16612
dd811eb 
override .ext-webkit *:focus{ outline: none !important; }
opengeek pushed a commit to jenswittmann/revolution that referenced this issue Sep 23, 2024
@jenswittmann @opengeek
A11y: add keyboard navigation demo for manager main nav modxcms#16612
34909bb
opengeek pushed a commit to jenswittmann/revolution that referenced this issue Sep 23, 2024
@jenswittmann @opengeek
A11y: optimize keyboard navigation for manager main nav modxcms#16612
d3b4f32
opengeek pushed a commit to jenswittmann/revolution that referenced this issue Sep 23, 2024
@jenswittmann @opengeek
A11y: add missing href attribute for manager main nav to ensure oncli…
24fb76d 
…ck fires on keyboard navigation modxcms#16612
opengeek pushed a commit to jenswittmann/revolution that referenced this issue Sep 23, 2024
@jenswittmann @opengeek
A11y: add keydown escape for manager main nav modxcms#16612
7e2901c
opengeek pushed a commit to jenswittmann/revolution that referenced this issue Sep 23, 2024
@jenswittmann @opengeek
A11y: make modx-tabs focusable modxcms#16612
471f332
opengeek pushed a commit to jenswittmann/revolution that referenced this issue Sep 23, 2024
@jenswittmann @opengeek
A11y: optimie JS _this/el modxcms#16612
cfc0643
opengeek pushed a commit to jenswittmann/revolution that referenced this issue Sep 23, 2024
@jenswittmann @opengeek
A11y: bugfix JS var openSubnav = modxcms#16612
45831d0
opengeek pushed a commit to jenswittmann/revolution that referenced this issue Sep 23, 2024
@jenswittmann @opengeek
A11y: optimize focus for checkboxes modxcms#16612
6ab27cf
opengeek pushed a commit to jenswittmann/revolution that referenced this issue Sep 23, 2024
@jenswittmann @opengeek
A11y: use <a> element for modx-button to be focusable in resource tre…
69fb4a1 
…e for create/refresh modxcms#16612
opengeek pushed a commit to jenswittmann/revolution that referenced this issue Sep 23, 2024
@jenswittmann @opengeek
A11y: add skiplinks and correct tabindex order modxcms#16612
6a583e1
opengeek added a commit that referenced this issue Sep 23, 2024
@jenswittmann @opengeek
Keyboard accessibility improvements (#16613)
b207371 
### What does it do?
Make the MODX manager interface more accessible when using the keyboard

### How to test
Minify CSS and compress JS via grunt first. Use the `Tab` key to
navigate through the Manager UI. Use the `Esc` key to close the
subnavigation. Use the tab key to navigate through the tabs.

### Related issue(s)/PR(s)
See #16612

---------

Co-authored-by: Jason Coward <[email protected]>
@rthrash
Copy link
Member

rthrash commented Mar 13, 2025 •
edited
Loading

@jenswittmann looks like this may have been addressed. Are there still outstanding items that should be handled still?

It looks like you closed #16614, perhaps those items?

@jenswittmann
Copy link
Contributor Author

@rthrash here are lots of other things to do in the future. Like screenreader annoucement, aria states, color contrast and so on. Maybe keep this as a parent issue to track the sub-issues (the new GitHub Feature)?

Here is a small issue by @Jako that needs to be resolved in the next release and could be tracked as a sub-issue with a separate PR? #16613 (comment)

There was also a conversation between myself and Henk Everts before the Snowup to get rid of the ExtJS side by side. So new features will be developed on VanillaJS and have a better accessibility than trying to change the old ExtJS. But this needs more discussion how to do it 🤔

@Jako
Copy link
Collaborator

Jako commented Apr 3, 2025

There are still some z-index issues left in 3.1.2. I.e. a switch is shown in front of the menu:

Image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
feature Request about implementing a brand new function or possibility.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@Jako @rthrash @jenswittmann