This is an automated email from the ASF dual-hosted git repository.
diegopucci pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new 5b2f005e80 chore(FilterBar): Filter bar accessibility (#30812)
5b2f005e80 is described below
commit 5b2f005e80e4dbc862e9a6f7bb310fff84673274
Author: alexandrusoare <[email protected]>
AuthorDate: Thu Nov 7 13:08:32 2024 +0200
chore(FilterBar): Filter bar accessibility (#30812)
---
superset-frontend/src/components/Select/Select.tsx | 3 ++-
.../nativeFilters/FilterBar/FilterControls/FilterControl.tsx | 7 +++++--
.../components/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 +-
.../src/filters/components/TimeColumn/TimeColumnFilterPlugin.tsx | 1 +
.../src/filters/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 bebb788879..91f9515448 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 f303d5a10a..6b06c32f6b 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 ebdd716b91..2003f5212f 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 6032bcc68e..f017490ece 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 8ddc01ca44..09bd2a8149 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 56f9f4b6d1..ab5a43e2f7 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 7570707331..d2edadf3d2 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 805ecc4d0f..247c19e4c4 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 29869d3c68..46c57c0ea6 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}
