Skip to content

feat(dropdown): use semantic <ul> and <li> markup (closes #3072) #3087

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

Conversation

jacobmllr95
Copy link
Member

Description of Pull Request:

Bootstrap V4 is moving back to recommending semantic markup for their dropdown menus.

Placing the dropdown items (and other sub-components) inside <li> elements, and setting the dropdown menu container to a <ul>

twbs/bootstrap#28591
twbs/bootstrap#25728

We should update these components to use the new recommended markup.

Closes #3072.

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 Apr 11, 2019

Codecov Report

Merging #3087 into dev will increase coverage by <.01%.
The diff coverage is 100%.

Impacted file tree graph

@@            Coverage Diff             @@
##              dev    #3087      +/-   ##
==========================================
+ Coverage   99.03%   99.03%   +<.01%     
==========================================
  Files         207      207              
  Lines        3743     3744       +1     
  Branches     1123     1123              
==========================================
+ Hits         3707     3708       +1     
  Misses         28       28              
  Partials        8        8
Impacted Files Coverage Δ
src/components/dropdown/dropdown.js 100% <ø> (ø) ⬆️
src/components/dropdown/dropdown-header.js 100% <100%> (ø) ⬆️
src/components/dropdown/dropdown-form.js 100% <100%> (ø) ⬆️
src/components/nav/nav-item-dropdown.js 100% <100%> (ø) ⬆️
src/components/dropdown/dropdown-item.js 100% <100%> (ø) ⬆️
src/components/dropdown/dropdown-item-button.js 100% <100%> (ø) ⬆️
src/components/dropdown/dropdown-text.js 100% <100%> (ø) ⬆️
src/components/dropdown/dropdown-divider.js 100% <100%> (ø) ⬆️
src/mixins/dropdown.js 100% <100%> (ø) ⬆️
src/utils/object.js 100% <100%> (ø) ⬆️

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 c53ffd4...f1535d5. Read the comment docs.

@tmorehouse
Copy link
Member

Strange.. the docs site preview isn't working right..

@tmorehouse
Copy link
Member

Ah... nav-item-dropdown needs to have its menu container updated to a UL as well.

Might also have to tweak scrollspy a bit as well too... maybe

@jacobmllr95 jacobmllr95 marked this pull request as ready for review April 12, 2019 07:20
@jacobmllr95 jacobmllr95 requested a review from tmorehouse April 12, 2019 07:20
@jacobmllr95
Copy link
Member Author

<b-nav-item-dropdown> is fixed now and the scrollspy directive works as is.

@jacobmllr95 jacobmllr95 merged commit 58ad66b into bootstrap-vue:dev Apr 12, 2019
@jacobmllr95 jacobmllr95 deleted the feat-dropdown-semantic-markup branch April 14, 2019 09:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Switch dropdowns to use semantic <ul> and <li> markup for accessibility
2 participants