From be84466311b35fb8e0f2960eb04674bd99d435cb Mon Sep 17 00:00:00 2001
From: gvangeest <gerjan.van.geest@ing.com>
Date: Wed, 15 Dec 2021 11:10:45 +0100
Subject: [PATCH] fix(button): increase click area to meet WCAG success
 criteria

---
 .changeset/lemon-ravens-mate.md                | 5 +++++
 docs/components/interaction/button/features.md | 2 ++
 packages/button/src/LionButton.js              | 7 +++----
 3 files changed, 10 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/lemon-ravens-mate.md

diff --git a/.changeset/lemon-ravens-mate.md b/.changeset/lemon-ravens-mate.md
new file mode 100644
index 000000000..c80150425
--- /dev/null
+++ b/.changeset/lemon-ravens-mate.md
@@ -0,0 +1,5 @@
+---
+'@lion/button': patch
+---
+
+Increase minimum click area to meet WCAG Success Criterion 2.5.5 Target Size (Enhanced)
diff --git a/docs/components/interaction/button/features.md b/docs/components/interaction/button/features.md
index 5bd087105..2a4657cf5 100644
--- a/docs/components/interaction/button/features.md
+++ b/docs/components/interaction/button/features.md
@@ -23,6 +23,8 @@ export const disabled = () => html`<lion-button disabled>Disabled</lion-button>`
 
 ## Minimum click area
 
+The minimum click area needs to be at least `44px` by `44px` according to [WCAG Success Criterion 2.5.5 Target Size (Enhanced)](https://www.w3.org/TR/WCAG22/#target-size-enhanced).
+
 ```js preview-story
 export const minimumClickArea = () => html` <style>
     .small {
diff --git a/packages/button/src/LionButton.js b/packages/button/src/LionButton.js
index c17679bca..f0cc97b89 100644
--- a/packages/button/src/LionButton.js
+++ b/packages/button/src/LionButton.js
@@ -67,10 +67,9 @@ export class LionButton extends DisabledWithTabIndexMixin(LitElement) {
           left: 50%;
           transform: translate(-50%, -50%);
 
-          /* touch area (comes into play when button height goes below this one) */
-          /* src = https://www.smashingmagazine.com/2012/02/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/ */
-          min-height: 40px;
-          min-width: 40px;
+          /* Minimum click area to meet [WCAG Success Criterion 2.5.5 Target Size (Enhanced)](https://www.w3.org/TR/WCAG22/#target-size-enhanced) */
+          min-height: 44px;
+          min-width: 44px;
           width: 100%;
           height: 100%;
         }