codeant-ai-for-open-source[bot] commented on code in PR #39230:
URL: https://github.com/apache/superset/pull/39230#discussion_r3455903406
##########
superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx:
##########
@@ -559,6 +560,7 @@ const SliceHeaderControls = (
{isFullSize && (
<Icons.FullscreenExitOutlined
style={{ fontSize: 22 }}
+ aria-label={t('Exit fullscreen')}
onClick={() => {
props.handleToggleFullSize();
Review Comment:
Yes — the flagged issue is **correct**.
`aria-label` gives the icon an accessible name, but it still isn’t
keyboard-operable because it’s rendered as a plain clickable icon, not a real
button. So keyboard users can’t tab to it or activate it with **Enter/Space**.
### Recommended fix
Use a semantic button wrapper, or add button semantics + keyboard handling.
The cleanest option is to wrap it in a real `Button`/`button` and keep the icon
decorative:
```tsx
{isFullSize && (
<Button
buttonStyle="link"
aria-label={t('Exit fullscreen')}
onClick={props.handleToggleFullSize}
>
<Icons.FullscreenExitOutlined aria-hidden="true" style={{ fontSize: 22
}} />
</Button>
)}
```
If you want to keep the icon itself clickable, then at minimum add:
- `role="button"`
- `tabIndex={0}`
- `onKeyDown` handling for `Enter` and `Space`
### Conclusion
So this should be fixed as part of the PR; `aria-label` alone is not enough
for WCAG keyboard accessibility.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
