From aea874594bc591790acff02a7c861e8b47eed04c Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sat, 31 Aug 2019 04:17:10 -0300 Subject: [PATCH 1/3] feat(b-table, b-table-lite): use `aria-details` rather than `aria-describedby` when details row showing --- src/components/table/helpers/mixin-tbody-row.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/table/helpers/mixin-tbody-row.js b/src/components/table/helpers/mixin-tbody-row.js index a96b8dcb0c0..b7c3f45fb3f 100644 --- a/src/components/table/helpers/mixin-tbody-row.js +++ b/src/components/table/helpers/mixin-tbody-row.js @@ -228,7 +228,9 @@ export default { // We can return more than one TR if rowDetails enabled const $rows = [] - // Details ID needed for aria-describedby when details showing + // Details ID needed for aria-details when details showing + // We set it to null when not showing so that atttribute + // does not appear on the elemet const detailsId = rowShowDetails ? this.safeId(`_details_${rowIndex}_`) : null // For each item data field in row @@ -284,7 +286,7 @@ export default { tabindex: hasRowClickHandler ? '0' : null, 'data-pk': rowId ? String(item[primaryKey]) : null, // Should this be `aria-details` instead? - 'aria-describedby': detailsId, + 'aria-details': detailsId, 'aria-owns': detailsId, 'aria-rowindex': ariaRowIndex, ...selectableAttrs From db5ff2d49216bdfd3d5f5783aa63e421d8cc5c3e Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sat, 31 Aug 2019 04:23:13 -0300 Subject: [PATCH 2/3] Update mixin-tbody-row.js --- src/components/table/helpers/mixin-tbody-row.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/table/helpers/mixin-tbody-row.js b/src/components/table/helpers/mixin-tbody-row.js index b7c3f45fb3f..816177f4b88 100644 --- a/src/components/table/helpers/mixin-tbody-row.js +++ b/src/components/table/helpers/mixin-tbody-row.js @@ -324,7 +324,7 @@ export default { } // Render the details slot in a TD - const $details = h(BTd, { props: { colspan: fields.length }, attrs: { id: detailsId } }, [ + const $details = h(BTd, { props: { colspan: fields.length } }, [ this.normalizeSlot(detailsSlotName, detailsScope) ]) @@ -353,7 +353,7 @@ export default { : this.tbodyTrClass ], props: { variant: item._rowVariant || null }, - attrs: { id: detailsId } + attrs: { id: detailsId, tabindex: '-1' } }, [$details] ) From 920ba7e18a28e8ceb462a2423069b8d5f0c83cc2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Sat, 31 Aug 2019 13:01:59 +0200 Subject: [PATCH 3/3] Update mixin-tbody-row.js --- src/components/table/helpers/mixin-tbody-row.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/table/helpers/mixin-tbody-row.js b/src/components/table/helpers/mixin-tbody-row.js index 816177f4b88..88dc3f74b2e 100644 --- a/src/components/table/helpers/mixin-tbody-row.js +++ b/src/components/table/helpers/mixin-tbody-row.js @@ -228,9 +228,9 @@ export default { // We can return more than one TR if rowDetails enabled const $rows = [] - // Details ID needed for aria-details when details showing - // We set it to null when not showing so that atttribute - // does not appear on the elemet + // Details ID needed for `aria-details` when details showing + // We set it to `null` when not showing so that attribute + // does not appear on the element const detailsId = rowShowDetails ? this.safeId(`_details_${rowIndex}_`) : null // For each item data field in row