Opened 3 years ago

Closed 3 years ago

Last modified 3 years ago

#10573 closed bug (fixed)

Disabled elements show focus style on click

Reported by: Alexander Schmitz Owned by:
Priority: minor Milestone: 1.12.0
Component: ui.css-framework Version: 1.11.1
Keywords: Cc:
Blocked by: Blocking:

Description

If you click on a disabled element that has a tabindex for example a disabled selectmenu which has tabindex=-1 on the button the focus outline still shows in chrome, safari, and firefox. Old IE and Opera both do not show focus style on click.

I think the fix is to add pointer-events:none to ui-state-disabled. This is supported and fixes the issue in all effected browsers.

The only question is if there is a case we still want to get events on a disabled element? If there is we will need to add it to each widgets disabled rule that would need it. Currently this would be... selectmenu, spinner, accordion, tabs, slider, datepicker, and menu I think.

If pointer-events does not work here we will have to consider removing the tabindex all together for disabled elements ( and likely all child elements which we have applied it to )

Current datepicker can still be tabbed through when inline and disabled but since we use anchors without a tabindex clicks don't show any style. In new calendar widget we add tabindex=-1 this causes the anchors to show focus style when clicked and the calendar is disabled. ( current version is missing application of ui-state-disabled and also is using .on instead of _on for hover effects so these styles need to be fixed too but this will not fix focus style on click of days ) However pointer-events: none; will fix this for child elements as well.

Change History (3)

comment:1 Changed 3 years ago by Jörn Zaefferer

Status: newopen

I see no reason why we would want events from disabled elements.

comment:2 Changed 3 years ago by Alexander Schmitz

Resolution: fixed
Status: openclosed

Theme: Disabled elements can still be focused with a click

pointer-events: none; fixes this in chrome, safari, and firefox. IE and opera both show no focus styles on click, so lack of pointer-events support in old ie is not a problem.

Fixes #10573 Closes gh-1330

Changeset: 7137c90b1883bc19f23678582170e9df981a084d

comment:3 Changed 3 years ago by Scott González

Milestone: none1.12.0
Note: See TracTickets for help on using tickets.