Merge pull request #595 from LifeSG/accessibility-improvements

Accessibility improvements
LifeSG · Oct 15, 2024 · 0bf5724 · 0bf5724
2 parents 0f0af3d + 69131f0
commit 0bf5724
Show file tree

Hide file tree

Showing 20 changed files with 61 additions and 41 deletions.
diff --git a/src/box-container/box-container.tsx b/src/box-container/box-container.tsx
@@ -105,10 +105,11 @@ export const BoxContainer = ({
                 <Handle
                     onClick={onHandleClick}
                     type="button"
+                    aria-label={showExpanded ? "Collapse" : "Expand"}
                     data-testid={subComponentTestIds?.handle || "handle"}
                 >
                     <HandleIconContainer $expanded={showExpanded}>
-                        <HandleIcon />
+                        <HandleIcon aria-hidden />
                     </HandleIconContainer>
                 </Handle>
             )

diff --git a/src/feedback-rating/feedback-rating.tsx b/src/feedback-rating/feedback-rating.tsx
@@ -30,9 +30,9 @@ export const FeedbackRating = (props: FeedbackRatingProps): JSX.Element => {
         <MainContainer {...otherProps}>
             {bannerSrc && (
                 <Image
+                    data-testid="feedback-banner-image"
                     src={bannerSrc}
                     alt=""
-                    aria-label="banner image"
                     onError={(event) =>
                         (event.currentTarget.style.display = "none")
                     }

diff --git a/src/form/form-label-addon.style.tsx b/src/form/form-label-addon.style.tsx
@@ -16,7 +16,6 @@ export const TriggerArea = styled.button`
 `;
 
 export const AddonWrapper = styled.div`
+    padding-left: 0.25rem;
     display: inline;
-    position: relative;
-    width: fit-content;
 `;
diff --git a/src/form/form-label-addon.tsx b/src/form/form-label-addon.tsx
@@ -1,7 +1,7 @@
 import { ICircleFillIcon } from "@lifesg/react-icons/i-circle-fill";
 import { RefObject } from "react";
-import { PopoverTrigger } from "../popover-v2/popover-trigger";
-import { AddonWrapper, TriggerArea } from "./form-label-addon.style";
+import { PopoverInline } from "../popover-v2";
+import { AddonWrapper } from "./form-label-addon.style";
 import { FormLabelAddonProps } from "./types";
 
 // =============================================================================
@@ -26,26 +26,18 @@ export const PopoverAddon = ({
     // =========================================================================
     // RENDER FUNCTION
     // =========================================================================
-    const renderIcon = () => {
-        if (icon) {
-            return icon;
-        } else {
-            return <ICircleFillIcon id={`${type}-icon`} />;
-        }
-    };
-
     return (
-        <PopoverTrigger
-            trigger="click"
-            id={id}
-            data-testid={testId}
-            popoverContent={content}
-            rootNode={rootNode}
-            zIndex={zIndex}
-        >
-            <AddonWrapper>
-                <TriggerArea>{renderIcon()}</TriggerArea>
-            </AddonWrapper>
-        </PopoverTrigger>
+        <AddonWrapper>
+            <PopoverInline
+                trigger="click"
+                id={id}
+                data-testid={testId}
+                popoverContent={content}
+                rootNode={rootNode}
+                zIndex={zIndex}
+                icon={icon ?? <ICircleFillIcon data-testid={`${type}-icon`} />}
+                ariaLabel="More info"
+            />
+        </AddonWrapper>
     );
 };
diff --git a/src/histogram-slider/histogram-slider.tsx b/src/histogram-slider/histogram-slider.tsx
@@ -18,6 +18,7 @@ export const HistogramSlider = ({
     showRangeLabels,
     rangeLabelPrefix,
     rangeLabelSuffix,
+    ariaLabels,
     onChange,
     onChangeEnd,
     renderEmptyView,
@@ -133,6 +134,7 @@ export const HistogramSlider = ({
                     value={selection}
                     disabled={disabled}
                     readOnly={readOnly}
+                    ariaLabels={ariaLabels}
                     onChange={handleChange}
                     onChangeEnd={handleChangeEnd}
                 />

diff --git a/src/histogram-slider/types.ts b/src/histogram-slider/types.ts
@@ -16,6 +16,7 @@ export interface HistogramSliderProps {
     showRangeLabels?: boolean | undefined;
     rangeLabelPrefix?: string | undefined;
     rangeLabelSuffix?: string | undefined;
+    ariaLabels?: [string, string] | undefined;
     renderRangeLabel?: ((value: number) => React.ReactNode) | undefined;
     /** Called on every selection change. Returns the value in the format `[start, end]` */
     onChange?: ((value: [number, number]) => void) | undefined;

diff --git a/src/notification-banner/notification-banner.tsx b/src/notification-banner/notification-banner.tsx
@@ -77,8 +77,9 @@ export const NBComponent = ({
             data-testid={formatId("dismiss-button", testId)}
             focusHighlight={false}
             type="button"
+            aria-label="Dismiss notification"
         >
-            <StyledIcon />
+            <StyledIcon aria-hidden />
         </StyledIconButton>
     );
 

diff --git a/src/otp-input/otp-input.tsx b/src/otp-input/otp-input.tsx
@@ -208,6 +208,7 @@ export const OtpInput = ({
                                 "otp-input",
                                 dataTestId
                             )}
+                            aria-label={`Enter OTP character ${index + 1}`}
                             key={index}
                             ref={(el) => (inputRefs.current[index] = el)}
                             type="text"

diff --git a/src/popover-v2/popover-inline/popover-inline.tsx b/src/popover-v2/popover-inline/popover-inline.tsx
@@ -3,6 +3,7 @@ import { PopoverInlineProps } from "../types";
 import { StyledIcon, StyledText } from "./popover-inline.styles";
 
 export const PopoverInline = ({
+    ariaLabel,
     content,
     icon,
     underlineStyle = "default",
@@ -12,6 +13,8 @@ export const PopoverInline = ({
     // =========================================================================
     // RENDER FUNCTIONS
     // =========================================================================
+    const hasContent = !!content;
+
     return (
         <PopoverTrigger {...otherProps}>
             <StyledText
@@ -20,9 +23,12 @@ export const PopoverInline = ({
                 tabIndex={0}
                 $defaultStyle={underlineStyle}
                 $hoverStyle={underlineHoverStyle}
+                aria-label={ariaLabel ?? (hasContent ? undefined : "More info")}
             >
                 {content}
-                {icon && <StyledIcon $standalone={!content}>{icon}</StyledIcon>}
+                {icon && (
+                    <StyledIcon $standalone={!hasContent}>{icon}</StyledIcon>
+                )}
             </StyledText>
         </PopoverTrigger>
     );

diff --git a/src/popover-v2/types.ts b/src/popover-v2/types.ts
@@ -46,6 +46,7 @@ export type PopoverInlineStyle = "default" | "underline" | "underline-dashed";
 
 export interface PopoverInlineProps
     extends Omit<PopoverV2TriggerProps, "children"> {
+    ariaLabel?: string | undefined;
     content?: React.ReactNode | undefined;
     icon?: JSX.Element | undefined;
     underlineStyle?: PopoverInlineStyle | undefined;

diff --git a/src/progress-indicator/progress-indicator.style.tsx b/src/progress-indicator/progress-indicator.style.tsx
@@ -32,7 +32,7 @@ export const Wrapper = styled.div`
     }
 `;
 
-export const Content = styled.nav`
+export const Content = styled.div`
     display: flex;
     flex-basis: 0;
     justify-content: space-between;

diff --git a/src/progress-indicator/progress-indicator.tsx b/src/progress-indicator/progress-indicator.tsx
@@ -68,11 +68,7 @@ export const ProgressIndicator = <T,>({
             const highlighted = stepIndex <= currentIndex;
 
             return (
-                <Indicator
-                    key={stepIndex}
-                    aria-label={getAriaLabel(stepIndex, currentIndex)}
-                    id={getId(stepIndex, currentIndex)}
-                >
+                <Indicator key={stepIndex} id={getId(stepIndex, currentIndex)}>
                     <IndicatorBar highlighted={highlighted}></IndicatorBar>
                 </Indicator>
             );
@@ -82,17 +78,18 @@ export const ProgressIndicator = <T,>({
     const renderStepTitleDesktop = () => {
         return steps.map((step: T, stepIndex: number) => {
             const highlighted = stepIndex <= currentIndex;
-            const fontWeight = stepIndex === currentIndex ? "bold" : "regular";
+            const current = stepIndex === currentIndex;
+            const fontWeight = current ? "bold" : "regular";
 
             return (
                 <Indicator
                     key={stepIndex}
-                    aria-label={getAriaLabel(stepIndex, currentIndex)}
                     id={`${getId(stepIndex, currentIndex)}-title`}
                 >
                     <IndicatorTitleDesktop
                         highlighted={highlighted}
                         weight={fontWeight}
+                        aria-current={current}
                     >
                         {getDisplayValue(step)}
                     </IndicatorTitleDesktop>
@@ -105,7 +102,6 @@ export const ProgressIndicator = <T,>({
         return (
             <Indicator
                 key={currentIndex}
-                aria-label={getAriaLabel(currentIndex, currentIndex)}
                 id={getId(currentIndex, currentIndex)}
             >
                 <IndicatorTitleMobile

diff --git a/src/select-histogram/select-histogram.tsx b/src/select-histogram/select-histogram.tsx
@@ -37,7 +37,12 @@ export const SelectHistogram = ({
     value,
     ...otherProps
 }: SelectHistogramProps): JSX.Element => {
-    const { interval, bins = [], renderEmptyView } = histogramSlider;
+    const {
+        interval,
+        bins = [],
+        renderEmptyView,
+        ariaLabels,
+    } = histogramSlider;
     // =============================================================================
     // CONST, STATE
     // =============================================================================
@@ -193,6 +198,7 @@ export const SelectHistogram = ({
                 onChangeEnd={onSliderChangeEnd}
                 showRangeLabels={false}
                 renderEmptyView={renderEmptyView}
+                ariaLabels={ariaLabels}
             />
         </HistogramSliderDropdownContainer>
     );

diff --git a/src/select-histogram/types.ts b/src/select-histogram/types.ts
@@ -4,7 +4,7 @@ import { DropdownAlignmentType } from "../shared/dropdown-wrapper";
 
 export type SelectHistogramSliderProps = Pick<
     HistogramSliderProps,
-    "bins" | "interval" | "renderEmptyView"
+    "bins" | "interval" | "renderEmptyView" | "ariaLabels"
 >;
 
 export interface SelectHistogramProps {

diff --git a/src/shared/internal-calendar/calendar-manager.tsx b/src/shared/internal-calendar/calendar-manager.tsx
@@ -368,6 +368,7 @@ const Component = (
                 </HeaderInputDropdown>
                 <HeaderArrows>
                     <HeaderArrowButton
+                        aria-label="Previous month"
                         data-testid="left-arrow-btn"
                         disabled={isLeftArrowDisabled()}
                         focusHighlight={false}
@@ -377,6 +378,7 @@ const Component = (
                         <ArrowLeft />
                     </HeaderArrowButton>
                     <HeaderArrowButton
+                        aria-label="Next month"
                         data-testid="right-arrow-btn"
                         disabled={isRightArrowDisabled()}
                         focusHighlight={false}

diff --git a/src/sidenav/sidenav-group.styles.tsx b/src/sidenav/sidenav-group.styles.tsx
@@ -9,9 +9,10 @@ export const Container = styled.ul`
     flex-direction: column;
     align-items: center;
     width: 100%;
+    list-style: none;
 `;
 
-export const Divider = styled.div`
+export const Divider = styled.li`
     margin: 0.5rem 0;
     width: 6.5rem;
     height: 1px;

diff --git a/src/tab/tab-link-chain.tsx b/src/tab/tab-link-chain.tsx
@@ -84,6 +84,7 @@ export const TabLinkChain = ({
                     return (
                         <ChainItem
                             key={index}
+                            role="none"
                             $active={isActive}
                             ref={isActive ? activeLinkRef : null}
                         >

diff --git a/stories/form/form-histogram-slider/props-table.tsx b/stories/form/form-histogram-slider/props-table.tsx
@@ -78,6 +78,11 @@ const DATA: ApiTableSectionProps[] = [
                 description: "Function to render custom selection range labels",
                 propTypes: ["(value: number) => React.ReactNode"],
             },
+            {
+                name: "ariaLabels",
+                description: "The user-friendly description of each thumb",
+                propTypes: ["[string, string]"],
+            },
             {
                 name: "onChange",
                 description: (

diff --git a/stories/form/form-select-histogram/props-table.tsx b/stories/form/form-select-histogram/props-table.tsx
@@ -145,6 +145,11 @@ const DATA: ApiTableSectionProps[] = [
                     "A custom display if there are no results across any of the bins",
                 propTypes: ["() => React.ReactNode"],
             },
+            {
+                name: "ariaLabels",
+                description: "The user-friendly description of each thumb",
+                propTypes: ["[string, string]"],
+            },
         ],
     },
     ...SHARED_FORM_PROPS_DATA,

diff --git a/tests/feedback-rating/feedback-rating.spec.tsx b/tests/feedback-rating/feedback-rating.spec.tsx
@@ -251,7 +251,7 @@ const getSubmitButton = (label?: string): HTMLElement => {
 };
 
 const getBannerImg = (): HTMLElement => {
-    return screen.getByRole("img", { name: "banner image" });
+    return screen.getByTestId("feedback-banner-image");
 };
 
 // =============================================================================