When using NVDA on Firefox, it reads in row-wise order in React. How can I change the reading order?
Sample code:
<Row1>
<row-item-left>{some content1-left}</row-item-left>
<row-item-right>{some content1-right}</row-item-right>
<Row1>
<Row2>
<row-item-left>{some content2-left}</row-item-left>
<row-item-right>{some content2-right}</row-item-right>
<Row2>
Now it reads, "some content1-left, some content1-right, some content2-left, and some content2-right." I want it to read, "some content1-left, some content2-left, some content1-right," and, "some content2-right."
I use tabindex. It's working fine with tabs, but I don't want to focus elements Also it's not working with arrow keys. Please help me on this.
The reading order is always the same as it appears in the accessibility tree, and the accessibility tree is built from the DOM.
This basic rule can't be changed. CSS has no effect on reading order.
So if you want the content to be read column by column instead of row by row, you have no choice but rearrange your code so that it appears in the right order in the source:
<row-item-left>{some content1-left}</row-item-left>
<row-item-left>{some content2-left}</row-item-left>
<row-item-right>{some content1-right}</row-item-right>
<row-item-right>{some content2-right}</row-item-right>
I leave CSS experts tell you how you can achieve it.
Firstly accessibility isn't about what you want, never try to change expected behaviour.
When using a screen reader it is expected that items flow from left to right, top to bottom in 99% of cases (the way you would read the page normally).
The idea is that a screen reader user gets the same experience as someone who does not need to use one.
With regards to focus, never interfere with that either if it is something that is interactive (a clickable cell, link etc.).
If something is focusable it should also have a distinctive border (this helps users who use tab to navigate due to mobility issues know where their current cursor is placed on your site.) - just an extra tip, not relevant to your question.
The current read order is correct, do not interfere with it.
With regards to using arrow keys that may be useful, just use JavaScript to intercept the key presses and move focus accordingly (give that a go and post another question with a code example if you get stuck.)
Bear in mind you should also provide a way for people to disable this arrow key behaviour as they may have changed the key bindings on their screen reader and that would cause accessibility issues if your JavaScript interferes with their preferred key bindings.
I am not sure why you said you don't want to focus the element, if your custom HTML elements have focus in the first place then adjust those elements (as you must have added a tabindex=0 or some JS to those elements in the first place to make them focusable as <divs> are not focusable by default.)
Related
I am trying to implement multipage functionality with quill. I want to fix the height of each page, and when user reaches the end of page, instead of editor height to grow or scrollbar to appear, I want cursor to go to next page(editor), similar behaviour as observed in Google Docs or Microsoft word document.
I have already added 2 editors in the view, but not having any idea on how to switch to new page as cursor reaches the end of first page.
i come straight from google trying to figure out something similar with quill and as far as i know and as far as i came while researching this specific topic:
to me it seems as if its not possible with multiple editors since as soon as the user wants to select paragraphs/elements over a multi page span you'd have to figure out how to
make the selection actually possible (try to select content over a span of two div elements which both are "contenteditable"-enabled, which was one of my first tries kinda).
spread the selection on multiple editors (you'd have to keep track of how much the user selected and when and how far the selection is within which editor which is kinda tricky)
execute an action over multiple editors which will be especially hard since there is no thing as "shared toolbar" yet (as far as i know)
so i really hope (🙏) the time helped you to find an sharable 🤲 solution to this but as far as i built up my knowledge about quill so far (which is a bit over a few weeks old now).
what i will try in the near future is to add a new module to show a page break and style all other elements accordingly to simulate the look of a page.
TL;DR The title says it, details follow.
I'm having a form like
Bank: Bank of Neverland
Customer ID(?): Peter Pan
except for that it's real and the "Customer ID" is something provided by the bank. The bank may call it differently (so I change the label to e.g., "User name") and to prevent confusion, a lengthy hint may be needed. So I imagine using a question mark-like icon ((?)) popping the hint on click.
There are more fields which need a hint popup. I'd be fine with placing them elsewhere in the row.
However, the InputComponent.lbl is package-private and I can't see any way to attach the icon. I'm aware of TextComponent#hint(String hint), but it only allows for a rather short text, while we sometimes need a rather lengthy explanations (and that's not something we could change).
TL;DR we didn't implement that yet. Label is meant for the hint label not for that. You can probably add a ? button next to the component and show a popup or just add a label below.
What you are looking for is #1 in this image taken from here:
We implemented #2 which should make implementing #1 a bit easier... At least in theory but it won't adapt to the iOS mode of the UI which looks rather different. That was the main blocker for the implementation.
As a short term solution you can just add a SpanLabel below the text component or add a question mark button next to it.
Alternatively you can enhance the error label functionality in our code to support "helper text" which you might show as a popup on iOS or as a floating hint in the bottom of the screen there. Then submit that as a pull request to the project. You can also file an RFE we are under heavy workload so I'm not sure when we'll get around to it.
Is there a way to add a listener on the Form for when the virtual keyboard shows or dissapears in Codenameone?
The reason is because I want to detect this and recalculate the size of the Form. Currently, the sizeChangedListener does not get called when the keyboard shows, and so some components are hidden from view, as I can't recalculate the sizes of the components.
See Display.getInstance().setVirtualKeyboardListener(...)
You shouldn't do that.
Keyboards resize the UI only on Android and don't have that affect on iOS/Windows. We will probably change that behavior on Android as well so relying on it in that way doesn't make sense.
Size changed is called on the form when running on Android otherwise basic stuff wouldn't work. Notice that you shouldn't rely on it for typical code, if you use scrollable containers properly and the right layout things should automatically rearrange themselves correctly.
I suggest rephrasing the question with a sample of your UI/layout and problems including screenshots. E.g. a common issue is placing a text field within a non-scrollable container so the resize logic can't do anything and it fails by making the text disappear.
I'm currently spiking with the WPF RichTextBox before I decide whether or not it can be used in a project of mine.
What I need is to have elements of text representing various objects (other texts or objects), a bit like a WIKI but not quite. Clicking on such a text will make stuff happen, like navigating to other texts or providing additional options.
Anyway, as these little text bits represent other objects I would like to protect them but I have succeeded with this only in part: The user cannot position a caret inside such a text element and edit/delete it but it is still possible to make a selection and delete/replace it, including my custom elements.
Have anyone travelled down this road with the RichTextBox? My latest experiment was to simply record all custom text elements when being part of a selection and then restoring them after the (destructive) edit. That fell apart because I can't find a way to re-insert my custom inline elements (derived from the Run class). The only way I've found to programmatically insert a Run (based) element at a specified position (TextPosition) is via its constructor.
Well, any hints would be greatly appreciated.
You are really looking for a FlowDocument, not a RichTextBox.
Is there a simple way to tell what triggered Click event of a Button apart from setting multiple flags in Mouse/Key Up/Down event handlers? I'm currently only interested in distinguishing mouse from everything else, but it would be nice to handle Stylus and other input types if possible. Do I have to create my own button control to achieve this?
Edit: To clarify why I care: in this particular case I'm trying to implement "next" and "previous" buttons for a sort of picture viewer. Pictures in question may be of different size and buttons' positions will change (so they are always centered below picture). It's quite annoying to follow such buttons with mouse if you need to scroll through several pictures, so I want to keep mouse position constant relative to clicked button, but only if it was clicked by mouse, not keyboard.
Edit2: It does not matter whether the buttons are on top or down at the bottom, since the center can change anyway. "Picture viewer" here is just an abstraction and in this particular case it's important for me that top left corner of the picture retains it's position, but it's out of the scope of the question to go in details. Scaling the picture is not so trivial in this sort of application as well, so I do want to know the answer to the question I asked not going into UI implementation discussion.
if (InputManager.Current.MostRecentInputDevice is KeyboardDevice)
You should instead handle specifically the MouseXXX, StylusXXx, and KeyboardXXX events.
Could you elaborate on why you would care?
Having written many custom controls myself over the years, I cannot recall one instance where I cared how a click event was triggered. (Except for that pre VB6 control lifecycle glitch that fired the got focus-click-lost focus in a different order depending on whether you clicked a button, used an accelerator key, or pressed ENTER as the default).
Personally I find it annoying when people place buttons at the bottom of Windows forms and web pages. Read some of the literature on UI and you will find that most people don't even get that far if they don't find something interesting on the page/form. I like to be able to click next as soon as I know the content is of no interest to me, so keep the nav buttons prominent at the top.
I would put the prev/next at the top of the picture where you can control their position. Dancing those buttons around goes against most opinions on UI consistency. Further creating a different experience for a mouse user versus a keyboard user also goes against most current wisdom on good UI design.
The alternative is to choose a constant max size a picture can obtain on the UI and if it exceeds that scale to fit, otherwise allow it to change freely within a frame. This keeps your buttons at the same place if you absolutely must have them on the bottom.
You could create an enumeration with the different devices, have a global property that you set every time the mouse/keyboard/etc. is initiated, and just refer to this when needed.