diff --git a/components/tab/package.json b/components/tab/package.json
index ba8d0c0427..e13dbcf445 100644
--- a/components/tab/package.json
+++ b/components/tab/package.json
@@ -32,6 +32,7 @@
         "styled-jsx": "^4"
     },
     "dependencies": {
+        "@dhis2-ui/tooltip": "^9.4.3",
         "@dhis2/prop-types": "^3.1.2",
         "@dhis2/ui-constants": "9.6.0",
         "@dhis2/ui-icons": "9.6.0",
diff --git a/components/tab/src/tab-bar/tabs.js b/components/tab/src/tab-bar/tabs.js
index e999671f0d..8b586bf8bb 100644
--- a/components/tab/src/tab-bar/tabs.js
+++ b/components/tab/src/tab-bar/tabs.js
@@ -1,26 +1,86 @@
 import { colors } from '@dhis2/ui-constants'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
-import React from 'react'
-
-const Tabs = ({ children, fixed, dataTest }) => (
-    <div className={cx({ fixed })} data-test={dataTest}>
-        {children}
-
-        <style jsx>{`
-            div {
-                display: flex;
-                align-items: flex-start;
-                position: relative;
-                overflow: hidden;
-                box-shadow: inset 0 -1px 0 0 ${colors.grey400};
-                flex-wrap: nowrap;
-                flex-grow: 1;
-                background: ${colors.white};
+import React, { useRef, useMemo } from 'react'
+
+const Tabs = ({ children, fixed, dataTest }) => {
+    const tabContainer = useRef(null)
+
+    const childrenRefs = useMemo(
+        () => React.Children.map(children, () => React.createRef()),
+        [children]
+    )
+
+    const handleKeyDown = (event) => {
+        const currentFocus = document.activeElement
+
+        if (tabContainer.current && tabContainer.current === currentFocus) {
+            if (childrenRefs.length > 0 && childrenRefs[0].current) {
+                childrenRefs[0].current.focus()
             }
-        `}</style>
-    </div>
-)
+            return
+        }
+
+        const currentIndex = childrenRefs.findIndex(
+            (ref) => ref.current === currentFocus
+        )
+
+        if (currentIndex === -1) {
+            return
+        }
+
+        if (event.key === 'ArrowRight') {
+            event.preventDefault()
+            const nextIndex = (currentIndex + 1) % childrenRefs.length
+            childrenRefs[nextIndex].current.focus()
+        }
+
+        if (event.key === 'ArrowLeft') {
+            event.preventDefault()
+            const prevIndex =
+                (currentIndex - 1 + childrenRefs.length) % childrenRefs.length
+            childrenRefs[prevIndex].current.focus()
+        }
+    }
+
+    return (
+        <div
+            className={cx({ fixed })}
+            ref={tabContainer}
+            data-test={dataTest}
+            role="tablist"
+            tabIndex={0}
+            onKeyDown={handleKeyDown}
+        >
+            {React.Children.map(children, (child, index) => {
+                if (React.isValidElement(child)) {
+                    return React.cloneElement(child, {
+                        ref: childrenRefs[index],
+                    })
+                }
+                // Wrap non-element children e.g string in a <span>
+                return (
+                    <span ref={childrenRefs[index]} tabIndex={-1}>
+                        {child}
+                    </span>
+                )
+            })}
+
+            <style jsx>{`
+                div {
+                    display: flex;
+                    align-items: flex-start;
+                    position: relative;
+                    overflow: hidden;
+                    box-shadow: inset 0 -1px 0 0 ${colors.grey400};
+                    flex-wrap: nowrap;
+                    flex-grow: 1;
+                    background: ${colors.white};
+                }
+            `}</style>
+        </div>
+    )
+}
 
 Tabs.propTypes = {
     dataTest: PropTypes.string.isRequired,
diff --git a/components/tab/src/tab/tab.js b/components/tab/src/tab/tab.js
index bb85dcec9c..9a8cd0ae71 100644
--- a/components/tab/src/tab/tab.js
+++ b/components/tab/src/tab/tab.js
@@ -1,136 +1,164 @@
+import { Tooltip } from '@dhis2-ui/tooltip'
 import { colors, theme } from '@dhis2/ui-constants'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
-import React from 'react'
-
-const Tab = ({
-    icon,
-    onClick,
-    selected,
-    disabled,
-    children,
-    className,
-    dataTest,
-}) => (
-    <button
-        className={`${cx('tab', className, {
-            selected,
-            disabled,
-        })}`}
-        onClick={disabled ? undefined : (event) => onClick({}, event)}
-        data-test={dataTest}
-    >
-        {icon}
-        <span>{children}</span>
-
-        <style jsx>{`
-            button {
-                flex-grow: 0;
-                position: relative;
-                display: inline-flex;
-                justify-content: center;
-                align-items: center;
-                vertical-align: bottom;
-
-                height: 100%;
-                padding: 16px 16px 11px;
-
-                background-color: transparent;
-                outline: none;
-                border: none;
-                border-bottom: 1px solid ${colors.grey400};
-
-                color: ${colors.grey600};
-                font-size: 14px;
-                line-height: 20px;
-
-                cursor: pointer;
-            }
-
-            :global(.fixed) > button {
-                flex-grow: 1;
-            }
-
-            button::after {
-                content: ' ';
-                display: block;
-                position: absolute;
-                bottom: -1px;
-                inset-inline-start: 0;
-                height: 4px;
-                width: 100%;
-                background-color: transparent;
-            }
-
-            span {
-                max-width: 320px;
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                transition: fill 150ms ease-in-out;
-            }
-            /*focus-visible backwards compatibility for safari: https://css-tricks.com/platform-news-using-focus-visible-bbcs-new-typeface-declarative-shadow-doms-a11y-and-placeholders/*/
-            button:focus {
-                outline: 3px solid ${theme.focus};
-                outline-offset: -3px;
-            }
-            button:focus:not(:focus-visible) {
-                outline: none;
-            }
-
-            button > :global(svg) {
-                fill: ${colors.grey600};
-                width: 14px;
-                height: 14px;
-                margin: 0 4px 0 0;
-            }
-
-            button:hover {
-                color: ${colors.grey900};
-            }
-
-            button:hover::after {
-                background-color: ${colors.grey600};
-                height: 2px;
-            }
-
-            button:active::after {
-                background-color: ${colors.grey800};
-            }
-
-            button.selected {
-                color: ${theme.primary800};
-            }
-
-            button.selected::after {
-                background-color: ${theme.primary700};
-                transition: background-color 150ms ease-in-out;
-            }
-
-            button.selected:hover::after {
-                background-color: ${theme.primary700};
-                height: 4px;
-            }
-
-            button.selected > :global(svg) {
-                fill: ${theme.primary700};
-            }
-
-            button.disabled {
-                color: ${colors.grey500};
-                cursor: not-allowed;
-            }
-
-            button.disabled:hover,
-            button.selected:hover {
-                background-color: transparent;
-            }
-
-            button.disabled > :global(svg) {
-                fill: ${colors.grey500};
-            }
-        `}</style>
-    </button>
+import React, { useState, useEffect, useRef } from 'react'
+
+export const Tab = React.forwardRef(
+    (
+        { icon, onClick, selected, disabled, children, className, dataTest },
+        ref
+    ) => {
+        let tabRef = useRef(null)
+        if (ref) {
+            tabRef = ref
+        }
+        const [isOverflowing, setIsOverflowing] = useState(false)
+
+        useEffect(() => {
+            const checkOverflow = () => {
+                const isOverflow =
+                    tabRef.current.scrollWidth > tabRef.current.clientWidth
+                setIsOverflowing(isOverflow)
+            }
+            checkOverflow()
+        }, [])
+
+        return (
+            <button
+                className={`${cx('tab', className, {
+                    selected,
+                    disabled,
+                })}`}
+                onClick={disabled ? undefined : (event) => onClick({}, event)}
+                data-test={dataTest}
+                ref={tabRef}
+                role="tab"
+                aria-selected={selected ? 'true' : 'false'}
+                aria-disabled={disabled ? 'true' : 'false'}
+                onFocus={disabled ? undefined : (event) => onClick({}, event)}
+                tabIndex={-1}
+            >
+                {icon}
+                {isOverflowing ? (
+                    <Tooltip content={children} maxWidth={'100%'}>
+                        <span ref={tabRef}>{children}</span>
+                    </Tooltip>
+                ) : (
+                    <span ref={tabRef}>{children}</span>
+                )}
+
+                <style jsx>{`
+                    button {
+                        flex-grow: 0;
+                        position: relative;
+                        display: inline-flex;
+                        justify-content: center;
+                        align-items: center;
+                        vertical-align: bottom;
+
+                        height: 100%;
+                        padding: 16px 16px 11px;
+
+                        background-color: transparent;
+                        outline: none;
+                        border: none;
+                        border-bottom: 1px solid ${colors.grey400};
+
+                        color: ${colors.grey600};
+                        font-size: 14px;
+                        line-height: 20px;
+
+                        cursor: pointer;
+                    }
+
+                    :global(.fixed) > button {
+                        flex-grow: 1;
+                    }
+
+                    button::after {
+                        content: ' ';
+                        display: block;
+                        position: absolute;
+                        bottom: -1px;
+                        inset-inline-start: 0;
+                        height: 4px;
+                        width: 100%;
+                        background-color: transparent;
+                    }
+
+                    span {
+                        display: inline-flex;
+                        max-width: 320px;
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        transition: fill 150ms ease-in-out;
+                    }
+                    /*focus-visible backwards compatibility for safari: https://css-tricks.com/platform-news-using-focus-visible-bbcs-new-typeface-declarative-shadow-doms-a11y-and-placeholders/*/
+                    button:focus {
+                        outline: 3px solid ${theme.focus};
+                        outline-offset: -3px;
+                    }
+                    button:focus:not(:focus-visible) {
+                        outline: none;
+                    }
+
+                    button > :global(svg) {
+                        fill: ${colors.grey600};
+                        width: 14px;
+                        height: 14px;
+                        margin: 0 4px 0 0;
+                    }
+
+                    button:hover {
+                        color: ${colors.grey900};
+                    }
+
+                    button:hover::after {
+                        background-color: ${colors.grey600};
+                        height: 2px;
+                    }
+
+                    button:active::after {
+                        background-color: ${colors.grey800};
+                    }
+
+                    button.selected {
+                        color: ${theme.primary800};
+                    }
+
+                    button.selected::after {
+                        background-color: ${theme.primary700};
+                        transition: background-color 150ms ease-in-out;
+                    }
+
+                    button.selected:hover::after {
+                        background-color: ${theme.primary700};
+                        height: 4px;
+                    }
+
+                    button.selected > :global(svg) {
+                        fill: ${theme.primary700};
+                    }
+
+                    button.disabled {
+                        color: ${colors.grey500};
+                        cursor: not-allowed;
+                    }
+
+                    button.disabled:hover,
+                    button.selected:hover {
+                        background-color: transparent;
+                    }
+
+                    button.disabled > :global(svg) {
+                        fill: ${colors.grey500};
+                    }
+                `}</style>
+            </button>
+        )
+    }
 )
 
 Tab.defaultProps = {
@@ -149,4 +177,4 @@ Tab.propTypes = {
     onClick: PropTypes.func,
 }
 
-export { Tab }
+Tab.displayName = 'Tab'