Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

fix(tab): IE9 disabled attr renders grey text on enabled tab #2677

Closed
wants to merge 3 commits into from

Conversation

leonardseymore
Copy link

This issue can be seen on the boostrap UI page using IE9. The second tab looks disabled when it is really enabled:
http://angular-ui.github.io/bootstrap/#/tabs

  • IE9 renders elements with 'disabled' property with grey text
  • Tabs are rendered with grey text even if they are not disabled
  • By renaming attribute to 'disable' instead of 'disabled' tabs with dynamic 'disable' attribute still render correctly

- IE9 renders elements with 'disabled' property with grey text
- Tabs are rendered with grey text even if they are not disabled
- By renaming attribute to 'disable' instead of 'disabled' tabs with dynamic 'disable' attribute still render correctly
@tallsam
Copy link

tallsam commented Dec 4, 2014

This also fixes an accessibility issue in IE9 where you can't select a tab using the keyboard because disabled elements are excluded from tabIndex. +1

On the other hand it will break existing implementations.. :(

@leonardseymore
Copy link
Author

What about supporting both attributes and marking "disabled" in the APIs as deprecated?

@wesleycho
Copy link
Contributor

This would require a documentation update.

I think this would be a good breaking change, as using the disabled attribute by the directive currently is bad.

Can you add the documentation change required?

@wesleycho wesleycho added this to the 0.13.0 milestone Mar 23, 2015
@chrisirhc
Copy link
Contributor

@leonardseymore I like the idea of supporting both attributes (disable, disabled) and dropping the disabled attribute later on. I think this directive is probably used in many places.

We'll need to update the README of the tabs directive to include this information of deprecation.

@wesleycho
Copy link
Contributor

We are deprecating support for disabled then in the meantime? That sounds sensible to me in this case.

@chrisirhc
Copy link
Contributor

Yep that's right, we should deprecate the use of disabled. We can log a warning whenever disabled is used unless it's suppressed, similar to #3497 .

@leonardseymore
Copy link
Author

I have made some more changes based on the comments.

_(Defaults: false)_ :
Whether tab is clickable and can be activated.
Note that this deprecates the "disabled" attribute
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How about:

Note that this was previously the `disabled` attribute.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or

Note that this was previously the `disabled` attribute, which is now deprecated.

@chrisirhc
Copy link
Contributor

Looks mostly good to me. Maybe just documentation wording can be improved.

@wesleycho
Copy link
Contributor

We can probably merge this in and patch the documentation change we want - no need to hold this up longer I think.

@wesleycho wesleycho closed this in 4bfae22 Apr 7, 2015
@wesleycho
Copy link
Contributor

Thanks for this find and fix - it should go out when we release 0.13.0.

rpocklin added a commit to rpocklin/ui-router-tabs that referenced this pull request May 14, 2015
Includes important commit angular-ui/bootstrap@91b5fb6
which means it does not force selection of any tab by default.

Also changes 'disabled' property in tabs to 'disable' (to fix ie9 issues) - see angular-ui/bootstrap#2677
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants