Google Translator Module - Accessibility Improvements for Widget

Created on 9 September 2025, 9 days ago

## Issue Summary

The Google Translate widget generated by the Google Translator module has several accessibility issues that prevent it from meeting WCAG 2.1 standards:

1. **Stray text nodes** appear after the widget initialization that cause screen reader confusion
2. **Missing Bootstrap styling** on the select element makes it inconsistent with form styling
3. **Decorative span elements** are included that provide no semantic value
4. **Google voting input elements** lack proper ARIA labels and titles

## Steps to Reproduce

1. Enable the Google Translator module
2. Configure a Google Translate block
3. Run accessibility testing tools (WAVE, axe, etc.) on a page with the widget
4. Observe accessibility violations related to unlabeled form controls and decorative elements

## Proposed Resolution

Add accessibility enhancements directly to the module's `init.js` file that:

1. **Clean up stray text nodes** that appear after widget initialization
2. **Add Bootstrap form styling** (`form-control`, `input-group`) to the select element
3. **Remove decorative spans** that provide no semantic value
4. **Add proper ARIA labels** to Google's voting input elements
5. **Use MutationObserver** to monitor for dynamic content changes and re-apply enhancements

πŸ“Œ Task
Status

Active

Version

2.3

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States EthanT Sarasota, Florida

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Merge Requests

Comments & Activities

Production build 0.71.5 2024