Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-25985] TiAPI: Disable accessibility features on Ti.UI.Button by using AttributedString

GitHub Issuen/a
TypeNew Feature
PriorityCritical
StatusClosed
ResolutionFixed
Resolution Date2018-06-21T14:42:45.000+0000
Affected Version/sn/a
Fix Version/sRelease 7.5.0
ComponentsAndroid, iOS
Labelsandroid, ios
Reporternicolomonili
AssigneeHans Knöchel
Created2018-04-24T08:00:15.000+0000
Updated2018-09-28T14:23:04.000+0000

Description

In my apps i use font-icons for: - title of buttons - text of label *Example:* 
var IconicFont = require('IconicFont');
var Icons = new IconicFont({
	font: 'listIcons'
});
var btn = Ti.UI.createButton({
	height : 50,
        width : 50,
	color: 'white',
	font: {
		fontSize: 24,
		fontFamily: Icons.fontfamily
	},
	title: Icons.icon("add"),
	textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
	verticalAlign: Ti.UI.TEXT_VERTICAL_ALIGNMENT_CENTER,
});
If the user active this option _Settings / General / Accessibility / Button Shapes_ , the result is the attached image, an underline on every buttons. I know this is normal, but i would like to know if it was possible to disable this effect. I tried to active this option *accessibilityHidden*, but without result. I also thought about using the *attributeString* (with the param [Titanium.UI.ATTRIBUTE_UNDERLINE_STYLE_NONE](http://docs.appcelerator.com/platform/latest/#!/guide/Attributed_Strings-section-src-37538231_AttributedStrings-Underline)), but it's only for _Label_, _TextArea_ or _TextField_. Info link1: [https://stackoverflow.com/questions/23246543/remove-underline-on-uibutton-in-ios-7](https://stackoverflow.com/questions/23246543/remove-underline-on-uibutton-in-ios-7) Info link2: [https://developer.apple.com/documentation/uikit/accessibility/uiaccessibility]

Attachments

FileDateSize
Schermata 2018-04-24 alle 09.40.58.png2018-04-24T07:43:08.000+000030161

Comments

  1. Hans Knöchel 2018-04-24

    Thanks for raising this! You could expose the native attributedTitleForState: API in the SDK and we'd be happy to review it. Moving to TIMOB to track this. *EDIT*: You could try to: 1. Add the following to your TiUIButton.m 
       - (void)setAttributedString_:(id)arg
   {
   #ifdef USE_TI_UIATTRIBUTEDSTRING
     ENSURE_SINGLE_ARG(arg, TiUIAttributedStringProxy);
     [[self proxy] replaceValue:arg forKey:@"attributedString" notification:NO];
     [[self button] setAttributedTitle:[arg attributedString] forState:UIControlStateNormal];
     [(TiViewProxy *)[self proxy] contentsWillChange];
   #endif
   }
    2. Add the TiUIAttributedString import to the top of the file: 
       #ifdef USE_TI_UIATTRIBUTEDSTRING
   #import "TiUIAttributedStringProxy.h"
   #endif
    3. Use the new property "attributedString" on the button and pass a well configured Ti.UI.AttributedString instance.
  2. nicolomonili 2018-04-24

    I have to modify this file _Appcelerator Workspace / App Name / build / iphone / Classes / TiUIButton.m_ or this one _User / Library / Application Support / Titanium / mobilesdk / osx / SDK_VERSION / iphone / Classes / TiUIButton.m_ ?
  3. Hans Knöchel 2018-04-24

    What do you think? ;-) Spoiler: It's the Application Support one, since the build directory is flushed on clean builds.
  4. nicolomonili 2018-04-24

    Yes, i understood it while i was writing. I'm doing some tests ..
  5. Hans Knöchel 2018-04-24

    I am still not sure it solves it for you. Here is my test case: 
       var win = Ti.UI.createWindow({
       backgroundColor: '#fff'
   });
   
   var text = '<apple-emoji>';
   
   var attr = Titanium.UI.createAttributedString({
       text: text,
       attributes: [
           // Remove underline
           {
               type: Titanium.UI.ATTRIBUTE_UNDERLINES_STYLE,
               value: Ti.UI.ATTRIBUTE_UNDERLINE_STYLE_NONE,
               range: [0, text.length]
           }
       ]
   });
   
   var btn = Ti.UI.createButton({
     attributedString: attr,
     textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER
   });
   
   win.add(btn);
   win.open();
    How can I enable the underlines as part of accessibility?
  6. nicolomonili 2018-04-24

    _Settings / General / Accessibility / Button Shapes_
  7. Hans Knöchel 2018-04-24

    Works like a charm :-).
  8. nicolomonili 2018-04-24

    I can confirm, this edit works! By applying _Titanium.UI.ATTRIBUTE_UNDERLINES_STYLE_ it's possible to remove the underline effect added by the accessibility features -> Settings / General / Accessibility / Button Shapes
  9. Hans Knöchel 2018-04-24

    Cool! I will prepare a pull request and schedule it for 7.3.0.
  10. nicolomonili 2018-04-24

    I was hoping for the next release .. I'll wait, thanks!
  11. Hans Knöchel 2018-04-25

    The next release is already closed for new features. I have added Android parity as well, so it will be worth waiting.
  12. Hans Knöchel 2018-04-25

    PR (master): https://github.com/appcelerator/titanium_mobile/pull/10010
  13. Hans Knöchel 2018-06-21

    [~nicolomonili] The new feature was just added to master (7.4.0), have fun! And it was not moved from 7.3.0 to 7.4.0, but 7.4.0 is basically the new 7.3.0 because 7.2.0 squezzed in for GDPR compliance.
  14. nicolomonili 2018-08-21

    So, it's in the actual 7.3.0.G.A ?
  15. Hans Knöchel 2018-08-21

    it's in the "new new" 7.4.0, because it was moved out to make place for more critical bugs. The capacity of the quality engineering team is limited, so we wanted to focus on Android in that release.
  16. Samir Mohammed 2018-09-28

    *Closing ticket.* Verified fix in SDK Version 7.5.0.v20180927102615 Able to disable accessibility features on Ti.UI.Button by using AttributedString. *FR Passed (Test Steps)*

    Created a new Titanium application

    Added the test case above by Hans in to the app.js

    Ran the program

    Unable to see the button have an underline

    Uncommented Ti.UI.ATTRIBUTE_UNDERLINE_STYLE_NONE

    Able to see the underline again

    *Test Environment* 
        APPC Studio: 5.1.0.201808080937
    iPhone 6 (12.0)
    APPC CLI: 7.0.7-master.4
    Operating System Name: Mac OS Mojave
    Operating System Version: 10.14
    Node.js Version: 8.9.1
    Xcode 10.0

JSON Source