I'm facing a very weird (& blocking) issue using diagrams.net webapp.
I'm trying to add some nodes in the Format Panel. I created a new tab in this panel & added in it some new inputs.
There are text inputs, checkbox inputs & textarea.
But the behavior is absolutely not the expected one.
For text & cb inputs, everything works fine, but textareas behavior is... at least very weird:
The field can't get focus by mouse clicking (remember that click works on other inputs). The only way to set the focus on it is by using JS focus() method.
Text inside the tag can't be selected by mouse. If element has the focus, text can be updated. Moreover, even if text can be changed, text cursor cannot move from the end of the text.
Textarea box is not resizable. There is the bottom-right arrow to resize it & I added the "resize" value to be sure but the feature doesn't disable but I juste can't. BUT ! If I set the attribute "disabled" then I can resize the box. Unfortunately, I can't disable the textarea since I want to put it because I need to write in it.
I can't show you code for now (it's just a new node creation using document.createElement) but you can easily test this: go to drawio webapp & when the webapp is loaded, use the Inspector in the developer tools to add a new textarea node in the format panel (div with ".geFormatContainer" class) : element is not focusable with the mouse, text inside it is unselectable & box is not resizable as long as "disabled" attribute is not set.
I added a click listener in the component to check if click did something & it does, but it doesn't give the focus to the element (document.activeElement says that body is focused -_-) so I think there is something in mxgraph which avoids the element's classic behavior. But what ?
Related
Typically a combobox widget is an input field that launches an associated popup with a bunch of suggestions in the popup. In desktop browsers using keyboard, while the focus stays with the input field, pressing Up/Down arrow keys, the selection within the popup can be changed. Pressing ENTER key populates the input field with current selection in the popup and closes the popup.
For accessibility purpose, the input field is marked role="combobox", the popup is linked with the input field via aria-owns. The AT are indicated the current selection via aria-activedescendant.
While this setup works great in desktop browsers with tools like JAWS/NVDA etc., there seems to be a major issue with voiceover on iOS. On swiping the finger, the virtual cursor moves to the next element in the page from the input field, though I would expect with aria-owns set, the focus to move to the first suggestion item or to the popup.
Any suggestions on how such a combobox widget can be made accessible in iOS with voiceover?
PS: The popup and input field are not siblings in the DOM order.
It sounds like you are creating a custom combobox. If you use the native <select>/<option> elements, the combobox works correctly on ios/voiceover. If you are creating your own, follow the guidance on https://www.w3.org/TR/wai-aria-practices/#combobox. You mentioned several ARIA attributes so perhaps you're already following the advice on that page.
Swiping right with voiceover will move the focus to the next element in the DOM. If your dropdown list is hidden, then focus won't move to it. Double tapping on your <input> should display the dropdown list.
I am using an fr:number control with a suffix.
It is relevant at the time the form is displayed and is editable.
On clicking (un-ticking) a tick box, the control is hidden according to custom XPath.
However, when the the tick box is re-ticked, the control reappears but on attempting to edit the text it is readonly.
This behaviour is only apparent in IE (IE11) and when the control has a suffix.
Is this a known bug?
I'm tring to make come UI test using Coded UI. Unfortuanley, It seems to not have access to all DOM elements in browser.
I want to assert value of one text block in form, and by"Add Assertion" the lowest element i can assert is form itself. All tags contained by form was flatten and putted to "id" property in "Add Assertion" widnows, like in the screen below:
Is there a way to assert only one tag in form? In this case i want to assert value "Szczegóły przesyłki: 0--1526203258"
It depends on how your web page is designed. From the image shown it it not clear what field contains the Szczegóły przesyłki: 0--1526203258. However, given (1) the scroll bar and (2) that the Id field is shown and is empty, it is probably the Inner Text field.
Given the number of lines shown above and below the required text you are likely to have selected a larger than necessary part of the screen. When creating an assertion is it often best to move the cross hairs tool around the screen to find the smallest control that contains the required field. Such a UI Control will have no child controls.
I have found that occasionally the Coded UI cross hairs tool loses its place and leaves all four (UP, DOWN, LEFT and RIGHT) arrows grey and inactive, as shown in the screenshot. When this happens try clicking the refresh button located between Add Assertion and the arrows. Some of the arrows should then be shown as black and active. If the DOWN arrow is grey (inactive) and some of the other arrows are black then the properties panel shows a UI Control that has no child components. You should be able to find a UI Control that contains only the required text.
Is there a simple way to have a default text in the textbox using jQueryUI's autocomplete ?
I have tried using data-placeholder but it doesn't seem to work.
I have searched online, and people suggest using the textbox value to display the text, and clear it on focus. But then I would need to change the font style just for the default text, and check onKeyUp when the text is manually erased etc...
Is there no easier way to do this ? or am I missing something ?
A lot of people will use a span that is positioned to be over the text box. When the text box gets focus then you hide the span. When the text box blurs and has a value, you don't show it. If it doesn't have a value then you can show it again.
You can style the span however you want independently of the text box so you would not have to change the font style on the text box itself. You would have to subscribe to the focus and blur events, but it would be much easier if you created a jQuery plugin to do this. In fact, I'm sure there are ones that already exist that do this.
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?