🌐 AI搜索 & 代理 主页
Skip to content

Commit 97bb97b

Browse files
xanfxanf
committed
fix(nav-item-dropdown): update dropdown to set correct aria-controls
2 parents 49d8a9d + b8ce56a commit 97bb97b

File tree

12 files changed

+486
-312
lines changed

12 files changed

+486
-312
lines changed

‎.bundlewatch.config.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
},
4343
{
4444
"path": "./dist/bootstrap-vue.common.js",
45-
"maxSize": "355 kB"
45+
"maxSize": "360 kB"
4646
},
4747
{
4848
"path": "./dist/bootstrap-vue.common.min.js",

‎docs/common-props.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,12 @@
7474
"exactActiveClass": {
7575
"description": "<router-link> prop: Configure the active CSS class applied when the link is active with exact match. Typically you will want to set this to class name 'active'"
7676
},
77+
"exactPath": {
78+
"description": "<router-link> prop: Allows matching only using the path section of the url, effectively ignoring the query and the hash sections"
79+
},
80+
"exactPathActiveClass": {
81+
"description": "<router-link> prop: Configure the active CSS class applied when the link is active with exact path match. Typically you will want to set this to class name 'active'"
82+
},
7783
"fade": {
7884
"description": "When set to `true`, enables the fade animation/transition on the component"
7985
},

‎docs/markdown/reference/router-links/README.md‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -149,6 +149,34 @@ With components that support router links (have a `to` prop), you will want to s
149149
`'active'` (or a space separated string that includes `'active'`) to apply Bootstrap's active
150150
styling on the component when the current route matches the `to` prop.
151151

152+
### `exact-path`
153+
154+
- type: `boolean`
155+
- default: `false`
156+
- availability: Vue Router 3.5.0+
157+
158+
Allows matching only using the `path` section of the url, effectively ignoring the `query` and the
159+
`hash` sections.
160+
161+
```html
162+
<!-- this link will also be active at `/search?page=2` or `/search#filters` -->
163+
<router-link to="/search" exact-path> </router-link>
164+
```
165+
166+
### `exact-path-active-class`
167+
168+
- type: `string`
169+
- default: `'router-link-exact-path-active'`
170+
- availability: Vue Router 3.5.0+
171+
172+
Configure the active CSS class applied when the link is active with exact path match. Note the
173+
default value can also be configured globally via the `linkExactPathActiveClass` router constructor
174+
option.
175+
176+
With components that support router links (have a `to` prop), you will want to set this to the class
177+
`'active'` (or a space separated string that includes `'active'`) to apply Bootstrap's active
178+
styling on the component when the current route matches the `to` prop.
179+
152180
## Nuxt.js specific router link props
153181

154182
When BootstrapVue detects that your app is running under [Nuxt.js](https://nuxtjs.org), it will

‎package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -88,9 +88,9 @@
8888
},
8989
"devDependencies": {
9090
"@babel/cli": "^7.13.16",
91-
"@babel/core": "^7.14.0",
91+
"@babel/core": "^7.16.5",
9292
"@babel/plugin-transform-modules-commonjs": "^7.14.0",
93-
"@babel/plugin-transform-runtime": "^7.13.15",
93+
"@babel/plugin-transform-runtime": "^7.16.5",
9494
"@babel/preset-env": "^7.14.2",
9595
"@babel/standalone": "^7.14.1",
9696
"@nuxt/content": "^1.14.0",
@@ -116,7 +116,7 @@
116116
"eslint-config-prettier": "^8.3.0",
117117
"eslint-config-standard": "^16.0.2",
118118
"eslint-config-vue": "^2.0.2",
119-
"eslint-plugin-import": "^2.22.1",
119+
"eslint-plugin-import": "^2.25.3",
120120
"eslint-plugin-jest": "^24.3.6",
121121
"eslint-plugin-markdown": "^2.1.0",
122122
"eslint-plugin-node": "^11.1.0",
@@ -143,7 +143,7 @@
143143
"rollup-plugin-babel": "^4.4.0",
144144
"rollup-plugin-commonjs": "^10.1.0",
145145
"rollup-plugin-node-resolve": "^5.2.0",
146-
"sass": "^1.32.12",
146+
"sass": "^1.45.0",
147147
"sass-loader": "^10.1.1",
148148
"standard-version": "^9.3.0",
149149
"terser": "^5.7.0",

‎src/components/dropdown/README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -664,7 +664,8 @@ Providing a unique `id` prop ensures ARIA compliance by automatically adding the
664664
`aria-*` attributes in the rendered markup.
665665

666666
The default ARIA role is set to `menu`, but you can change this default to another role (such as
667-
`navigation`) via the `role` prop, depending on your user case.
667+
`navigation`) via the `role` prop, depending on your user case. The `role` prop value will be used
668+
to determine `aria-haspopup` attribute for the toggle button.
668669

669670
When a menu item doesn't trigger navigation, it is recommended to use the `<b-dropdown-item-button>`
670671
sub-component (which is not announced as a link) instead of `<b-dropdown-item>` (which is presented

‎src/components/dropdown/dropdown.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,7 @@ export const BDropdown = /*#__PURE__*/ Vue.extend({
140140
$buttonChildren = [h('span', { class: ['sr-only'] }, [this.toggleText])]
141141
buttonContentDomProps = {}
142142
}
143+
const ariaHasPopupRoles = ['menu', 'listbox', 'tree', 'grid', 'dialog']
143144

144145
const $toggle = h(
145146
BButton,
@@ -151,7 +152,7 @@ export const BDropdown = /*#__PURE__*/ Vue.extend({
151152
...this.toggleAttrs,
152153
// Must have attributes
153154
id: this.safeId('_BV_toggle_'),
154-
'aria-haspopup': 'true',
155+
'aria-haspopup': ariaHasPopupRoles.includes(role) ? role : 'false',
155156
'aria-expanded': toString(visible)
156157
},
157158
props: {

‎src/components/dropdown/dropdown.spec.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ describe('dropdown', () => {
6363
expect($button.classes()).toContain('dropdown-toggle')
6464
expect($button.classes().length).toBe(3)
6565
expect($button.attributes('aria-haspopup')).toBeDefined()
66-
expect($button.attributes('aria-haspopup')).toEqual('true')
66+
expect($button.attributes('aria-haspopup')).toEqual('menu')
6767
expect($button.attributes('aria-expanded')).toBeDefined()
6868
expect($button.attributes('aria-expanded')).toEqual('false')
6969
expect($button.attributes('id')).toBeDefined()
@@ -125,7 +125,7 @@ describe('dropdown', () => {
125125
expect($toggle.classes()).toContain('dropdown-toggle-split')
126126
expect($toggle.classes().length).toBe(4)
127127
expect($toggle.attributes('aria-haspopup')).toBeDefined()
128-
expect($toggle.attributes('aria-haspopup')).toEqual('true')
128+
expect($toggle.attributes('aria-haspopup')).toEqual('menu')
129129
expect($toggle.attributes('aria-expanded')).toBeDefined()
130130
expect($toggle.attributes('aria-expanded')).toEqual('false')
131131
expect($toggle.attributes('id')).toBeDefined()
@@ -551,7 +551,7 @@ describe('dropdown', () => {
551551
expect($dropdown.vm).toBeDefined()
552552

553553
expect($toggle.attributes('aria-haspopup')).toBeDefined()
554-
expect($toggle.attributes('aria-haspopup')).toEqual('true')
554+
expect($toggle.attributes('aria-haspopup')).toEqual('menu')
555555
expect($toggle.attributes('aria-expanded')).toBeDefined()
556556
expect($toggle.attributes('aria-expanded')).toEqual('false')
557557
expect($dropdown.classes()).not.toContain('show')
@@ -564,7 +564,7 @@ describe('dropdown', () => {
564564
await waitNT(wrapper.vm)
565565

566566
expect($toggle.attributes('aria-haspopup')).toBeDefined()
567-
expect($toggle.attributes('aria-haspopup')).toEqual('true')
567+
expect($toggle.attributes('aria-haspopup')).toEqual('menu')
568568
expect($toggle.attributes('aria-expanded')).toBeDefined()
569569
expect($toggle.attributes('aria-expanded')).toEqual('true')
570570
expect($dropdown.classes()).toContain('show')
@@ -754,7 +754,7 @@ describe('dropdown', () => {
754754
const $dropdown = wrapper.find('.dropdown')
755755

756756
expect($toggle.attributes('aria-haspopup')).toBeDefined()
757-
expect($toggle.attributes('aria-haspopup')).toEqual('true')
757+
expect($toggle.attributes('aria-haspopup')).toEqual('menu')
758758
expect($toggle.attributes('aria-expanded')).toBeDefined()
759759
expect($toggle.attributes('aria-expanded')).toEqual('false')
760760
expect($dropdown.classes()).not.toContain('show')
@@ -765,7 +765,7 @@ describe('dropdown', () => {
765765
expect(wrapper.emitted('show')).toBeDefined()
766766
expect(wrapper.emitted('show').length).toBe(1)
767767
expect($toggle.attributes('aria-haspopup')).toBeDefined()
768-
expect($toggle.attributes('aria-haspopup')).toEqual('true')
768+
expect($toggle.attributes('aria-haspopup')).toEqual('menu')
769769
expect($toggle.attributes('aria-expanded')).toBeDefined()
770770
expect($toggle.attributes('aria-expanded')).toEqual('false')
771771
expect($dropdown.classes()).not.toContain('show')
@@ -777,7 +777,7 @@ describe('dropdown', () => {
777777
expect(wrapper.emitted('show')).toBeDefined()
778778
expect(wrapper.emitted('show').length).toBe(2)
779779
expect($toggle.attributes('aria-haspopup')).toBeDefined()
780-
expect($toggle.attributes('aria-haspopup')).toEqual('true')
780+
expect($toggle.attributes('aria-haspopup')).toEqual('menu')
781781
expect($toggle.attributes('aria-expanded')).toBeDefined()
782782
expect($toggle.attributes('aria-expanded')).toEqual('true')
783783
expect($dropdown.classes()).toContain('show')

‎src/components/form-tags/_form-tags.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
.b-form-tags-list {
3030
margin-top: -0.25rem;
3131

32-
.b-from-tags-field,
32+
.b-form-tags-field,
3333
.b-form-tag {
3434
margin-top: 0.25rem;
3535
}

‎src/components/form-tags/form-tags.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -648,7 +648,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
648648
const $field = h(
649649
'li',
650650
{
651-
staticClass: 'b-from-tags-field flex-grow-1',
651+
staticClass: 'b-form-tags-field flex-grow-1',
652652
attrs: {
653653
role: 'none',
654654
'aria-live': 'off',

‎src/components/link/link.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,8 @@ export const routerLinkProps = {
3232
event: makeProp(PROP_TYPE_ARRAY_STRING),
3333
exact: makeProp(PROP_TYPE_BOOLEAN, false),
3434
exactActiveClass: makeProp(PROP_TYPE_STRING),
35+
exactPath: makeProp(PROP_TYPE_BOOLEAN, false),
36+
exactPathActiveClass: makeProp(PROP_TYPE_STRING),
3537
replace: makeProp(PROP_TYPE_BOOLEAN, false),
3638
routerTag: makeProp(PROP_TYPE_STRING),
3739
to: makeProp(PROP_TYPE_OBJECT_STRING)

0 commit comments

Comments
 (0)