While working on a website that requires accessibility standards, I noticed that the select field that TinyNav.js creates did not have a corresponding label. I checked the TinyNav.js documentation and saw that it provides an option to have a label, so I added that functionality to this module. The label is hidden with CSS by default.

See the attached patch.

CommentFileSizeAuthor
#3 tinynav-add_label_functionality-3-D7.patch5.44 KBBrightBold
tinynav-add_label_functionality-1-D7.patch4.97 KBTyler the Creator
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Tyler the Creator’s picture

Tyler the Creator CreditAttribution: Tyler the Creator commented
Issue summary: View changes
FileSize
tinynav-add_label_functionality-2-D7.patch5.36 KB

Had to fix the fork.js code to add an ID to the select field.

btopro’s picture

btopro CreditAttribution: btopro commented
Issue summary: View changes

To be clear, this would only impact the accessibility of those using mobile phones or those hitting mobile display mode on your site. That said, we still take accessibility seriously. Patch looks clean and makes sense while conforming to Drupal standards and appears that it would resolve the current accessibility issue.

Some confirmation from other testers that this doesn't mess with existing designs while ensuring accessibility is met would help get this pushed ahead faster. Some confirmation and I'll push this to reviewed and tested.

BrightBold’s picture

BrightBold
she/her
Primary language English
Location Boston, MA
CreditAttribution: BrightBold commented
Assigned: Tyler the Creator » Unassigned
FileSize
tinynav-add_label_functionality-3-D7.patch5.44 KB

I also came across this issue on a website that needs to meet accessibility standards. The patch in #1 applies cleanly on 7.x-1.3 but needed to be rerolled to apply on dev. It had no unexpected effects. You can't tell visually that any change has taken place (because the label is styled display: none), but the TinyNav selectbox now meets WCAG and 508 standards when tested with the WAVE toolbar. Yay! Thanks @Tyler the Creator for this accessibility improvement.

So I would mark this RTBC except now someone needs to QA my reroll. I had to manually fix a conflict in line 25 of tinynav-drupal.js so please make sure I did that right — I added , context to the line in the original patch so it now reads:
$('label.tinynav_label, select.tinynav', context).wrapAll('<div class="tinynav-wrapper"/>');
so if that wasn't correct it should be fixed.