Summary
Sorry, I don't know whether this is a Twitter bug or JAWS, but it manifests using JAWS only so I thought I'd start here first. Apologies if it turns out to be a Twitter thing.
Essentially, JAWS is not reading the button label for the "Add emoji" and "Add a GIF" buttons in Twitter's compose DM (Direct Message) modal when you use keyboard Tab key to tab to it.
It only announces that there is a menu (due to aria-haspopup attribute) but not the text within the inside the element. Code for the button element seems correct (it has offscreen text) so it could be an inheritance problem...? Or since it's reading the menu role, a conflict with aria-haspopup attribute?
I have verified that this problem does not exist in NVDA + Firefox nor VoiceOver and Safari.
Expected result
When tabbing through the compose message modal, JAWS should read the accessibility text as coded in the offscreen within the button.
Actual result
JAWS announces only "button. menu. press space to activate the menu".
Example
- Using the configuration listed below, visit twitter.com
- Login with an account that has at least one follower
- Navigate to the follower's profile page (click "followers" link > follower's name link)
- Click on the "Message" button to send a Direct Message (DM) to the follower
- On the compose message overlay, use the keyboard Tab key to to navigate to the Add emoji button (visually positioned within the message text-entry field), and the Add a GIF button positioned to the right of the text-entry field.
- Observe what JAWS reads for each button
Additional Information
Code for the "Add emoji" button:
HTML:
<button type="button" class="EmojiPicker-trigger js-dropdown-toggle js-tooltip u-textUserColorHover" data-delay="150" aria-haspopup="true" data-original-title="Add emoji"> <span class="Icon Icon--smiley"></span> <span class="text u-hiddenVisually"> Add emoji </span> </button>
CSS for hiding the button text offscreen:
.u-hiddenVisually { border: 0 !important; clip: rect(1px,1px,1px,1px) !important; font-size: 1px !important; height: 1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; }
JAWS version and build number
Have reproduced in JAWS 2018 build 1710.42 as well as JAWS 18.0.0350
Operating System and version
Windows 10 Professional (10.0.16299 Build 16299)
Browser and version:
Internet Explorer 11 (11.14.16299.0)