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

docs: fix and document use of keyboard focus classes on text fields #3354

Merged
merged 3 commits into from
Nov 11, 2024
Merged

docs: fix and document use of keyboard focus classes on text fields #3354

merged 3 commits into from
Nov 11, 2024

Conversation

jawinn
Copy link
Collaborator

@jawinn jawinn commented Oct 30, 2024 •
edited by pfulton
Loading

Description

Our Storybook was adding the is-keyboardFocused class on click, which isn't the intended design. Click focus and focused by use of a keyboard have different styles. This update stops the class from being applied on click, applies it on tab focus, and documents how the class should be added by the implementation.

How and where has this been tested?

Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.

Validation steps

  • Clicking in a text field or text area does not add the keyboard focused class (blue focus indicator does not appear)
  • How implementations should apply the is-keyboardFocused class is documented correctly on both the text field and text area Docs
  • Focus indicator appears when tabbing into a field on both the stories and Docs pages for textfield and textarea.

Regression testing

Validate:

  1. The documentation pages for at least two other components are still loading, including:
  • The pages render correctly, are accessible, and are responsive.
  1. If components have been modified, VRTs have been run on this branch:
  • VRTs have been run and looked at.
  • Any VRT changes have been accepted (by reviewer and/or PR author), or there are no changes.

Screenshots

New Docs story:
Screenshot 2024-10-30 at 1 54 13 PM

Design reference for styling differences between focus and focused by keyboard:
text-field-spec-1

To-do list

  • I have read the contribution guidelines.
  • I have updated relevant storybook stories and templates.
  • If my change impacts documentation, I have updated the documentation accordingly.
  • ✨ This pull request is ready to merge. ✨

@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Oct 30, 2024 •
edited
Loading

⚠️ No Changeset found

Latest commit: f759731

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@jawinn jawinn added documentation Because documentation is important and shouldn't be broken ready-for-review labels Oct 30, 2024
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Oct 30, 2024 •
edited
Loading

🚀 Deployed on https://pr-3354--spectrum-css.netlify.app

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Oct 30, 2024 •
edited
Loading

File metrics

Summary

Total size: 4.26 MB*

🎉 No changes detected in any packages

* Size determined by adding together the size of the main file for all packages in the library.
* Results are not gzipped or minified.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

@jawinn jawinn force-pushed the jawinn/css-1041-text-field-keyboard-focus branch from 0599bcf to 34aac90 Compare October 30, 2024 21:35
@aramos-adobe
Copy link
Collaborator

@jawinn Overall, the PR looks great!

Out of curiosity, why isn't there a keydown function in the template to showcase isKeyboardFocused indicator when tab is pressed. In the documentation you mentioned if the tab key is pressed this class should be added. When I press tab is-focused gets added.

If it's up to SWC to handle this kind of functionality then showing the Docs example and clearly stating what class has to be added would be enough.

@jawinn jawinn force-pushed the jawinn/css-1041-text-field-keyboard-focus branch from 34aac90 to 7a068d6 Compare November 5, 2024 16:53
@jawinn
Copy link
Collaborator Author

jawinn commented Nov 5, 2024

@jawinn Overall, the PR looks great!

Out of curiosity, why isn't there a keydown function in the template to showcase isKeyboardFocused indicator when tab is pressed. In the documentation you mentioned if the tab key is pressed this class should be added. When I press tab is-focused gets added.

If it's up to SWC to handle this kind of functionality then showing the Docs example and clearly stating what class has to be added would be enough.

It's getting a little bit into implementation as it's a bit tricky to test for (keycode is not provided on the focus event), but I found what looks like an okay way to show this behavior. I've updated the PR and validation instructions.

@jawinn jawinn requested a review from aramos-adobe November 5, 2024 16:59
@pfulton pfulton added the run_vrt For use on PRs looking to kick off VRT label Nov 11, 2024
pfulton
pfulton approved these changes Nov 11, 2024
View reviewed changes
components/textfield/stories/template.js
`
}, context);

export const KeyboardFocusTemplate = (args, context) => Container({
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice!

@jawinn @pfulton
docs: fix and document use of keyboard focus classes on text fields
7d7ea6b 
Our Storybook was adding the keyboard focus class on click, which isn't
the intended design. Click focus and focused by use of a keyboard have
different styles. This update stops the class from being applied on
click, and documents how the class should be added by the
implementation.
@jawinn @pfulton
docs(textfield): add keyboard focused class on tab focus
a19a2b4 
Example functionality in our Storybook to add the keyboard focused class
to the text field when it was focused with the tab key, similar to what
is documented for implementations.
@jawinn @pfulton
docs(textfield): remove some unneeded keyboard focus examples
f759731 
Remove some examples of keyboard focus from docs stories, that are not
necessary to show now that keyboard focus has its own docs example.
@pfulton pfulton force-pushed the jawinn/css-1041-text-field-keyboard-focus branch from 7a068d6 to f759731 Compare November 11, 2024 18:30
@pfulton pfulton added skip_vrt Add to a PR to skip running VRT (but still pass the action) and removed run_vrt For use on PRs looking to kick off VRT labels Nov 11, 2024
@pfulton pfulton enabled auto-merge (squash) November 11, 2024 18:31
@pfulton pfulton merged commit 0f50c14 into main Nov 11, 2024
17 of 34 checks passed
@pfulton pfulton deleted the jawinn/css-1041-text-field-keyboard-focus branch November 11, 2024 18:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@aramos-adobe aramos-adobe aramos-adobe approved these changes

@pfulton pfulton pfulton approved these changes

Assignees
No one assigned
Labels
documentation Because documentation is important and shouldn't be broken ready-for-review skip_vrt Add to a PR to skip running VRT (but still pass the action)
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@jawinn @aramos-adobe @pfulton