Skip to main content

Search and Top Navigation

#10573 closed bug (fixed)

Opened August 29, 2014 04:52PM UTC

Closed January 16, 2015 01:59PM UTC

Last modified January 16, 2015 02:05PM UTC

Disabled elements show focus style on click

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

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.

Attachments (0)
Change History (3)

Changed October 07, 2014 11:14AM UTC by jzaefferer comment:1

status: newopen

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

Changed January 16, 2015 01:59PM UTC by Alexander Schmitz comment:2

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

Changed January 16, 2015 02:05PM UTC by scottgonzalez comment:3

milestone: none1.12.0