Compare commits

...

1 Commits

Author SHA1 Message Date
Elizabeth Thompson
4f0434ba1d fix(a11y): add aria-label to dashboard IconButton and unlabeled call sites
Icon-only buttons (delete, row settings, column settings) had no
accessible name, making them invisible to screen readers despite being
keyboard-focusable via tabIndex=0. Wires the existing label prop through
as aria-label on the underlying div[role=button] and provides labels at
all three call sites that previously passed none.

WCAG 2.1 SC 4.1.2 (Name, Role, Value) — Level A.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-27 00:44:35 +00:00
4 changed files with 5 additions and 0 deletions

View File

@@ -18,6 +18,7 @@
*/
import { MouseEventHandler, FC } from 'react';
import { t } from '@apache-superset/core/translation';
import { Icons } from '@superset-ui/core/components/Icons';
import type { IconType } from '@superset-ui/core/components/Icons/types';
import IconButton from './IconButton';
@@ -33,6 +34,7 @@ const DeleteComponentButton: FC<DeleteComponentButtonProps> = ({
}) => (
<IconButton
onClick={onDelete}
label={t('Delete component')}
icon={<Icons.DeleteOutlined iconSize={iconSize ?? 'l'} />}
/>
);

View File

@@ -43,6 +43,7 @@ const IconButton = ({ icon, label, onClick }: IconButtonProps) => (
<StyledDiv
tabIndex={0}
role="button"
aria-label={label}
onClick={e => {
e.preventDefault();
onClick(e);

View File

@@ -247,6 +247,7 @@ const Column = (props: ColumnProps) => {
/>
<IconButton
onClick={() => handleChangeFocus(true)}
label={t('Column settings')}
icon={<Icons.SettingOutlined iconSize="m" />}
/>
</HoverMenu>

View File

@@ -293,6 +293,7 @@ const Row = memo((props: RowProps) => {
<DeleteComponentButton onDelete={handleDeleteComponent} />
<IconButton
onClick={() => handleChangeFocus(true)}
label={t('Row settings')}
icon={<Icons.SettingOutlined iconSize="l" />}
/>
</HoverMenu>