diff --git a/packages/widgets/src/tabbar.ts b/packages/widgets/src/tabbar.ts index bcedd63e6..dddd9f054 100644 --- a/packages/widgets/src/tabbar.ts +++ b/packages/widgets/src/tabbar.ts @@ -2000,8 +2000,13 @@ namespace Private { export function createNode(): HTMLDivElement { let node = document.createElement('div'); let content = document.createElement('ul'); + let ariaLiveRegion = document.createElement('div'); content.setAttribute('role', 'tablist'); content.className = 'lm-TabBar-content'; + ariaLiveRegion.setAttribute('aria-live', 'polite'); + ariaLiveRegion.setAttribute('role', 'region'); + ariaLiveRegion.setAttribute('id', 'tabbar-aria-live'); + ariaLiveRegion.className = 'lm-TabBar-ariaLive'; node.appendChild(content); let add = document.createElement('div'); @@ -2009,6 +2014,7 @@ namespace Private { add.setAttribute('tabindex', '-1'); add.setAttribute('role', 'button'); node.appendChild(add); + node.appendChild(ariaLiveRegion); return node; } diff --git a/packages/widgets/style/tabbar.css b/packages/widgets/style/tabbar.css index c61b0fc7a..7f24b4816 100644 --- a/packages/widgets/style/tabbar.css +++ b/packages/widgets/style/tabbar.css @@ -103,3 +103,8 @@ box-sizing: border-box; background: inherit; } + +.lm-TabBar-ariaLive { + width: 0px; + overflow: hidden; +}