From 5b2f005e80e4dbc862e9a6f7bb310fff84673274 Mon Sep 17 00:00:00 2001
From: alexandrusoare <37236580+alexandrusoare@users.noreply.github.com>
Date: Thu, 7 Nov 2024 13:08:32 +0200
Subject: [PATCH] chore(FilterBar): Filter bar accessibility (#30812)

---
 superset-frontend/src/components/Select/Select.tsx       | 3 ++-
 .../FilterBar/FilterControls/FilterControl.tsx           | 7 +++++--
 .../controls/DateFilterControl/DateFilterLabel.tsx       | 7 +++++++
 .../controls/DateFilterControl/components/DateLabel.tsx  | 9 +++++++--
 .../src/filters/components/Range/RangeFilterPlugin.tsx   | 5 ++++-
 .../src/filters/components/Select/SelectFilterPlugin.tsx | 1 +
 .../src/filters/components/Time/TimeFilterPlugin.tsx     | 2 +-
 .../components/TimeColumn/TimeColumnFilterPlugin.tsx     | 1 +
 .../components/TimeGrain/TimeGrainFilterPlugin.tsx       | 1 +
 9 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/superset-frontend/src/components/Select/Select.tsx b/superset-frontend/src/components/Select/Select.tsx
index bebb78887..91f951544 100644
--- a/superset-frontend/src/components/Select/Select.tsx
+++ b/superset-frontend/src/components/Select/Select.tsx
@@ -608,8 +608,9 @@ const Select = forwardRef(
           <StyledHeader headerPosition={headerPosition}>{header}</StyledHeader>
         )}
         <StyledSelect
+          id={name}
           allowClear={!isLoading && allowClear}
-          aria-label={ariaLabel || name}
+          aria-label={ariaLabel}
           autoClearSearchValue={autoClearSearchValue}
           dropdownRender={dropdownRender}
           filterOption={handleFilterOption}
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx
index f303d5a10..6b06c32f6 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx
@@ -253,7 +253,10 @@ const FilterControl = ({
   const label = useMemo(
     () => (
       <FilterControlTitleBox>
-        <FilterControlTitle data-test="filter-control-name">
+        <FilterControlTitle
+          id={`filter-name-${filter.id}`}
+          data-test="filter-control-name"
+        >
           {name}
         </FilterControlTitle>
         {isRequired && <RequiredFieldIndicator />}
@@ -315,7 +318,7 @@ const FilterControl = ({
           <div>
             <FormItem
               label={label}
-              aria-label={name}
+              htmlFor={filter.id}
               required={filter?.controlValues?.enableEmptyFilter}
               validateStatus={validateStatus}
             >
diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
index ebdd716b9..2003f5212 100644
--- a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
+++ b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
@@ -152,6 +152,7 @@ const getTooltipTitle = (
 
 export default function DateFilterLabel(props: DateFilterControlProps) {
   const {
+    name,
     onChange,
     onOpenPopover = noOp,
     onClosePopover = noOp,
@@ -384,6 +385,9 @@ export default function DateFilterLabel(props: DateFilterControlProps) {
         getPopupContainer={trigger => trigger.parentElement as HTMLElement}
       >
         <DateLabel
+          name={name}
+          aria-labelledby={`filter-name-${props.name}`}
+          aria-describedby={`date-label-${props.name}`}
           label={actualTimeRange}
           isActive={show}
           isPlaceholder={actualTimeRange === NO_TIME_RANGE}
@@ -402,6 +406,9 @@ export default function DateFilterLabel(props: DateFilterControlProps) {
         getPopupContainer={trigger => trigger.parentElement as HTMLElement}
       >
         <DateLabel
+          name={name}
+          aria-labelledby={`filter-name-${props.name}`}
+          aria-describedby={`date-label-${props.name}`}
           onClick={toggleOverlay}
           label={actualTimeRange}
           isActive={show}
diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/components/DateLabel.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/components/DateLabel.tsx
index 6032bcc68..f017490ec 100644
--- a/superset-frontend/src/explore/components/controls/DateFilterControl/components/DateLabel.tsx
+++ b/superset-frontend/src/explore/components/controls/DateFilterControl/components/DateLabel.tsx
@@ -23,6 +23,7 @@ import { css, styled, useTheme, t } from '@superset-ui/core';
 import Icons from 'src/components/Icons';
 
 export type DateLabelProps = {
+  name?: string;
   label: ReactNode;
   isActive?: boolean;
   isPlaceholder?: boolean;
@@ -87,8 +88,12 @@ export const DateLabel = forwardRef(
   (props: DateLabelProps, ref: RefObject<HTMLSpanElement>) => {
     const theme = useTheme();
     return (
-      <LabelContainer {...props} tabIndex={0}>
-        <span className="date-label-content" ref={ref}>
+      <LabelContainer {...props} tabIndex={0} role="button">
+        <span
+          id={`date-label-${props.name}`}
+          className="date-label-content"
+          ref={ref}
+        >
           {typeof props.label === 'string' ? t(props.label) : props.label}
         </span>
         <Icons.CalendarOutlined
diff --git a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
index 8ddc01ca4..09bd2a814 100644
--- a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
+++ b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
@@ -315,7 +315,10 @@ export default function RangeFilterPlugin(props: PluginFilterRangeProps) {
       {Number.isNaN(Number(min)) || Number.isNaN(Number(max)) ? (
         <h4>{t('Chosen non-numeric column')}</h4>
       ) : (
-        <StyledFormItem extra={formItemExtra}>
+        <StyledFormItem
+          aria-labelledby={`filter-name-${formData.nativeFilterId}`}
+          extra={formItemExtra}
+        >
           <Wrapper
             tabIndex={-1}
             ref={inputRef}
diff --git a/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx b/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
index 56f9f4b6d..ab5a43e2f 100644
--- a/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
+++ b/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
@@ -293,6 +293,7 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
         extra={formItemExtra}
       >
         <Select
+          name={formData.nativeFilterId}
           allowClear
           allowNewOptions={!searchAllOptions}
           allowSelectAll={!searchAllOptions}
diff --git a/superset-frontend/src/filters/components/Time/TimeFilterPlugin.tsx b/superset-frontend/src/filters/components/Time/TimeFilterPlugin.tsx
index 757070733..d2edadf3d 100644
--- a/superset-frontend/src/filters/components/Time/TimeFilterPlugin.tsx
+++ b/superset-frontend/src/filters/components/Time/TimeFilterPlugin.tsx
@@ -94,7 +94,7 @@ export default function TimeFilterPlugin(props: PluginFilterTimeProps) {
       >
         <DateFilterControl
           value={filterState.value || NO_TIME_RANGE}
-          name="time_range"
+          name={props.formData.nativeFilterId || 'time_range'}
           onChange={handleTimeRangeChange}
           onOpenPopover={() => setFilterActive(true)}
           onClosePopover={() => {
diff --git a/superset-frontend/src/filters/components/TimeColumn/TimeColumnFilterPlugin.tsx b/superset-frontend/src/filters/components/TimeColumn/TimeColumnFilterPlugin.tsx
index 805ecc4d0..247c19e4c 100644
--- a/superset-frontend/src/filters/components/TimeColumn/TimeColumnFilterPlugin.tsx
+++ b/superset-frontend/src/filters/components/TimeColumn/TimeColumnFilterPlugin.tsx
@@ -111,6 +111,7 @@ export default function PluginFilterTimeColumn(
         {...formItemData}
       >
         <Select
+          name={formData.nativeFilterId}
           allowClear
           value={value}
           placeholder={placeholderText}
diff --git a/superset-frontend/src/filters/components/TimeGrain/TimeGrainFilterPlugin.tsx b/superset-frontend/src/filters/components/TimeGrain/TimeGrainFilterPlugin.tsx
index 29869d3c6..46c57c0ea 100644
--- a/superset-frontend/src/filters/components/TimeGrain/TimeGrainFilterPlugin.tsx
+++ b/superset-frontend/src/filters/components/TimeGrain/TimeGrainFilterPlugin.tsx
@@ -121,6 +121,7 @@ export default function PluginFilterTimegrain(
         {...formItemData}
       >
         <Select
+          name={formData.nativeFilterId}
           allowClear
           value={value}
           placeholder={placeholderText}