search

pods-framework / pods

The Pods Framework is a Content Development Framework for WordPress - It lets you create and extend content types that can be used for any project. Add fields of various types we've built in, or add your own with custom inputs, you have total control.
https://pods.io/
GNU General Public License v2.0
1.06k stars 264 forks source link

Improve tab support on Pods field-list-item #7196

Closed heybran closed 3 months ago

heybran commented 9 months ago

Problem to Solve

1. pods-field_name does not have tab focus indicator/outline.

The compan_name here is currently being focused by Tab, but we're using a div as a button, it loses the default browser outline so users have no ideas where they're currently focused on.

https://github.com/pods-framework/pods/blob/main/ui/js/dfv/src/admin/edit-pod/main-tabs/field-list-item.js#L247

                <div
                    tabIndex={ 0 }
                    role="button"
                    className="pods-field pods-field_name"
                    onClick={ onEditFieldClick }
                    onKeyPress={ handleKeyPress }
                >
                    { name }
                </div>
Screenshot 2023-10-03 at 11 25 31

2. Edit/Duplicate/Delete buttons

Similar to first issue, these buttons should be visible when they're tabbed into, on the screenshot they're visible as I'm currently hovering on the field wrapper with my mouse.

Screenshot 2023-10-03 at 11 32 47

Proposed Solution

  1. Replace div with button but style it as text button or add focus outline to div[tabindex="0"]

  2. Add a focus:within to pods-field_outer-wrapper to show Edit/Duplicate/Delete buttons.

Possible Workaround

No response

Examples Elsewhere

No response

Screenshots / Screencast

No response

heybran commented 9 months ago

After fixes, all buttons are focus visible to users as they navigate with keyboards . Will play with UI a bit more and see if there are more areas that need improvement.

https://github.com/pods-framework/pods/assets/75633537/f5eca59f-6792-4833-8dbe-3ca62b6c0784

heybran commented 9 months ago

Sorry, just noticed my commit ended with a huge git diff on this file ui/js/dfv/src/admin/edit-pod/main-tabs/field-list-item.js https://github.com/heybran/pods/commit/b18c5b81e028cf95aba226c1306c30aaf000500a, it was caused by my VS Code indent setting.

Please see this comment https://github.com/heybran/pods/commit/b18c5b81e028cf95aba226c1306c30aaf000500a#r128990258

heybran commented 3 months ago

Hi @sc0ttkclark, I think I can close this issue as PR for this one has been merged and released.