Sidebar Items on Mobile - Nav Issue

[krowvin]

When you are on mobile all options are present from the sidebar. Even items that you would not normally want to be clickable.

Decide if we should add the ability to remove or ignore onClick for link items that could have targetable=false?

For example on SWT we have a reports object, and within that the various pages.
https://github.com/USACE/swt-wm-web/blob/eb32c41975b68659f74de179aed597c47d38bf7b/src/links/sidebar-links.js#L12-L14

const BASE_URL = import.meta.env.BASE_URL;
const sidebarLinks = [
    { id: "home", text: "Tulsa Home", href: `${BASE_URL}/` },

    {
        id: "status-map",
        text: "Project Status Map",
        href: `${BASE_URL}/map`,
    },

    {
        id: "reports-menu",
        text: "Reports",
        targetable: false, // We could do this? Doesn't have a href. Or just make it not targetable if no href found?
        children: [
            {
                id: "reports-viewer",
                text: "Report Viewer",
                href: `${BASE_URL}/reports/`,
            },
            {
                id: "reports-monthly",
                text: "Monthly Report",
                href: `${BASE_URL}/reports/monthly`,
            },
            {
                id: "reports-daily",
                text: "Daily Report",
                href: `${BASE_URL}/reports/daily`,
            },
        ],
    }, ...etc
]

The way the sidebar is setup the initial option is meant to open the sub menu, but not be a link itself.

[krowvin]

@NobuNobuu suggested graying the dropdown items out to show they are not targetable but still make them present in the dropdown on mobile.

[willbreitkreutz]

I'm kind of thinking when there's no href, bold the text and throw an aria description of "group header" or something on the element in the dropdown to make it obvious that its not clickable and is there as an organizational feature.

[krowvin]

Backlog organization: #208 is grouped here as the concrete Android/Chrome reproduction of this mobile sidebar problem. Related: #213 tracks the broader routing/link contract, while #254 tracks accessibility findings in the same mobile navigation UI.