search

Office-of-Digital-Services / California-State-Web-Template-Website

The California State Template is an HTML template and sample website offered by the California Department of Technology to various other agencies and departments within the State of California. The template provides California Government entities with guidelines for how their websites should be created and developed, and allows for consistent branding and web standards for State websites. Please visit webtools.ca.gov for more information.
https://template.webstandards.ca.gov/
Other
41 stars 37 forks source link

Dismiss menus/dialogs with [Escape] AND graphical "X" (Close) #1638

Closed MattAtDor closed 4 months ago

MattAtDor commented 6 months ago

Considering accessibility, when navigating the site with a keyboard only, popup dialogs should be able to be closed with the escape key, not just by focusing on the "X" (Close button) and then activating it with [Enter] or [Space].
By allowing the [Escape] key to dismiss a dialog box/menu this will create an equivalent of "clicking out of the dialog box" that a mouse user can accomplish and make navigation more equitable for keyboard-only users.

kkoryaka commented 6 months ago

@MattAtDor could you please provide example of the component with the issue? Are you talking about modal component? https://template.webstandards.ca.gov/components/modal.html

hdhillon88 commented 6 months ago

@kkoryaka they saw it with the Hamburg menu or the mobile navigation part

MattAtDor commented 6 months ago

Yes, in "mobile view" or when zoomed in on PC, the Hamburger Menu being open was the discussion with being able to dismiss with [Esc]

Matthew Morgan Department of Rehabilitation Information Technology Services Division Quality Assurance and Testing Services | Web Solution Services Phone: (916) 322-5851

Submit an incident or service request in the IT Service Centerhttps://cador.service-now.com/sp.

[Dept of Rehabilitation Logo]

CONFIDENTIALITY NOTICE: This communication with its contents may contain confidential and/or legally privileged information. It is solely for the use of the intended recipient(s). Unauthorized interception, review, use or disclosure is prohibited and may violate applicable laws including the Electronic Communications Privacy Act. If you are not the intended recipient, please contact the sender and destroy all copies of the communication.

From: hdhillon88 @.> Sent: Tuesday, January 9, 2024 11:22 AM To: Office-of-Digital-Services/California-State-Web-Template-Website @.> Cc: Morgan, @. @.>; Mention @.***> Subject: Re: [Office-of-Digital-Services/California-State-Web-Template-Website] Dismiss menus/dialogs with [Escape] AND graphical "X" (Close) (Issue #1638)

You don't often get email from @.**@.>. Learn why this is importanthttps://aka.ms/LearnAboutSenderIdentification

@kkoryakahttps://github.com/kkoryaka they saw it with the Hamburg menu or the mobile navigation part

- Reply to this email directly, view it on GitHubhttps://github.com/Office-of-Digital-Services/California-State-Web-Template-Website/issues/1638#issuecomment-1883644717, or unsubscribehttps://github.com/notifications/unsubscribe-auth/BFHEHSF65323JWTQACF7ZITYNWKHHAVCNFSM6AAAAABBTSMEDOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQOBTGY2DINZRG4. You are receiving this because you were mentioned.Message ID: @.**@.>>

kkoryaka commented 5 months ago

@extinah this is now updated in dev, please review (added escape and tatting out functionality)

extinah commented 5 months ago

Tested in mobile and in a browser. Escape and tabbing works.

kkoryaka commented 4 months ago

@MattAtDor we just released v6.3.1 release that should have addressed this issue.