Skip to content

[Code scan] Add accessible names to mobile menu controls #89

Description

@njzjz

This issue is a result of a Codex global code scan of deepmodeling/deepmodeling_sphinx at commit 156679f.

Problem

The mobile menu open and close controls are empty anchor elements that rely on background images. They do not have text content or aria-label attributes, so assistive technologies can expose them as unnamed links.

Code references:

<a
class="main-menu-open-button"
href="#"
data-behavior="open-mobile-menu"
></a>

<a
class="main-menu-close-button"
href="#"
data-behavior="close-mobile-menu"
></a>

.main-menu-close-button {
background-image: url("https://unpkg.com/@njzjz/icons@0.0.5/deepmodeling/icon-close-opt.svg");
background-position: center center;
background-repeat: no-repeat;
background-size: 1.5rem 1.5rem;
height: 2.75rem;
position: absolute;
right: 0;
width: 2.75rem;
top: 0;
border-radius: var(--dm-radius-pill);
background-color: rgba(255, 255, 255, 0.08);
}

.main-menu-open-button {
background-image: url("https://unpkg.com/@njzjz/icons@0.0.5/deepmodeling/icon-menu-dots-dark-opt.svg");
background-position: center center;
background-size: 1.55rem 0.45rem;
background-repeat: no-repeat;
width: 2.75rem;
height: 2.75rem;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
border-radius: var(--dm-radius-pill);
background-color: var(--dm-surface-raised);
}

Impact

Screen-reader and voice-control users may not be able to identify or operate the menu controls reliably.

Suggested fix

Use <button> elements for these controls, or add accessible names such as aria-label="Open menu" and aria-label="Close menu". The open control should also expose menu state with aria-expanded and reference the controlled menu where practical.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    Status
    Todo

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions