Skip to content

fix(tabs): various fixes and improvements (Fixes: #2327, #2148. Closes: #2403, #2180) #2442

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.

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

Merged
merged 83 commits into from
Jan 13, 2019

Conversation

tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Jan 11, 2019

Description of Pull Request:

  • Probes this.$slots.default to determine render order of child tab components (as this.$children doesn't guarantee node order)
  • Add lazy prop to b-tab, to allow individual tabs to be lazy rendered (b-tabs lazy prop takes precedence if true). a lazy tab will not render its default slot when not active but the b-tab wrapper elements will always be rendered to allow for transitions to work correctly.
  • Better reactivity of tab title slot
  • Better reactivity of tab title prop
  • Switches to provide and inject, rather than using this.$parent for parent-child communication.
  • Add activate() public method to b-tab component (if tab isn't disabled, it will set this tab as active)
  • Add deactivate() public method to b-tab component (deactivating will activate the first non-disabled tab)
  • handles b-tab being dynamically disabled after mount
  • Switch to roving tabindex method for keynav
  • Better ARIA compliance when keynav enabled, by adding tabindex="0" to the active tab so that screen reader users can focus the actively disaplayed tab so that it can be read by screen readers.
  • Additional units tests

Fixes: #2327
Fixes: #2148
Closes: #2403
Closes: #2180

Users (web authors) must also realize that tabs' controls are (or act like) buttons. One cannot place form controls inside a button/link per HTML/HTML5 standards. Stop trying to do this! 😝

PR checklist:

What kind of change does this PR introduce? (check at least one)

  • Bugfix
  • Feature
  • Enhancement to an existing feature
  • ARIA accessibility
  • Documentation update
  • Other, please describe:

Does this PR introduce a breaking change? (check one)

  • Yes
  • No

If yes, please describe the impact:

The PR fulfills these requirements:

  • It's submitted to the dev branch, not the master branch
  • When resolving a specific issue, it's referenced in the PR's title (i.e. fixes #xxxx[,#xxxx], where "xxxx" is the issue number)
  • The PR should address only one issue or feature. If adding multiple features or fixing a bug and adding a new feature, break them into separate PRs if at all possible.
  • PR titles should following the Conventional Commits naming convention (i.e. "fix(alert): not alerting during SSR render", "docs(badge): Updated pill examples, fix typos", "chore: fix typo in docs", etc). This is very important, as the CHANGELOG is generated from these messages.

If new features/enhancement/fixes are added or changed:

  • Includes documentation updates (including updating the component's package.json for slot and event changes)
  • New/updated tests are included and passing (if required)
  • Existing test suites are passing
  • The changes have not impacted the functionality of other components or directives
  • ARIA Accessibility has been taken into consideration (does it affect screen reader users or keyboard only users? clickable items should be in the tab index, etc)

If adding a new feature, or changing the functionality of an existing feature, the PR's description above includes:

  • A convincing reason for adding this feature (to avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it)

@codecov
Copy link

codecov bot commented Jan 11, 2019

Codecov Report

Merging #2442 into dev will decrease coverage by 0.65%.
The diff coverage is 48%.

Impacted file tree graph

@@            Coverage Diff             @@
##              dev    #2442      +/-   ##
==========================================
- Coverage   72.19%   71.54%   -0.66%     
==========================================
  Files         170      170              
  Lines        3165     3212      +47     
  Branches      893      912      +19     
==========================================
+ Hits         2285     2298      +13     
- Misses        641      662      +21     
- Partials      239      252      +13
Impacted Files Coverage Δ
src/components/tabs/tabs.js 46.28% <40.59%> (-14.59%) ⬇️
src/components/tabs/tab.js 80.64% <79.16%> (-11.67%) ⬇️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 8acda11...1cd3f69. Read the comment docs.

@tmorehouse tmorehouse changed the title fix(tabs): Add order prop to b-tab to allow for consistant ordering fix(tabs): ensure consistent ordering of dynamic child tab components Jan 11, 2019
@tmorehouse tmorehouse changed the title fix(tabs): ensure consistent ordering of dynamic child tab components fix(tabs): various fixes and improvements Jan 12, 2019
@tmorehouse tmorehouse merged commit de11a8f into dev Jan 13, 2019
@tmorehouse tmorehouse deleted the tmorehouse/tabs branch January 13, 2019 09:17
tmorehouse added a commit that referenced this pull request Jan 13, 2019
Fixes an issue introduced by PR #2442 where the classes were not being applied to the correct items.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants