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

Increase clickable area for Block controls #4223

Closed
pento opened this issue Jan 2, 2018 · 10 comments
Closed

Increase clickable area for Block controls #4223

pento opened this issue Jan 2, 2018 · 10 comments
Assignees
@jasmussen
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). General Interface Parts of the UI which don't fall neatly under other labels. [Type] Enhancement A suggestion for improvement.

Comments

@pento
Copy link
Member

pento commented Jan 2, 2018

The block move and block ellipsis buttons both have 20x20 clickable areas - this feels a little easy to miss, particularly with the hover visual feedback being quite subtle.

For comparison, the similar buttons in Dropbox Paper have a 24x24 icon, with a 32x32 clickable area.

I suspect this will become more necessary when #3044 is implemented, as having UI that disappears if you twitch too much is wildly frustrating.

Also mentioned here: https://wordpress.org/support/topic/tested-for-a-couple-hours-today-feedback/
@pento pento added [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). General Interface Parts of the UI which don't fall neatly under other labels. Design [Type] Enhancement A suggestion for improvement. labels Jan 2, 2018
@afercia
Copy link
Contributor

afercia commented Jan 2, 2018

Worth mentioning the new WCAG 2.1 (going to happen soon) will require the target size to be at least 44 by 22 pixels for the AA level, with a few exceptions. See https://www.w3.org/TR/WCAG21/#target-size

@pento
Copy link
Member Author

pento commented Jan 3, 2018

I knew there was an accessibility issue, but I was looking through the WCAG 2.0 spec for it. Thanks for the link, @afercia. 🙂

@afercia
Copy link
Contributor

afercia commented Jan 3, 2018

Yeah 2.1 is not an official recommendation yet, it will be soon and at that point we should start addressing this issue also in core where all things need to be... bigger :)

@karmatosed
Copy link
Member

Can we see in a PR what 44 x 22 would be like? I'd agree we should go with that, depending on what it looks like.

@karmatosed karmatosed added Needs Design Needs design efforts. and removed Design labels Jan 3, 2018
@aduth aduth self-assigned this Jan 10, 2018
@aduth
Copy link
Member

aduth commented Jan 10, 2018

Initial tinkering in developer tools to show general appearance of 44x22:

image

(Full Screenshot)

image

(In latter case, we could still allow clickable area at those dimensions but reduce focus effect styling)

@afercia
Copy link
Contributor

afercia commented Feb 11, 2018

Update: the target size requirement has been moved to level AAA in the Candidate Recommendation of WCAG 2.1. Some background here: http://www.incobs.de/articles/items/target-size-fate.html

@aduth aduth removed their assignment Mar 3, 2018
@jasmussen jasmussen self-assigned this Mar 6, 2018
@jasmussen
Copy link
Contributor

I can fix this, I need to address this as part of #5400 anyway.

@jasmussen jasmussen mentioned this issue Mar 16, 2018
Merged
@ZebulanStanphill ZebulanStanphill mentioned this issue Mar 29, 2018
Closed
jasmussen pushed a commit that referenced this issue Apr 6, 2018
Polish side UI, make arrows bigger.
2c5b301 
This is initial work to improve the side UI. It fixes #5400 and #4223 by making the arrows visually bigger. It also simplifies the hover styles and improves mobile in the process.
@karmatosed
Copy link
Member

@jasmussen as this is being done as part of another issue should we close this one and wrap them into one?

@jasmussen
Copy link
Contributor

Yes, all issues mentioned in this one will be fixed when #5400 is fixed, or vice versa. I'll close one of them. But the PR to address both is almost ready to go.

@jasmussen jasmussen mentioned this issue Apr 11, 2018
Closed
jasmussen pushed a commit that referenced this issue Apr 12, 2018
Polish side UI, make arrows bigger.
7d30510 
This is initial work to improve the side UI. It fixes #5400 and #4223 by making the arrows visually bigger. It also simplifies the hover styles and improves mobile in the process.
@jasmussen jasmussen mentioned this issue Apr 12, 2018
Merged
jasmussen pushed a commit that referenced this issue Apr 13, 2018
Polish side UI, make arrows bigger.
33be101 
This is initial work to improve the side UI. It fixes #5400 and #4223 by making the arrows visually bigger. It also simplifies the hover styles and improves mobile in the process.
gziolo pushed a commit that referenced this issue Apr 13, 2018
@gziolo
Polish side UI, make arrows bigger.
954a6c6 
This is initial work to improve the side UI. It fixes #5400 and #4223 by making the arrows visually bigger. It also simplifies the hover styles and improves mobile in the process.
@karmatosed karmatosed removed the Needs Design Needs design efforts. label Apr 17, 2018
jasmussen added a commit that referenced this issue Apr 18, 2018
@jasmussen
Refine side UI (#6141)
e50e200 
* Polish side UI, make arrows bigger.

This is initial work to improve the side UI. It fixes #5400 and #4223 by making the arrows visually bigger. It also simplifies the hover styles and improves mobile in the process.

* Refine mobile block UI, and responsive hover labels.

* Add trash button to right side UI.

More to come.

* Enhance situation in wide blocks.

* Remove role from Remove button, and remove Trash from menu.

* Editor: Fix Eslint issues in BlockSettingsMenu

* Refine collapsing margins hack, fix flickering.

* Add some clearance between side UI and block.

* Fix z-index issue.

* Fix block settings dropdown menu
nuzzio pushed a commit to nuzzio/gutenberg that referenced this issue Apr 25, 2018
@jasmussen @nuzzio
Refine side UI (WordPress#6141)
07f6505 
* Polish side UI, make arrows bigger.

This is initial work to improve the side UI. It fixes WordPress#5400 and WordPress#4223 by making the arrows visually bigger. It also simplifies the hover styles and improves mobile in the process.

* Refine mobile block UI, and responsive hover labels.

* Add trash button to right side UI.

More to come.

* Enhance situation in wide blocks.

* Remove role from Remove button, and remove Trash from menu.

* Editor: Fix Eslint issues in BlockSettingsMenu

* Refine collapsing margins hack, fix flickering.

* Add some clearance between side UI and block.

* Fix z-index issue.

* Fix block settings dropdown menu
@karmatosed
Copy link
Member

Unless I am mistaken this should be closed now? If not we can always reopen.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jasmussen jasmussen

Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). General Interface Parts of the UI which don't fall neatly under other labels. [Type] Enhancement A suggestion for improvement.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@karmatosed @pento @jasmussen @afercia @aduth