bootstrap-vue-next · VividLemon · Apr 10, 2025 · Apr 5, 2025 · Apr 5, 2025 · Apr 5, 2025
diff --git a/apps/docs/src/data/components/table.data.ts b/apps/docs/src/data/components/table.data.ts
@@ -681,6 +681,10 @@ export default {
               type: 'ColorVariant | null',
               default: null,
             },
+            scope: {
+              type: 'string',
+              default: undefined,
+            },
           } satisfies Record<keyof BvnComponentProps['BTh'], PropertyReference>,
         },
         emits: [],

diff --git a/apps/docs/src/docs/components/table.md b/apps/docs/src/docs/components/table.md
@@ -122,6 +122,7 @@ The following field properties (defined as [TableField](/docs/types#tableitem))
 | `thAttr`            | `AttrsValue \| ((value: unknown, key: string, item: T \| null, type: TableRowThead) => AttrsValue` | Object representing additional attributes to apply to the field's `<thead>`/`<tfoot>` heading `<th>` cell. If the field's `isRowHeader` is set to `true`, the attributes will also apply to the `<tbody>` field `<th>` cell. If custom attributes per cell are required, a callback function can be specified instead. See the typescript definition for accepted parameters and return types. |
 | `isRowHeader`       | `boolean`                                                                                          | When set to `true`, the field's item data cell will be rendered with `<th>` rather than the default of `<td>`.                                                                                                                                                                                                                                                                                 |
 | `stickyColumn`      | `boolean`                                                                                          | When set to `true`, and the table in [responsive](#responsive-tables) mode or has [sticky headers](#sticky-headers), will cause the column to become fixed to the left when the table's horizontal scrollbar is scrolled. See [Sticky columns](#sticky-columns) for more details                                                                                                               |
+| `scope`             | `TableThScope`                                                                                     | The scope attribute for the field's `<th>` element. This is used to specify the relationship of the header cell to the data cells. Valid values are `row`, `col`, `rowgroup`, and `colgroup`. Defaults to `colgroup` if `colspan` specified, `rowgroup` if `rowspan` specified, otherwise `col`.                                                                                               |
 
 **Notes:**
 

diff --git a/packages/bootstrap-vue-next/src/components/BPagination/BPagination.vue b/packages/bootstrap-vue-next/src/components/BPagination/BPagination.vue
@@ -147,7 +147,6 @@ const getBaseButtonProps = ({
   label,
   position,
   isActive,
-  role,
   hidden,
   isSmHidden,
 }: {
@@ -160,7 +159,6 @@ const getBaseButtonProps = ({
   label?: string
   position?: number
   isActive?: boolean
-  role?: string
   hidden?: boolean
   isSmHidden?: boolean
 }) => ({
@@ -176,7 +174,7 @@ const getBaseButtonProps = ({
       },
       classVal,
     ],
-    role,
+    'role': 'presentation',
     'aria-hidden': hidden,
   },
   button: {

diff --git a/packages/bootstrap-vue-next/src/components/BPagination/pagination.spec.ts b/packages/bootstrap-vue-next/src/components/BPagination/pagination.spec.ts
@@ -89,6 +89,12 @@ describe('pagination', () => {
     expect($li.classes()).toContain('page-item')
   })
 
+  it('li child has static role', () => {
+    const wrapper = mount(BPagination)
+    const $li = wrapper.get('li')
+    expect($li.attributes('role')).toBe('presentation')
+  })
+
   it('has first button by default', () => {
     const wrapper = mount(BPagination, {props: {totalRows: 100, perPage: 1, modelValue: 5}})
     expect(wrapper.find('[aria-label="Go to first page"]').exists()).toBeTruthy()

diff --git a/packages/bootstrap-vue-next/src/components/BTable/BTableLite.vue b/packages/bootstrap-vue-next/src/components/BTable/BTableLite.vue
@@ -6,7 +6,7 @@
         <BTh
           v-for="field in computedFields"
           :key="field.key"
-          scope="col"
+          :scope="field.scope"
           :class="getFieldColumnClasses(field)"
           :title="field.headerTitle"
           :variant="field.variant"

diff --git a/packages/bootstrap-vue-next/src/components/BTable/BTd.vue b/packages/bootstrap-vue-next/src/components/BTable/BTd.vue
@@ -1,6 +1,5 @@
 <template>
   <td
-    :scope="scope"
     :class="computedClasses"
     :colspan="props.colspan"
     :rowspan="props.rowspan"
@@ -37,6 +36,4 @@ const computedClasses = computed(() => ({
   'b-table-sticky-column': props.stickyColumn,
   'table-b-table-default': props.stickyColumn && props.variant === null,
 }))
-
-const scope = computed(() => (props.colspan ? 'colspan' : props.rowspan ? 'rowspan' : 'col'))
 </script>
diff --git a/packages/bootstrap-vue-next/src/components/BTable/BTh.vue b/packages/bootstrap-vue-next/src/components/BTable/BTh.vue
@@ -1,6 +1,6 @@
 <template>
   <th
-    :scope="scope"
+    :scope="localScope"
     :class="computedClasses"
     :colspan="props.colspan"
     :rowspan="props.rowspan"
@@ -24,6 +24,7 @@ const _props = withDefaults(defineProps<BThProps>(), {
   stackedHeading: undefined,
   stickyColumn: false,
   variant: null,
+  scope: undefined,
 })
 const props = useDefaults(_props, 'BTh')
 
@@ -38,5 +39,7 @@ const computedClasses = computed(() => ({
   'table-b-table-default': props.stickyColumn && props.variant === null,
 }))
 
-const scope = computed(() => (props.colspan ? 'colspan' : props.rowspan ? 'rowspan' : 'col'))
+const localScope = computed(() =>
+  props.scope ? props.scope : props.colspan ? 'colgroup' : props.rowspan ? 'rowgroup' : 'col'
+)
 </script>
diff --git a/packages/bootstrap-vue-next/src/components/BTable/td.spec.ts b/packages/bootstrap-vue-next/src/components/BTable/td.spec.ts
@@ -75,36 +75,6 @@ describe('td', () => {
     expect(wrapper.classes()).not.toContain('table-b-table-default')
   })
 
-  it('has attr scope to be colspan when prop colspan', () => {
-    const wrapper = mount(BTd, {
-      props: {
-        colspan: '6',
-      },
-    })
-    expect(wrapper.attributes('scope')).toBe('colspan')
-  })
-
-  it('has attr scope to be rowspan when prop rowspan', () => {
-    const wrapper = mount(BTd, {
-      props: {
-        rowspan: '6',
-      },
-    })
-    expect(wrapper.attributes('scope')).toBe('rowspan')
-  })
-
-  it('has attr scope to be col by default', () => {
-    const wrapper = mount(BTd)
-    expect(wrapper.attributes('scope')).toBe('col')
-  })
-
-  it('has scope colspan when both rowspan and colspan', () =&
F438
gt; {
-    const wrapper = mount(BTd, {
-      props: {colspan: 6, rowspan: 5},
-    })
-    expect(wrapper.attributes('scope')).toBe('colspan')
-  })
-
   it('does not have a nested div by default when stackedHeading is undefined', () => {
     const wrapper = mount(BTd)
     const $div = wrapper.find('div')

diff --git a/packages/bootstrap-vue-next/src/components/BTable/th.spec.ts b/packages/bootstrap-vue-next/src/components/BTable/th.spec.ts
@@ -75,34 +75,53 @@ describe('th', () => {
     expect(wrapper.classes()).not.toContain('table-b-table-default')
   })
 
-  it('has attr scope to be colspan when prop colspan', () => {
+  it('has attr scope to be colgroup when prop colspan', () => {
     const wrapper = mount(BTh, {
       props: {
         colspan: '6',
       },
     })
-    expect(wrapper.attributes('scope')).toBe('colspan')
+    expect(wrapper.attributes('scope')).toBe('colgroup')
   })
 
-  it('has attr scope to be rowspan when prop rowspan', () => {
+  it('has attr scope to be rowgroup when prop rowspan', () => {
     const wrapper = mount(BTh, {
       props: {
         rowspan: '6',
       },
     })
-    expect(wrapper.attributes('scope')).toBe('rowspan')
+    expect(wrapper.attributes('scope')).toBe('rowgroup')
   })
 
   it('has attr scope to be col by default', () => {
     const wrapper = mount(BTh)
     expect(wrapper.attributes('scope')).toBe('col')
   })
 
-  it('has scope colspan when both rowspan and colspan', () => {
+  it('can override attr scope to be row when prop scope set', () => {
+    const wrapper = mount(BTh, {
+      props: {
+        scope: 'row',
+      },
+    })
+    expect(wrapper.attributes('scope')).toBe('row')
+  })
+
+  it('can override attr scope to be row when props scope and colspan are set', () => {
+    const wrapper = mount(BTh, {
+      props: {
+        scope: 'row',
+        colspan: '5',
+      },
+    })
+    expect(wrapper.attributes('scope')).toBe('row')
+  })
+
+  it('has scope colgroup when both rowspan and colspan', () => {
     const wrapper = mount(BTh, {
       props: {colspan: 6, rowspan: 5},
     })
-    expect(wrapper.attributes('scope')).toBe('colspan')
+    expect(wrapper.attributes('scope')).toBe('colgroup')
   })
 
   it('does not have a nested div by default when stackedHeading is undefined', () => {

diff --git a/packages/bootstrap-vue-next/src/components/ConditionalTeleport.vue b/packages/bootstrap-vue-next/src/components/ConditionalTeleport.vue
@@ -4,9 +4,6 @@ import {defineComponent, h, type PropType, type SlotsType, Teleport, type Telepo
 export default defineComponent({
   name: 'ConditionalTeleport',
   inheritAttrs: false,
-  slots: Object as SlotsType<{
-    default?: Record<string, never>
-  }>,
   props: {
     to: {
       type: [String, Object] as PropType<TeleportProps['to']>,
@@ -17,6 +14,9 @@ export default defineComponent({
       required: true,
     },
   },
+  slots: Object as SlotsType<{
+    default?: Record<string, never>
+  }>,
   setup(props, {slots}) {
     // use this untill https://github.com/vuejs/core/issues/9782 is resolved
     return () =>

diff --git a/packages/bootstrap-vue-next/src/components/ConditionalWrapper.vue b/packages/bootstrap-vue-next/src/components/ConditionalWrapper.vue
@@ -4,9 +4,6 @@ import {defineComponent, h, type SlotsType} from 'vue'
 export default defineComponent({
   name: 'ConditionalWrapper',
   inheritAttrs: false,
-  slots: Object as SlotsType<{
-    default?: Record<string, never>
-  }>,
   props: {
     tag: {
       type: String,
@@ -17,6 +14,9 @@ export default defineComponent({
       required: true,
     },
   },
+  slots: Object as SlotsType<{
+    default?: Record<string, never>
+  }>,
   setup(props, {slots, attrs}) {
     return () =>
       props.skip ? slots.default?.({}) : h(props.tag, {...attrs}, [slots.default?.({})])

diff --git a/packages/bootstrap-vue-next/src/types/ComponentProps.ts b/packages/bootstrap-vue-next/src/types/ComponentProps.ts
@@ -64,6 +64,7 @@ import type {
   TableFieldRaw,
   TableRowType,
   TableStrictClassValue,
+  TableThScope,
 } from './TableTypes'
 import type {PopoverPlacement} from './PopoverPlacement'
 import type {InputType} from './InputType'
@@ -1146,6 +1147,7 @@ export interface BThProps {
   stackedHeading?: string
   stickyColumn?: boolean
   variant?: ColorVariant | null
+  scope?: TableThScope
 }
 
 export interface BProgressBarProps extends ColorExtendables {

diff --git a/packages/bootstrap-vue-next/src/types/TableTypes.ts b/packages/bootstrap-vue-next/src/types/TableTypes.ts
@@ -72,6 +72,7 @@ export type TableField<T = any> = {
     | ((value: unknown, key: string, item: T | null, type: TableRowThead) => AttrsValue)
   isRowHeader?: boolean
   stickyColumn?: boolean
+  scope?: TableThScope
 }
 
 export type TableFieldRaw<T = unknown> = T extends object
@@ -85,3 +86,5 @@ export const isTableFieldRaw = <T>(value: unknown): value is TableFieldRaw<T> =>
   typeof value === 'string' || isTableField(value)
 
 export type NoProviderTypes = 'paging' | 'sorting' | 'filtering'
+
+export type TableThScope = 'row' | 'col' | 'rowgroup' | 'colgroup'