APP-3464 Add '...-focus-visible' class when focus was obtained by keyboard navigation #103
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…e' classes when focus was obtained by keyboard navigation
AliciaSymphony
approved these changes
Jan 5, 2021
| const keyUpHandler = (event) => { | ||
| if (isFocused && | ||
| // Tab and Shift+Tab navigation | ||
| ((event.code === 'Tab' || event.keyCode == 9) || |
There was a problem hiding this comment.
I think we have a keyboard utils in the project, it's better than writing hardcoded strings and numbers :)
There was a problem hiding this comment.
Good remarks. I did the changes
symphony-adnane
approved these changes
Jan 6, 2021
symphony-jean-michael
referenced
this pull request
in symphony-jean-michael/symphony-bdk-ui-toolkit-components
Nov 4, 2021
symphony-jean-michael
added a commit
that referenced
this pull request
Jan 7, 2022
* APP-3873 Replace utility classes margin/padding to use rem unit * APP-3873 Update readme * APP-3873 Replaced toEm() by toRem() * APP-3873 Remove scaling component * APP-3873 Added scaling component * APP-4073 PR review * APP-4073 Add unit * [skip ci] AUTO Bump version * APP-3937 feat(dropdown): create nested mode (#90) * APP-3931 - styles(dropdown): move from em to rem (#91) * [skip ci] AUTO Bump version * APP-3965 Add border on close icon when focus * APP-3872 Added styles to loading dropdown * APP-4161 - doc(avatar): update avatar examples (#95) * Add announce icon * [skip ci] AUTO Bump version * APP-4150 Add !important to spacing utilty classes * Toast left and right icon should have their own space (#97) * APP-4150 Add optional important to mixims * [skip ci] AUTO Bump version * APP-3149 Add CodeSandbox (#99) * APP-3149 Add CodeSandbox * APP-3149 Rename CodeSandbox project * APP-3149 Add Sanbox section * APP-4129 Align Typography variants * APP-4129 Add text ellipsis utility class * [skip ci] AUTO Bump version * Update getting-started.md * Add flame icon (#100) * APP-4167 - Add content type header (#101) * APP-4176 Update color palette * APP-4176 New color palette * [skip ci] AUTO Bump version * APP-4176 Update colors (#104) * APP-4244 - Export var and create utils class (#103) * APP-4195 Fix min and max heights of the Modal * APP-4195 Margin with container * APP-4195 Add comment about vendor prefix * APP-4169 Added new icons * APP-4195 Align style with mockups * [skip ci] AUTO Bump version * APP-4195 Remove min-heigh from body because the footer elements are displayed outside the dialog * [skip ci] AUTO Bump version * Fix overridable vars (#108) * Fix overridable vars * refactor paths * EIS-3348: Add Banner style (#107) - create banner scss files (component, mixins) - create new banner variables - add a sample banner story * APP-4202 Add a License * [skip ci] AUTO Bump version * feat: badge * APP-3587 Added min width/heigh to avatar (#110) * APP-3587 Added min width/heigh to avatar * APP-3587 add with and height * fix: code review * APP-4289 Fix typorgraphy * APP-4289 Use math function to division * APP_4289 Add division slash * APP-4316 Add nvmrc config file * APP-4316 Fix checkbox icon for 'mixed' state * [skip ci] AUTO Bump version * EIS-3537 - fix Badge default color * APP-4346 - fix(Avatar): Rename badge class (#117) * RTC-10806 - Smaller UI improvements on the Dropdown/Select component (#115) * Smaller ux improvements * Fixing color * Return fonts * [skip ci] AUTO Bump version * APP-4338: Update `TextArea` minimum height when `rows` attribute is provided The HTML `rows` attribute defines the number of initial lines to display in the HTML `textarea`. When given, it enters in conflict with the `min-height` of the `TextArea`. Today, the `min-height` is set to `110px` (~5 lines), so when the given `rows` is greater or equal to `5`, it works, but not when it's lower than `5` (because the textarea will have a minimum of 5 lines). The solution here is to set the `min-height` only when the `rows` is not given. * Update CODEOWNERS * APP-3334 - Adding text-ellipsis (#120) * Adding text-ellipsis * Update storybook * Text-ellipsis * Cleanup * text-ellipsiss * feat: badge sizes (#119) * feat: badge sizes * add all combination * [skip ci] AUTO Bump version * Fixing tk-text-ellipsis component (#121) * [skip ci] AUTO Bump version * Fixing continuous strings for text-ellipsis * APP-4343 Added styles to close-icon * APP-4343 Include mixin to dropdown * APP-4343 Added border to focus * Updated default for Text Ellipsis (#123) * Adding explanation for Text Ellipsis * Removed obsolete class * Adding default to text-ellipsis * Remove text * APP-4343 Update focus styles (#126) * APP-4343 include mixin * APP-4343 Update outline * Revert "APP-4343 Update focus styles (#126)" (#127) This reverts commit a63dc9d. * [skip ci] AUTO Bump version * APP-4343 Update outline (#128) * APP-4343 include mixin * APP-4343 Update outline * APP-4343 remove flex Co-authored-by: Anna Llorens <[email protected]> * [skip ci] AUTO Bump version * APP-4464 Remove the border, because Mana defines a 4px transparant border that reduces the width of our scrollbar. * [skip ci] AUTO Bump version * feat: drawer feat: drawer feat: drawer * Added wrapper styling to tooltip (#132) * fix: code review * APP-4270 Block fill-rule="evenodd" on svg files (#135) * APP-4270 Update font-icon library * APP-4270 Remove evenod rule * APP-4270 Block source icons with evenodd prop * APP-4270 Updated error msg * fix: code review * fix: code review * APP-4455 Format file * APP-4455 Added new btn variants * APP-4455 Icon sizes * APP-4455 Handle dark mode * APP-4455 Added stories * APP-4455 Code refactor * APP-4455 PR review * APP-4455 Pr review * APP-4455 Fixed typo * APP-4455 Fix spacing * APP-4455 Update margin * APP-4455 Button paddings * APP-4455 Fix pr * APP-4331 - Visual Testing (#136) * test * Test * Test * APP-4331 - Visual Testing * APP-4331 - Visual Testing * APP-4331 - Visual Testing * APP-4331 - Visual Testing * APP-4331 - Visual Testing * APP-4331 - Visual Testing * APP-4331 - Visual Testing * APP-4331 - Skiping stories * APP-4331 - Visual testing documentation * Update README.md Co-authored-by: Adnane Tellou <[email protected]> * Update README.md Co-authored-by: Adnane Tellou <[email protected]> * APP-4331 - Remove stories.json Co-authored-by: Adnane Tellou <[email protected]> * APP-4455 Update naming * APP-4455 Remove important * APP-4270 Update source icons (#138) * APP-4270 Update source icons * APP-4270 Update source icon * Improvements to text-ellipsis styles * update media icons * updated icons to be 16x16 * APP-4546 Bug fixing * APP-4546 Removed fixed width for loading * APP-4546 Rename button * APP-4546 Update loading styles * APP-4528 Added focus style to btn component * APP-4528 Update storybook * APP-4496 Add fantasticon to generate the tk-font * APP-4496 Use fantasticon lib to generate TK-Font * APP-4496 Update HBS template to be used by new fantasticon lib * APP-4496 Fix Stories template * APP-4496 Use async/await * APP-4496 Fix codepoint * APP-4496 Support icon aliases * APP-4496 Update doc * APP-4496 Add codepoints * APP-4496 Rename community in person-community and use alias to support old name * APP-4496 Rename 'following' in 'person-dot' and use alias to support 'following' * APP-4496 Remove deprecated "icon-font-generator" package * APP-4496 Revert change * APP-4496 Fix comment * APP-4546 Refact with mixin * APP-4496 Add Husky and Pre-commit Hook * APP-4546 Bug fixes * APP-4255 - Post an automatic message when uitoolkit-styles is being published (#146) * Timeline style (#133) * [skip ci] AUTO Bump version * APP-4255 Move webhook url to secret (#148) * Adding grid icon * APP-4599 Fallback padding to former button medium size * APP-4599 Added missing line heigh medium button * [skip ci] AUTO Bump version * APP-4552 Update CSS selector when using a React Portal * [skip ci] AUTO Bump version * APP-4567 / APP-4568: Align checkbox and radio styles with SDS - defines the SASS and CSS color variables for the checkbox and radio components - makes `checkbox_radio_common` mixin use these variables - adds hover and error styles - align `Switch` color variables with SDS - updates radio, checkbox and switch stories according to the component change (see other PR) * APP-4569 - tk-divider style * APP-4625 post a webhook message only if it is an official release (#153) * [skip ci] AUTO Bump version * APP-4624 - styles for background colors defined two variables: tk-bg-color--base and tk-bg-color--reverse * APP-4534 fix the dialog visual testing execution (#156) * APP-4574 Duplicated extend * APP-4574 Replace @extend rule * APP-4574 Merge fix * APP-4364 PR review * APP-4649 icon use the inherited color * APP-4649 Use scss variables * APP-4574 PR review * APP-4649 Fix button loading selector * Revert "APP-4625 post a webhook message only if it is an official release (#153)" This reverts commit 8694210. * [skip ci] AUTO Bump version * Add addon-themes for condensed more * Add addon-themes for condensed mode * EIS-3927 - divider style fix (#168) * APP-4600 Apply color to hint description (#174) * [skip ci] AUTO Bump version * APP-4695 Fix padding dropdown menu * [skip ci] AUTO Bump version * [skip ci] AUTO Bump version * APP-4692 fix: Hover btn tertiary text updated * APP-4692 update btn variant colors * APP-4692 Update variable name * [skip ci] AUTO Bump version * APP-4662 Remove Tempo-UI files from UI-Toolkit (#182) * Replace NPM commands by Yarn * Fix yarn version command * APP-4492 Generate ts fontAssetType for icons * Update contributing.md * APP-4692 Export readme to storybook * APP-4692 Added icon types * APP-4692 Updated Icon type name * APP-4692 Updated Icon type name * APP-4647 Added aliases to Icon types * [skip ci] AUTO Bump version * APP-4647 Removed tk-icons.ts from src (#188) * APP-4647 Removed tk-icons.ts from src * APP-4647 Update readme * SDS-INPUT-GROUP (#178) * APP-4519 - Text Field and Text Area migration to SDS (#154) * APP-4520 - Change Dropdown style to SDS (#176) * APP-4579 - Add Condensed styles for Button (#187) * APP-4729 APP-4707 APP-4586 APP-4414 - Time and Date Picker (field) to follow SDS, and fix button focus (#185) * APP-4414 - Add Condensed styles for TextField, TextArea, Dropdown, Time Picker, Date Picker Co-authored-by: Anna Llorens <[email protected]> * [skip ci] AUTO Bump version * APP-4414 - SDS-INPUT-GROUP handle .tk-escape-condensed class + doc improvement (#189) * Upgrade StoryBook v6.4.9 * APP-4626 - Update presence icons to match standard size (#191) * [skip ci] AUTO Bump version * Revert "Upgrade StoryBook from 6.3.5 to v6.4.9" * APP-4758 Add Browser support section (#192) I'm merging this PR because we discussed and agreed to merge it. * APP-4770 APP-4771 APP-4773 fix styles related to Textfield / Dropdown (#194) * [skip ci] AUTO Bump version * APP-4535 - Circle CI with Creevey (#196) * APP-4535 - Circle CI with Creevey * APP-4535 - Circle CI with Creevey * APP-4535 - Circle CI with Creevey * APP-4535 - Circle CI with Creevey * APP-4535 - Circle CI with Creevey * APP-4535 - Circle CI with Creevey * APP-4535 - Circle CI with Creevey * APP-4535 - Circle CI with Creevey * APP-4535 - Circle CI with Creevey * APP-4535 - Circle CI with Creevey * APP-4535 - Circle CI with Creevey * APP-4535 - Circle CI with Creevey * APP-4535 - Circle CI with Creevey * APP-4535 - Circle CI with Creevey * APP-4535 - Circle CI with Creevey * APP-4535 - Circle CI with Creevey * APP-4535 - Circle CI with Creevey * APP-4535 - Circle CI with Creevey * APP-4535 - Circle CI with Creevey * APP-4535 - Circle CI with Creevey - update new images * Update Readme with Visual Testing steps (#208) * APP-4745 Hide input helper when error message (#200) (#201) * APP-4745 Hide input helper when error message (#200) * APP-4745 Hide input helper when error * APP-4745 Added padding to small select * APP-4789 Add a template to UIToolkit styles pull request (#209) * APP-4789 Create pull_request_template.md * APP-4741 fix Arrow clickable (#207) * APP-4797 Fix dropdown padding (#217) * APP-4504 set max width for hint and tooltip (#216) * Fix drawer (#210) * APP-4787 Updated small input font-size (#218) * Update failing test images (#220) * [skip ci] AUTO Bump version * fix(textfield): revert * breaking change (#222) * Fixing wrong folder (#224) * APP-4807 Add missing list hover styles (#223) * APP-4807Add missing list hover styles * APP-4807 Update files * APP-4807Remove files * Move UI-Toolkit-Components in packages/components * Move UI-Toolkit-Styles in packages/styles * ♻ Cleaning and updating repo after migrating on monorepo * Update dependencies after migrating on monorepo Co-authored-by: Anna Llorens <[email protected]> Co-authored-by: Anna Llorens <[email protected]> Co-authored-by: symphony-adnane <[email protected]> Co-authored-by: Alicia Marin <[email protected]> Co-authored-by: Nolan Potier <[email protected]> Co-authored-by: Axel Eriksson <[email protected]> Co-authored-by: Adnane Tellou <[email protected]> Co-authored-by: Nolan Potier <[email protected]> Co-authored-by: antoinerollindev <[email protected]> Co-authored-by: Selena Mallet <[email protected]> Co-authored-by: Antoine Rollin <[email protected]> Co-authored-by: axeleriksson147 <[email protected]> Co-authored-by: StepankaBarotova <[email protected]> Co-authored-by: gabrielsetradantas <[email protected]> Co-authored-by: StepankaBarotova <[email protected]> Co-authored-by: swasunb <[email protected]> Co-authored-by: AliciaSymphony <[email protected]> Co-authored-by: Selena <[email protected]> Co-authored-by: Symphony-cyril <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Jira ticket
https://perzoinc.atlassian.net/browse/APP-3464
Fix:
Add 'tk-checkbox--focus-visible' and 'tk-radio--focus-visible' classes when focus was obtained by keyboard navigation.
Changes
The fix is inspired from the :focus-visible CSS pseudo-class (https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible).
Problem: We need to add an outline to the parent component when the child input has the focus. So, we would like to use something like a ":focus-visible-within" pseudo-selector.
But:
:focus-withinequivalent. WICG/focus-visible#151)So, I updated the code to add a class '...--focus-visible' on the parent component when the conditions are satisfied.
With the fix:
Checkbox
Radio
