[bug] A11y: Elements with role="treeitem" do *not* always require aria-selected

[computergnome99]

Before You File a Bug Report Please Confirm You Have Done The Following...

• [X] I have tried restarting my IDE and the issue persists.
• [X] I have updated to the latest version of the packages.

What version of ESLint are you using?

^9.0.0

What version of eslint-plugin-svelte are you using?

^2.36.0

What did you do?

Configuration

I have the default config that comes with `create-svelte@latest`: ``` import js from '@eslint/js'; import ts from 'typescript-eslint'; import svelte from 'eslint-plugin-svelte'; import prettier from 'eslint-config-prettier'; import globals from 'globals'; /** @type {import('eslint').Linter.Config[]} */ export default [ js.configs.recommended, ...ts.configs.recommended, ...svelte.configs['flat/recommended'], prettier, ...svelte.configs['flat/prettier'], { languageOptions: { globals: { ...globals.browser, ...globals.node } } }, { files: ['**/*.svelte'], languageOptions: { parserOptions: { parser: ts.parser } } }, { ignores: ['build/', '.svelte-kit/', 'dist/'] } ]; ```

<script>
    import { page } from '$app/stores';
    let groupExpanded = false;
</script>

<nav aria-label="Example">
    <ul role="tree" aria-label="Example">
        <li role="none">
            <button
                role="treeitem"
                aria-expanded={groupExpanded}
                aria-owns="example-group"
                on:click={() => {
                    groupExpanded = !groupExpanded;
                }}
            >
                Example 1
            </button>

            {#if groupExpanded}
                <ul role="group">
                    <li role="none">
                        <a href="item-1" role="treeitem" aria-selected={$page.route.id === 'item-1'}>
                            Item 1
                        </a>
                    </li>
                </ul>
            {/if}
        </li>
    </ul>
</nav>

What did you expect to happen?

Per the WCAG spec, parent-nodes should also have the role "treeitem" but do not always need the aria-selected property.

WCAG Tree Pattern Spec WCAG Tree Navigation Example/Spec

The <button> in my code is the trigger for a "group" within the tree, and requires the role "treeitem", but per the example linked above, does not require aria-selected. Instead, it gets aria-expanded and aria-owns.

What actually happened?

The plugin flags the role="treeitem" as an error since I have not included aria-selected as well.

Link to GitHub Repo with Minimal Reproducible Example

svelte-eslint-config-a11y-treeitem-repro

Additional comments

No response

[ota-meshi]

I don't think this issue is with esint-plugin-svelte. I think that error is coming from the svelte compiler. Why do you think this is a issue with the eslint-plugin?

[computergnome99]

Thanks for the response - and, good question!

I suppose I figured that A11y alerts in the IDE came from the eslint-plugin. Was that an incorrect assumption?

[computergnome99]

After further investigation, I'm going to assume that this is a Svelte Compiler issue and not an eslint-plugin issue.

Thanks again for your response.