[#36880] - [4.1] Modal Buttons :focus [a11y]
- Fixed in Code Base
- 31 Jan 2022
- Medium
- Build: 4.1-dev
- # 36880
- Diff
- brianteeman:modal_focus
User tests: Successful: Unsuccessful:
When you are navigating the admin using the keyboard all the buttons should indicate when they have focus. For toolbar buttons this has been done correctly and the display of the button changes exactly the same on focus and on hover. This is the bootstrap default behaviour.
Unfortunately the buttons in the modals do not use the bootstrap defaults (I don't know why) and there is no styling for on focus.
This PR resolves that so the buttons in modals are styled correctly on focus. Displaying a visual indicator of the current focus is a fundamental accessibility issue.
This PR changes the scss so to test either use a prebuilt package or make sure you remember to npm run build:css
Open any modal and using the keyboard tab key navigate to the buttons. Before the PR you don't have any indicator when you are on a button. After the PR the button is styled exactly the same as if you were hovering with your mouse.
Before - keyboard focus on close button
After - keyboard focus on close button
cc @chmst
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Category | ⇒ | Repository NPM Change |
| Labels |
Added:
NPM Resource Changed
?
|
||
I have tested this item
Tested on the 4.1dev branch. Same as @ChristineWk. No focus is visible on the close button.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/36880.
ok - will recheck - maybe something went wrong with the commit. thanks for testing so far.
Which modal were you checking? I just rechecked these two
I had menu - select menu item type. Firefox and edge.
Will re-test with categories.
I have tested this item
Works as described
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/36880.
I have tested this item
Test with prebuild package works as described
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/36880.
No clue why it does not work on my dev environment with npm. Will have ru rebuild my local repo.
| Status | Pending | ⇒ | Ready to Commit |
RTC
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/36880.
| Status | Ready to Commit | ⇒ | Fixed in Code Base |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2022-01-31 15:18:48 |
| Closed_By | ⇒ | bembelimen | |
| Labels |
Added:
?
a11y
|
||
Thx
Thank you - I hope the other RTC fixes will be merged as well.
Used Prebuilt Package (installed) https://ci.joomla.org/artifacts/joomla/joomla-cms/4.1-dev/36880/downloads/51222/pr_list.xml
but still actual result.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/36880.