ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(button): increase click area to meet WCAG success criteria

Browse source
This commit is contained in:
gvangeest 2021-12-15 11:10:45 +01:00
parent 1340c1bd61
commit be84466311
3 changed files with 10 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/lemon-ravens-mate.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/button': patch
---
Increase minimum click area to meet WCAG Success Criterion 2.5.5 Target Size (Enhanced)

2
docs/components/interaction/button/features.md
View file

@ -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 {

7
packages/button/src/LionButton.js
View file

@ -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%;
}