I have an email client application, and I'm changing the way we show attachments for an email. Previously we had them up at the top of the email viewer in a scrollable list; now we're moving them so that they're displayed as a list at the bottom of the email content. For reasons related to the UIWebView control, it was necessary for me to implement these attachments as HTML code that is programmatically appended to the HTML of the original email (instead of doing them like a normal person would, where each attachment is just a UIView in iOS).
I'm now trying to configure accessibility for these HTML elements and running into some problems. Each "attachment" consists of a button-like background which is actually constructed from 3 images: one for the left side of the button, one for the right side of the button, and a middle portion which is stretchable (this allows the button to stretch in width without distorting the edges). There's also a paper clip image and a right-arrow image laid out on the "button", and two sub-DIVs for displaying the file name and its size.
The problem is that I want to make the outer DIV that encompasses all of these sub-elements to be the only thing that is focusable by Voiceover, and I want to be able to control what is announced by Voiceover for this DIV (so that I can include the file name, its size, whether or not it's currently downloading etc.). However, it seems that the only things Voiceover wants to focus are the three-subimages that make up the button background (and they're announced by their filenames) and the two sub-DIVs that show the filename and the file size. If I hide all of these sub-elements from Voiceover by setting aria-hidden="true", then nothing gets focused at all. If I set aria-hidden="false" on the outer DIV, the DIV is still not focused.
Is there any way to make a DIV focusable by Voiceover even when it doesn't contain any inner HTML content that Voiceover would focus on its own? I think I could hack a solution where I stretch a completely transparent PNG over the DIV and make that the only inner element with aria-hidden="false", but even then I'm not sure how to get Voiceover to read something other than the file's name.
Update: OK, it seems I can sort of achieve this by adding role="button" on my DIV while keeping all of the sub-elements aria-hidden="true". The entire DIV is now focusable, but it still announces itself as a "button" (I'd like it to say "attachment" instead as the type, but I can live with "button" if necessary). The main problem I'm now encountering is that Voiceover seems to ignore the aria-label property, and instead reads out any text that is contained in my sub-DIVs. Is there any way I can get Voiceover to read the aria-label property that I explicity set instead?
