Improve responsive and RGAA

Issue fork dify-3570517

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

asterovim created an issue. See original summary.

asterovim’s picture

asterovim commented
Title: Improve responsive (dify widget vanilla) » Improve front-end (dify widget vanilla)
Issue summary: View changes

jykin made their first commit to this issue’s fork.

jykin opened merge request !10

jykin’s picture

jykin commented
Assigned: jykin » asterovim
Status: Active » Needs review

Summary of accessibility improvements:

This patch improves RGAA/WCAG compliance for the dify_widget_vanilla module.

Semantic HTML:

Converted open/close buttons from

to elements
Added proper ARIA attributes to dialog (role="dialog", aria-modal, aria-labelledby)
Added role="log" and aria-live="polite" to messages container

Keyboard accessibility:

Implemented focus trap within the dialog
Added Escape key to close the widget
Focus is restored to the previously focused element on close
Added configurable skip link (can be enabled/disabled in admin config)

Screen reader support:

Added visually-hidden label for textarea
Added aria-label to all icon-only buttons
Added aria-pressed state for feedback buttons
Added role="article" with labels to messages
Added role="status" to typing indicator
Hidden decorative elements from AT (aria-hidden="true")

Visual accessibility:

Added :focus-visible styles for all interactive elements

Bug fixes:

Replaced text arrow character (→) with SVG for proper centering
Fixed duplicate loading spinner animation
Fix responsive close button
Ready for review.

  • jykin committed 04efadb6 on 1.0.x 
    Issue #3570517 by [jykin]: Improve RGAA/WCAG accessibility and...
asterovim’s picture

asterovim commented
Status: Needs review » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

asterovim’s picture

asterovim commented
Status: Fixed » Closed (fixed)