feat(checkbox): add WCAG AA recommended minimum 24px square hotspot optimized for touch users #7773
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
github-actions
bot
added
the
enhancement
eriklharper
added
the
pr ready for visual snapshots
driskull
requested changes
Sep 19, 2023
packages/calcite-components/src/components/checkbox/checkbox.scss
Outdated
Show resolved
Hide resolved
…i/calcite-design-system into eriklharper/6692-checkbox-responsive
jcfranco
approved these changes
Sep 19, 2023
eriklharper
added
pr ready for visual snapshots
eriklharper
added
pr ready for visual snapshots
github-actions
bot
added this to the 2023 September Priorities - Main release milestone
Merged
geospatialem
pushed a commit
that referenced
this pull request
Oct 3, 2023
🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-components: 1.9.0</summary> ## [1.9.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2023-10-03) ### Features * **action-group:** Add css custom properties to define gap and padding when layout is "grid" ([#7763](#7763)) ([b9bd0de](b9bd0de)) * **action-menu:** Add appearance property to configure trigger appearance ([#7867](#7867)) ([36ceaf1](36ceaf1)) * **alert:** Make component responsive ([#7755](#7755)) ([66222b5](66222b5)) * **block, input-time-picker, notice:** Adds `open`, `close`, `beforeOpen`, and `beforeClose` events for consistent event handling ([#7494](#7494)) ([04ce758](04ce758)) * **checkbox:** Add WCAG AA recommended minimum 24px square hotspot optimized for touch users ([#7773](#7773)) ([f13e2c4](f13e2c4)) * **flow, flow-item:** Allow calciteFlowItemBack event to be cancelled ([#7855](#7855)) ([b74b4df](b74b4df)) * **input-date-picker, input-time-picker:** Add status property ([#7915](#7915)) ([4d53346](4d53346)) * **input-time-zone:** Add max-items support ([#7705](#7705)) ([c698c27](c698c27)) * **input-time-zone:** Add time zone offset and name mode ([#7913](#7913)) ([80bd6ae](80bd6ae)) * **list:** Add newIndex and oldIndex event details to calciteListOrderChange event ([#7874](#7874)) ([0d5cc20](0d5cc20)) * **pagination:** Enable responsive layout ([#7722](#7722)) ([933a910](933a910)) * **panel, flow-item:** Add support for collapsing content ([#7857](#7857)) ([855754d](855754d)) ### Bug Fixes * **action-bar:** Improve overflowing horizontal actions. ([#7877](#7877)) ([52f2d2a](52f2d2a)) * **action-bar:** Overflow actions when overflowActionsDisabled is set to false ([#7873](#7873)) ([3dcceb0](3dcceb0)) * **action-menu:** Update active selection to not use the action's active property ([#7911](#7911)) ([50f85f1](50f85f1)) * **alert:** Regression fix to restore `calciteAlertBeforeOpen` and `calciteAlertOpen` event emitting ([#7767](#7767)) ([6bbae35](6bbae35)) * **button:** Provides context for AT users when used as reference element for collapsible content ([#7658](#7658)) ([50cb3a6](50cb3a6)) * **combobox:** Clears input value on blur ([#7721](#7721)) ([e04cc4e](e04cc4e)) * **combobox:** Fix filtering to avoid showing unrelated items ([#7704](#7704)) ([b6d32f3](b6d32f3)) * **dropdown-group:** Set selectionMode on slotted dropdown-item children ([#7897](#7897)) ([aa0731a](aa0731a)) * **dropdown:** Support dispatching enter key event on dropdown trigger ([#7752](#7752)) ([ba92463](ba92463)) * **select:** Allow setting an option value to an empty string ([#7769](#7769)) ([adca6ec](adca6ec)) * **stepper:** Improves AT Users experience with screen readers ([#7691](#7691)) ([071dec7](071dec7)) * **tab-nav:** Update indicator position when tab icon changes ([#7768](#7768)) ([cb877b3](cb877b3)) * **table:** Fix selection display in RTL ([#7907](#7907)) ([b4c8508](b4c8508)) * **tree:** Avoid modifying selected items for "none" selection-mode ([#7904](#7904)) ([0bd4a12](0bd4a12)) * **tree:** Fix tree keyboard selection issue ([#7908](#7908)) ([53d6c12](53d6c12)) * **tree:** Update tree selection per design spec ([#7852](#7852)) ([06b3594](06b3594)) </details> <details><summary>@esri/calcite-components-react: 1.9.0</summary> ## [1.9.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2023-10-03) ### Miscellaneous Chores * **@esri/calcite-components-react:** Synchronize undefined versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^1.9.0-next.18 to ^1.9.0 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
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.
Related Issue: #6692
Summary
This adds an invisible 24px hotspot for pointer and touch clicks around the checkbox for all scales. If the
--calcite-checkbox-sizecustom property is modified to be larger than 24px, this hotspot won't prevent the clickable area from expanding to the new size; it will just serve to enlarge the clickable area when the size is less than the WCAG AA recommended minimum size of 24px.