diff --git a/src/box-container/box-container.tsx b/src/box-container/box-container.tsx index 62019c462..32f69845a 100644 --- a/src/box-container/box-container.tsx +++ b/src/box-container/box-container.tsx @@ -105,10 +105,11 @@ export const BoxContainer = ({ - + ) diff --git a/src/feedback-rating/feedback-rating.tsx b/src/feedback-rating/feedback-rating.tsx index a26e00c54..89eea65f8 100644 --- 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 => { {bannerSrc && ( (event.currentTarget.style.display = "none") } diff --git a/src/form/form-label-addon.style.tsx b/src/form/form-label-addon.style.tsx index 492199d68..bfb0ad1a1 100644 --- 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 index 9bb472b9d..d278ed9e5 100644 --- 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 ; - } - }; - return ( - - - {renderIcon()} - - + + } + ariaLabel="More info" + /> + ); }; diff --git a/src/histogram-slider/histogram-slider.tsx b/src/histogram-slider/histogram-slider.tsx index 6dbcf62a0..24f1eef25 100644 --- 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 index 0b626fcf2..7f706cbb6 100644 --- 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 index 16d77e847..ac2c763b9 100644 --- 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" > - + ); diff --git a/src/otp-input/otp-input.tsx b/src/otp-input/otp-input.tsx index a5cc066f9..d8689f94e 100644 --- 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 index 855ef1107..fb531f79e 100644 --- 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 ( {content} - {icon && {icon}} + {icon && ( + {icon} + )} ); diff --git a/src/popover-v2/types.ts b/src/popover-v2/types.ts index 6460c2e47..26a2939a4 100644 --- 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 { + 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 index 2f73343f2..f296d487f 100644 --- 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 index c677c208a..b7a50c9a6 100644 --- a/src/progress-indicator/progress-indicator.tsx +++ b/src/progress-indicator/progress-indicator.tsx @@ -68,11 +68,7 @@ export const ProgressIndicator = ({ const highlighted = stepIndex <= currentIndex; return ( - + ); @@ -82,17 +78,18 @@ export const ProgressIndicator = ({ 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 ( {getDisplayValue(step)} @@ -105,7 +102,6 @@ export const ProgressIndicator = ({ return ( { - 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} /> ); diff --git a/src/select-histogram/types.ts b/src/select-histogram/types.ts index 540c004e0..ebd1da641 100644 --- 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 index e5baf88e2..b97268e50 100644 --- a/src/shared/internal-calendar/calendar-manager.tsx +++ b/src/shared/internal-calendar/calendar-manager.tsx @@ -368,6 +368,7 @@ const Component = ( diff --git a/stories/form/form-histogram-slider/props-table.tsx b/stories/form/form-histogram-slider/props-table.tsx index 290ae1880..f9616a0b9 100644 --- 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 index 256d01b7b..7a0ad1ce5 100644 --- 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 index 3a2e83ad7..64f2af462 100644 --- 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"); }; // =============================================================================