Skip to content

a11y: Focus is lost on many button actions #589

@t-hamano

Description

@t-hamano

What problem does this address?

There are many issues where focus is lost when a button is clicked. I believe the reasons for focus loss and how to fix them are as follows:

  • The button cannot be focused because the disabled prop is true. This can be addressed by adding the accessibleWhenDisabled prop.
  • When the button is clicked, it disappears. In this case, we should explicitly focus on the related interactive element.

What is your proposed solution?

The following is a list of potential issues detected by the AI. We need to evaluate whether these are actual problems and make corrections.

A. disabled exists + no accessibleWhenDisabled

Button Location
"Yes, Purge All" SettingsPanel.tsx:45 — Danger Zone of AI Request Logs settings
"Cancel" (delete confirmation) SettingsPanel.tsx:54 — Same as above
"Generate featured image" GenerateFeaturedImage.tsx:80 — Editor Featured Image panel
"Generate Summary" (ToolbarButton) SummarizationBlockControls.tsx:49 — Block Controls
"Generate Summary" SummarizationPlugin.tsx:84 — Post Status Info Panel
"Generate/Regenerate" (Toolbar) TitleToolbar.tsx:208 — Title Toolbar
"Generate/Regenerate" (Modal) TitleToolbar.tsx:245 — Title regeneration modal
"Suggest Tags/Categories" SuggestionPanel.tsx:58 — Content Classification Panel
"Suggest again" SuggestionPanel.tsx:150 — Same as above
ToggleControl (Connector approval) ApprovalMatrixCard.tsx:98 — Connector Approval Matrix

B. Conditional rendering causing full disappearance

Button Location
"Generate/Regenerate Alt Text" AltTextControls.tsx:239 — Image Block Inspector
"Generate/Regenerate Alt Text" MediaEditorAltTextControl.tsx:113 — Media Editor
"Apply Editorial Updates" EditorialUpdatesPlugin.tsx:28 — Post Status Info
"Generate/Regenerate excerpt" (panel) ExcerptGeneration.tsx:42 — Excerpt Panel
"Generate/Regenerate excerpt" (inline) ExcerptInlineButton.tsx:24 — Excerpt Link Area
"Generate/Regenerate Summary" (Toolbar) SummarizationBlockControls.tsx:37 — Block Controls
"Generate/Regenerate Summary" (Plugin) SummarizationPlugin.tsx:66 — Post Status Info
"Generate featured image" GenerateFeaturedImage.tsx:73 — Featured Image panel
"Edit/Generate Meta Description" MetaDescriptionPanel.tsx:74 — Sidebar Panel
"Generate" (Inline Modal) GenerateImageInlineModal.tsx:126 — Image Generation Modal
"Generate" (Standalone) GenerateImageStandalone.tsx:123 — Standalone Image Generation
"Suggest Tags/Categories" SuggestionPanel.tsx:57 — Content Classification

Metadata

Metadata

Assignees

No one assigned

    Type

    No fields configured for Bug.

    Projects

    Status
    In discussion / Needs decision

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions