Skip to content
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

fix: Improving form widget keyboard accessibility #18991

Merged
merged 23 commits into from
Dec 30, 2022
Merged

fix: Improving form widget keyboard accessibility #18991

merged 23 commits into from
Dec 30, 2022

Conversation

jsartisan
Copy link
Contributor

@jsartisan jsartisan commented Dec 16, 2022 •
edited
Loading

This PR allows tabbing between widgets according to their position.
Also, it allows trapping focus in the modal widget

Screen.Recording.2022-12-22.at.4.02.56.PM.mov

Fixes #7757

Type of change

  • Enhancement

How Has This Been Tested?

  • Manually

@vercel
Copy link

vercel bot commented Dec 16, 2022 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
appsmith ✅ Ready (Inspect) Visit Preview Dec 28, 2022 at 6:37AM (UTC)

@github-actions github-actions bot added the Bug Something isn't working label Dec 16, 2022
@github-actions github-actions bot added Widgets Product This label groups issues related to widgets Enhancement New feature or request Form Widget High This issue blocks a user from building or impacts a lot of users Keyboard Shortcuts labels Dec 21, 2022
@laveena-en
Copy link
Contributor

@jsartisan Noticing some inconsistencies here:
https://ivp6ez0ljb.vmaker.com/record/NBKvsfEoEP4d4H5Z
In addition, there doesn't seem to be a focus state on Tabs widget as well

@laveena-en
Copy link
Contributor

laveena-en commented Dec 22, 2022 •
edited
Loading

@jsartisan Also, focus is seen on the widgets when they are set to visible: OFF in edit mode and for disabled widgets. https://ivp6ez0ljb.vmaker.com/record/mxq4U04O70GJe7yi

@laveena-en
Copy link
Contributor

Tested and verified the fixes, keyboard accessibility between widgets and wrapping within modals.

ashit-rath
ashit-rath reviewed Dec 28, 2022
View reviewed changes
app/client/src/components/designSystems/appsmith/PositionedContainer.tsx Outdated Show resolved Hide resolved
app/client/src/utils/hooks/useWidgetFocus/handleTab.ts Outdated Show resolved Hide resolved
app/client/src/utils/hooks/useWidgetFocus/handleTab.ts Outdated Show resolved Hide resolved
app/client/src/utils/hooks/useWidgetFocus/tabbable.ts Show resolved Hide resolved
app/client/src/utils/hooks/useWidgetFocus/tabbable.ts Outdated Show resolved Hide resolved
app/client/src/widgets/BaseWidget.tsx Outdated Show resolved Hide resolved
app/client/src/widgets/CheckboxGroupWidget/component/index.tsx Outdated Show resolved Hide resolved
app/client/src/widgets/CheckboxGroupWidget/component/index.tsx Show resolved Hide resolved
app/client/src/widgets/ContainerWidget/component/index.tsx Outdated Show resolved Hide resolved
app/client/src/widgets/ModalWidget/component/index.tsx Show resolved Hide resolved
@jsartisan
Copy link
Contributor Author

/ok-to-test sha=2c7b7d1

@github-actions
Copy link

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/3805296503.
Workflow: Appsmith External Integration Test Workflow.
Commit: 2c7b7d1.
PR: 18991.
Perf tests will be available at https://app.appsmith.com/app/performance-infra-dashboard/pr-details-638dd7cd2913ba43778b915e?pr=18991&runId=3805296503_1

@github-actions
Copy link

The following are new failures, please fix them before merging the PR cypress/integration/Smoke_TestSuite/ClientSideTests/IDE/Command_Click_Navigation_spec.js
cypress/integration/Smoke_TestSuite/ClientSideTests/Templates/Fork_Template_To_App_spec.js

@jsartisan jsartisan enabled auto-merge (squash) December 30, 2022 10:56
@github-actions github-actions bot added Enhancement New feature or request and removed Enhancement New feature or request labels Dec 30, 2022
@mohanarpit mohanarpit merged commit 57f2010 into release Dec 30, 2022
@mohanarpit mohanarpit deleted the fix/widget-focus branch December 30, 2022 14:52
@rahulramesha rahulramesha mentioned this pull request Jan 30, 2023
Closed
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ashit-rath ashit-rath ashit-rath approved these changes

Assignees
No one assigned
Labels
Bug Something isn't working Form Widget High This issue blocks a user from building or impacts a lot of users Keyboard Shortcuts Needs Design needs design or changes to design Needs PRD Issue which are awaiting PRD Widgets Product This label groups issues related to widgets
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Feature] Improving form widget keyboard accessibility
4 participants
@jsartisan @laveena-en @ashit-rath @mohanarpit