codeant-ai-for-open-source[bot] commented on code in PR #37581:
URL: https://github.com/apache/superset/pull/37581#discussion_r2778609557
##########
superset-frontend/src/components/ListView/ListView.tsx:
##########
@@ -201,31 +202,36 @@ const ViewModeToggle = ({
setMode: (mode: 'table' | 'card') => void;
}) => (
<ViewModeContainer>
- <div
- role="button"
- tabIndex={0}
- onClick={e => {
- e.currentTarget.blur();
- setMode('card');
- }}
- className={cx('toggle-button', { active: mode === 'card' })}
- >
- <Icons.AppstoreOutlined iconSize="xl" />
- </div>
- <div
- role="button"
- tabIndex={0}
- onClick={e => {
- e.currentTarget.blur();
- setMode('table');
- }}
- className={cx('toggle-button', { active: mode === 'table' })}
- >
- <Icons.UnorderedListOutlined iconSize="xl" />
- </div>
+ <Tooltip title={t('Grid view')}>
+ <div
+ role="button"
+ tabIndex={0}
+ aria-pressed={mode === 'card'}
+ onClick={(e: React.MouseEvent<HTMLDivElement>) => {
+ e.currentTarget.blur();
+ setMode('card');
+ }}
+ className={cx('toggle-button', { active: mode === 'card' })}
+ >
+ <Icons.AppstoreOutlined iconSize="xl" />
+ </div>
+ </Tooltip>
+ <Tooltip title={t('List view')}>
+ <div
+ role="button"
+ tabIndex={0}
+ aria-pressed={mode === 'card'}
Review Comment:
**Suggestion:** The ARIA state for the list view toggle button is incorrect:
`aria-pressed` is bound to the card mode, so assistive technologies will report
the list view button as active when the grid/card view is active, which
contradicts the visual state and can confuse screen reader users; it should
instead reflect when the list/table view is active. [logic error]
<details>
<summary><b>Severity Level:</b> Major ⚠️</summary>
```mdx
- ⚠️ Screen readers misreport list toggle active state.
- ⚠️ Accessibility degraded on all ListView card/table screens.
```
</details>
```suggestion
aria-pressed={mode === 'table'}
```
<details>
<summary><b>Steps of Reproduction ✅ </b></summary>
```mdx
1. Load any Superset page that renders the shared `ListView` component with
`renderCard`
truthy (per PR testing instructions, this includes the dashboards listing
screen). This
causes `ListView` in
`superset-frontend/src/components/ListView/ListView.tsx` to be
mounted.
2. Inside `ListView`, the hook `useListViewState` from
`superset-frontend/src/components/ListView/utils.ts:207-294` initializes
`viewMode` to
`'card'` when `renderCard` is true and no `viewMode` query param is present,
via
`useState<ViewModeType>((query.viewMode as ViewModeType) || (renderCard ?
defaultViewMode
: 'table'))`.
3. Still in `ListView.tsx`, the header renders `<ViewModeToggle
mode={viewMode}
setMode={setViewMode} />` when `cardViewEnabled` is true (see `ListView`
return JSX around
the header section). `ViewModeToggle` then renders the list view toggle at
lines 219-231,
where `aria-pressed={mode === 'card'}` but the visual active state is
`className={cx('toggle-button', { active: mode === 'table' })}`.
4. With `viewMode === 'card'` (initial state from step 2), focus the "List
view" toggle
button (the `<div role="button">` under the `Tooltip` at lines 219-231)
using keyboard and
a screen reader. The screen reader will announce the control as "pressed/on"
because
`aria-pressed` is true (`mode === 'card'`), while visually the list icon is
inactive (no
`.active` class). This mismatch persists for any page using `ListView` with
card/table
toggles, and reverses when `viewMode === 'table'` (visual state active but
`aria-pressed`
false).
```
</details>
<details>
<summary><b>Prompt for AI Agent 🤖 </b></summary>
```mdx
This is a comment left during a code review.
**Path:** superset-frontend/src/components/ListView/ListView.tsx
**Line:** 223:223
**Comment:**
*Logic Error: The ARIA state for the list view toggle button is
incorrect: `aria-pressed` is bound to the card mode, so assistive technologies
will report the list view button as active when the grid/card view is active,
which contradicts the visual state and can confuse screen reader users; it
should instead reflect when the list/table view is active.
Validate the correctness of the flagged issue. If correct, How can I resolve
this? If you propose a fix, implement it and please make it concise.
```
</details>
<a
href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F37581&comment_hash=ebedac76cc33195773483caeaae8eb8f1578d4b4e32634acd66661a3a74117d3&reaction=like'>👍</a>
| <a
href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F37581&comment_hash=ebedac76cc33195773483caeaae8eb8f1578d4b4e32634acd66661a3a74117d3&reaction=dislike'>👎</a>
--
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]
