From 558973f51a0bf60d0d406072f60b36d7c2d1fb71 Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <joe@dhis2.org>
Date: Mon, 8 Jan 2024 11:22:14 +0100
Subject: [PATCH 1/4] fix(segmented-control): adjust design

---
 .../src/segmented-control.js                  | 52 ++++++-------------
 1 file changed, 15 insertions(+), 37 deletions(-)

diff --git a/components/segmented-control/src/segmented-control.js b/components/segmented-control/src/segmented-control.js
index dfa132ecd0..44f9410e3e 100644
--- a/components/segmented-control/src/segmented-control.js
+++ b/components/segmented-control/src/segmented-control.js
@@ -1,4 +1,4 @@
-import { colors, spacers, theme } from '@dhis2/ui-constants'
+import { colors, elevations, spacers, theme } from '@dhis2/ui-constants'
 import cx from 'classnames'
 import { PropTypes } from 'prop-types'
 import React from 'react'
@@ -46,26 +46,24 @@ export const SegmentedControl = ({ options, selected, onChange }) => {
 
             <style jsx>{`
                 .segmented-control {
-                    /* create a stacking context for the children */
-                    position: relative;
-                    z-index: 0;
+                    display: inline-flex;
+                    background: ${colors.grey300};
+                    border-radius: 5px;
+                    padding: 2px;
                 }
 
                 .segment {
                     all: unset;
                     box-sizing: border-box;
-                    display: inline-block;
-                    position: relative;
                     cursor: pointer;
                     font-size: 14px;
                     text-align: center;
-                    border: 1px solid ${colors.grey400};
-                    border-right-width: 0;
-                    background: ${colors.grey050};
-                    color: ${colors.grey600};
+                    border-radius: 5px;
+                    background: transparent;
+                    color: ${colors.grey700};
                     min-width: 72px;
                     max-width: 320px;
-                    padding: ${spacers.dp8} ${spacers.dp16};
+                    padding: 6px ${spacers.dp12};
                 }
 
                 .segment:focus {
@@ -77,36 +75,16 @@ export const SegmentedControl = ({ options, selected, onChange }) => {
                     outline: none;
                 }
 
-                .segment:not(.selected):hover,
-                .segment:not(.selected):focus {
-                    background: ${colors.grey100};
-                    color: ${colors.grey700};
-                }
-
-                .segment:first-of-type {
-                    border-radius: 3px 0 0 3px;
-                }
-
-                .segment:last-of-type {
-                    border-right-width: 1px;
-                    border-radius: 0 3px 3px 0;
+                .segment:not(.selected):not(.disabled):hover {
+                    background: ${colors.grey400};
+                    color: ${colors.grey900};
                 }
 
                 .segment.selected {
                     cursor: default;
-                    font-weight: 600;
-                    border: 1px solid ${colors.teal800};
-                    background: ${colors.teal600};
-                    color: white;
-                }
-
-                .segment.selected:not(:last-of-type) {
-                    z-index: 1;
-                    margin-right: -1px;
-                }
-
-                .segment.selected:focus {
-                    background: ${colors.teal700};
+                    box-shadow: ${elevations.e100};
+                    background: ${colors.white};
+                    color: ${colors.grey900};
                 }
 
                 .segment.disabled {

From 5fd90a05557b0ab650f38d788cc04331519fc953 Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <joe@dhis2.org>
Date: Mon, 8 Jan 2024 12:13:04 +0100
Subject: [PATCH 2/4] fix(segmented-control): use semantic markup

---
 .../src/segmented-control.js                  | 33 +++++++++++--------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/components/segmented-control/src/segmented-control.js b/components/segmented-control/src/segmented-control.js
index 44f9410e3e..f08a35261a 100644
--- a/components/segmented-control/src/segmented-control.js
+++ b/components/segmented-control/src/segmented-control.js
@@ -28,25 +28,29 @@ export const SegmentedControl = ({ options, selected, onChange }) => {
     }
 
     return (
-        <div className="segmented-control">
+        <ul className="segmented-control">
             {options.map(({ label, value, disabled }) => (
-                <button
-                    key={label}
-                    type="button"
-                    className={cx('segment', {
-                        selected: value === selected,
-                        disabled,
-                    })}
-                    onClick={(e) => onChange({ value }, e)}
-                    disabled={disabled}
-                >
-                    {label}
-                </button>
+                <li key="label">
+                    <button
+                        type="button"
+                        className={cx('segment', {
+                            selected: value === selected,
+                            disabled,
+                        })}
+                        onClick={(e) => onChange({ value }, e)}
+                        disabled={disabled}
+                    >
+                        {label}
+                    </button>
+                </li>
             ))}
 
             <style jsx>{`
                 .segmented-control {
+                    all: unset;
+                    list-style: none;
                     display: inline-flex;
+                    align-items: stretch;
                     background: ${colors.grey300};
                     border-radius: 5px;
                     padding: 2px;
@@ -63,6 +67,7 @@ export const SegmentedControl = ({ options, selected, onChange }) => {
                     color: ${colors.grey700};
                     min-width: 72px;
                     max-width: 320px;
+                    height: 100%;
                     padding: 6px ${spacers.dp12};
                 }
 
@@ -92,7 +97,7 @@ export const SegmentedControl = ({ options, selected, onChange }) => {
                     opacity: 0.5;
                 }
             `}</style>
-        </div>
+        </ul>
     )
 }
 

From cce94e01ce27f00f0002fa7f617f63546909aa3a Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <joe@dhis2.org>
Date: Mon, 8 Jan 2024 12:18:06 +0100
Subject: [PATCH 3/4] fix(segmented-control): add aria-label prop

---
 components/segmented-control/src/segmented-control.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/components/segmented-control/src/segmented-control.js b/components/segmented-control/src/segmented-control.js
index f08a35261a..6eee2338a3 100644
--- a/components/segmented-control/src/segmented-control.js
+++ b/components/segmented-control/src/segmented-control.js
@@ -18,7 +18,12 @@ import { SegmentedControl } from '@dhis2/ui'
 ```
 */
 
-export const SegmentedControl = ({ options, selected, onChange }) => {
+export const SegmentedControl = ({
+    options,
+    selected,
+    onChange,
+    ariaLabel,
+}) => {
     if (!options.map(({ value }) => value).includes(selected)) {
         const message =
             `There is no option with the value: "${selected}". ` +
@@ -28,7 +33,7 @@ export const SegmentedControl = ({ options, selected, onChange }) => {
     }
 
     return (
-        <ul className="segmented-control">
+        <ul className="segmented-control" aria-label={ariaLabel}>
             {options.map(({ label, value, disabled }) => (
                 <li key="label">
                     <button
@@ -114,4 +119,6 @@ SegmentedControl.propTypes = {
     selected: PropTypes.string.isRequired,
     /** Called with the signature `({ value: string }, event)` */
     onChange: PropTypes.func.isRequired,
+    /** Used to provide an accessible label to a segmented control without a visible label */
+    ariaLabel: PropTypes.string,
 }

From e20c405c571b7fa2964ac93ce5f82d4b0e0b4074 Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <joe@dhis2.org>
Date: Mon, 8 Jan 2024 12:18:55 +0100
Subject: [PATCH 4/4] docs(segmented-control): add long label and aria label
 storybook examples

---
 .../src/segmented-control.stories.js               | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/components/segmented-control/src/segmented-control.stories.js b/components/segmented-control/src/segmented-control.stories.js
index 75a90f022d..309c9d8b21 100644
--- a/components/segmented-control/src/segmented-control.stories.js
+++ b/components/segmented-control/src/segmented-control.stories.js
@@ -17,6 +17,7 @@ export default {
         ],
         selected: 'DOG',
         onChange: logger,
+        ariaLabel: 'Segmented control label',
     },
 }
 
@@ -33,3 +34,16 @@ DisabledOption.args = {
     ],
     selected: 'THREE',
 }
+
+export const LongLabels = Template.bind({})
+LongLabels.args = {
+    options: [
+        {
+            label: 'Program configuration, security, and distribution',
+            value: 'PROGRAM',
+        },
+        { label: 'Two', value: 'TWO' },
+        { label: 'Three', value: 'THREE' },
+    ],
+    selected: 'PROGRAM',
+}