I am using a slickgrid in angularjjs. I have set the "enableTextSelectionOnCells" and "enableCellNavigation" to true. Now when i navigate the grid using keyboard arrow keys, the scrolling is quite weird. To scroll using keyboard arrows, i first click a cell and then press down or up arrow, the current active cell gets changed upon pressing up or down key but it is not proper, meaning the next active when clicking down key is not the immediate next cell(downwards) - Just like this example https://mleibman.github.io/SlickGrid/examples/example-spreadsheet.html
I want to excel like keyboard navigation in slickgrid, how can i achieve that.
After a week, I found that I was using a chrome extension called "smooth scroll" which used to override the behavior of slickgrid scroll. I removed the extension and scroll is working fine using keyboard arrows.
Related
I have a list of elements and a sticky button, fixed at the bottom of the screen. So when the user scrolls down in the list the button stays at the bottom. This works perfectly fine but when I open up my keyboard, the button is pushed up as well, hiding the other elements which are on the top of the screen.
Can I place my button somehow that it remains sticky on the screen but when the keyboard is opened up it doesn't get pushed up?
My current (hacky) implementation is that I am hiding the button when the keyboard opens up but I don't like it very much.
you must be using any library for keyboard like react-native-keyboard-spacer or etc so you can disable that for that specific screen, another hacky implementation #mikasa
i assume you are wrapping your component with a KeyboardAvoidingView, that would explain your button getting pushed up, so you should consider passing false to "enabled" prop when your keyboard is open, this will cause the keyboard overlay your button. you can check out the docs here https://reactnative.dev/docs/keyboardavoidingview#enabled
In Ion.RagerSlider plugin the interval bar is clickable.
This is an issue on mobile devices when the user accidentally click the element when he's trying to scroll.
How can i disable the click event on interval bar?
I was unable to find the solution in the official documentation.
I am facing the same issue where, if tapping outside the selected range on the bar, the whole range gets shifted across to the tap location. Depending on the location and size of the bar on the screen, it is quite easy to inadvertently do this and lose the slider values.
While it is not officially supported by version 2.3.1, I found that removing the binding of touchstart and mousedown events to the range line did the trick.
https://github.com/IonDen/ion.rangeSlider/blob/2.3.1/js/ion.rangeSlider.js#L686#L687
A more generic approach could be to create a new config parameter named something like disable_line_touch with a default value of false, and only skip the above binding if its value is set to true.
WCAG has a great design pattern for implementing Tabs with Tabpanels here
It uses a "roving tab index", and keyboard arrow keys to cycle between tabs.
This works great, but I recently received a request to make a tab/tabpanel widget that only shows one tab at a time, and has "previous" and "next" arrow buttons to cycle through the tabs.
Visually, the arrow buttons are on either side of the active tab. But in terms of tab-order, the WCAG design pattern specifically states that the tabpanel associated with the active tab should follow it in tab order.
Would it violate any accessibility rules to add these new arrow nav buttons to the widget, as long as I assure that their tab order is before or after the tabs/tabpanels?
I figure the keyboard functionality could remain as it currently is (using arrow keys to cycle between tabs)
I'm a blind screen reader user.
I would maintain left/right arrow keys to navigate through the tabs as usual, and don't make your arrow buttons focusable at all.
My reasoning behind this is the following:
Your arrow buttons control scrolling and scrolling is pure visual stuff
Usually, as a screen reader user, we don't have keyboard access to buttons within scrollbars. It is completely transparent for us.
IF you take a multiline text area for example, the down arrow always goes to the next line, regardless of whether the cursor is currently at the bottom of the screen.
We don't have anything special to do, and especially we don't have to manually press the down arrow button of the scroll bar. The cursor goes to the next line, and the text content is automatically scrolled one line down if needed.
The same things happen for a tab control if there are too many tabs to fit on a single line.
In that case, in popular GUI desktop libraries, you can choose to show scroll arrow buttons, or make the tabs spand multiple lines.
It never change the way to navigate: left and right arrow keys always go to the next or previous tab, regardless of what has to happen visually.
As a bonus, usually, when you click on a scrollbar button, the focus doesn't go to the button; it immediately goes back to the real content, i.e. the text in the text area, or the currently active tab for a tab control.
This is one or more confirmation that scroll buttons shouldn't enter in tab order.
As another bonus, given that you are implementing scroll buttons on your own, you should also react to mouse wheel.
I am working facing issue in auto suggest with scroll bar. I have to make scroll bar movable on arrow key down, mouse wheel its works fine for me. If I use document keydown event its moving my browser scroll.
I just looking for a functionality with arrow keydown scroll should move. If I click inside the div and try to move scroll bar with arrow keydown its works but if I am not clicking inside div, since document is not clicked scroll bar doesn't work.
I used slimscroll and currently working with enscroll-0.4 plugins but not able to make it fixed. Feel free to ask if you are not clear about my question.
It will be really helpful if anyone have a solution for this issue.
I am working with iScroll for an iPad web-app. When a user touches the next button (on top of the keyboard) focus jumps to a form element on another slide it breaks the scroller.
I have tried putting each slide in a separate form tag so it would grey out "next" when the end of the form is reached. This yielded no results and the button still jumps across slides.
How can I remove the Prev/Next buttons or at least define boundaries for it?
I've been trying to come up with an answer myself for a few days now. It seems the next/back buttons traverse all input elements visible on the page (they don't even have to be in the same / any form).
The best solution I've been able to come up with is to disable the input elements you don't want traversed.