9

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.

rmaddy
  • 314,917
  • 42
  • 532
  • 579

2 Answers2

5

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.

rmaddy
  • 314,917
  • 42
  • 532
  • 579
  • @downvoter please explain the downvote. I posted the exact answer to the problem that I had. This is an undocumented requirement to make Voice Ovet work properly for this case. – rmaddy Mar 23 '13 at 19:30
  • Please explain where you found that UISearchBarIconBookmark size should be 40x29px? Is it a minimal size, a maximal size, an exact size or an exact ratio? I was able to make it work with some other sizes, but I don't know which one is the recommended one. – Cœur Aug 21 '13 at 14:04
  • I found it by trial and error. My original size didn't work. When I tried the specified size, it started working. I didn't test other combinations so it is certainly possible some other sizes will work. If you know of other sizes that work, please post them so others can benefit. – rmaddy Aug 21 '13 at 14:18
1

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

enter image description here

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.

Ash Furrow
  • 12,391
  • 3
  • 57
  • 92
  • 1
    Thanks. One thing I neglected to mention (and I'll update my question shortly) is that the search bar is being used with a `UITableViewControler` and a `UISearchDisplayController`. The search bar is set as the table view's `headerView`. I guess I need to create a new project and add pieces one at a time and see what makes it stop working for me. – rmaddy Mar 22 '13 at 15:14
  • Good idea - could be something in the `UITAbleViewController` that's interfering with VoiceOver. – Ash Furrow Mar 22 '13 at 15:16
  • Did you actually set a custom icon for the search bar? I created a simple test project. If I use the default bookmarks icon, the icon button is accessible. But as soon as I apply my own custom bookmarks icon, it is no longer accessible. – rmaddy Mar 22 '13 at 20:21