How to make a UISearchBar's bookmarks icon accessible?

Question

I'm trying to improve Voice Over support in an app. I have a UISearchBar. I've set the showBookMarks property to YES. And I've set a custom image with:

[searchbar setImage:icon forSearchBarIcon:UISearchBarIconBookmark state:UIControlStateNormal];

The problem I have is that with Voice Over turned on, there is no way to activate the bookmarks icon. If I enter text, the "clear" icon appears and it can be selected and activated as expected. But once the text is cleared and my bookmarks icon appears, it can't be selected. No matter where I tap, the Voice Over rectangle always surrounds the entire search bar, including the icons.

I've tried setting the accessibilityLabel and the accessibilityTraits properties on the UIImage for the icon. I've set the UIImage's isAccessibilityElement property to YES. Nothing seems to work.

Does anyone know what steps are required to make the bookmarks icon in a UISearchBar accessible?

Here's the complete code for the search bar:

UISearchBar *bar = [[UISearchBar alloc] init];
[bar sizeToFit];
bar.autoresizingMask = UIViewAutoresizingFlexibleWidth;
bar.placeholder = @"Search listed items";
bar.autocapitalizationType = UITextAutocapitalizationTypeNone;
bar.autocorrectionType = UITextAutocorrectionTypeNo;
bar.keyboardType = UIKeyboardTypeDefault;
bar.showsBookmarkButton = YES;
bar.text = @"";

UIImage *icon = [UIImage imageNamed:@"bookmarks.png"];
icon.accessibilityLabel = @"Bookmarks";
icon.accessibilityTraits = UIAccessibilityTraitButton;
icon.isAccessibilityElement = YES;
[bar setImage:icon forSearchBarIcon:UISearchBarIconBookmark state:UIControlStateNormal];
[bar setPositionAdjustment:UIOffsetMake(-1, -1) forSearchBarIcon:UISearchBarIconBookmark];

Additional Info:

I should mention that the search bar is used with a UITableViewController which is connected with a UISearchDisplayController. The search bar is being set as the table view's headerView.

And all of this is done in code. No storyboards or xibs are involved.

Answer 1

After a bunch of debugging, I have found the answer. In order for Voice Over to recognize a custom icon for the bookmarks icon of a UISearchBar, the icon must be exactly the correct size.

The images used must be 40x29px (80x58px for the retina version). Any other size and the icons don't get recognized by Voice Over.

My images were 38x31px (and 68x62px).

The code I posted in my original question is all correct. Once the images were updated in size, everything started to work as expected. The only change in code was the removal of the call to setPositionAdjustment:forSearchBarIcon: which wasn't needed anymore.

I can't imaging why such a tiny difference in icon size would be the difference between Voice Over working with custom icons and not working. But there it is. I hope this helps someone in the future.

Answer 2

I've run the code in your question, and the bookmarks button appears to be accessible via VoiceOver.

Could there be something else that's interfering with your interface? Any invisible views that might find their way on top of the bookmarks button? Are you setting a custom clear button? Any other details you can provide?

However, it's true that it's not using the accessibilityLabel that you're passing it; it just uses "Button", which sucks. I'd say it's probably a bug in UIKit – you should file a bug.