Screen readers unable to read options of `vue-search-select` - vue.js

I inherited a vuejs project. People using screen readers as assistive devices complain that their screen readers are unable to read the options in drop down menus that were made from vue-search-select. Here is how you can reproduce the issue:
Install a screen reader such as NVDA.
Turn on NVDA screen reader.
Go to https://vue-search-select.netlify.app/#/model
Tab to a search text field.
Confirm drop down of results appear.
Press the down arrow key to focus on any of the search result items.
Confirm the NVDA says the word "Blank" instead of actually reading out the contents of the selected item.
Here is a 10 second clip to that demonstrates steps 3 of 7.
https://www.youtube.com/watch?v=Nxx1k1oKETI
How do you modify vue-search-select such that in step 7, the screen reader will read out the contents of the selected item instead of reading out the word "Blank"?
Right now, as a temporary solution, I'm trying to write a setTimeout function that will automatically add the appropriate meta data to force screen readers to read out the content. But I'm not sure how successful this approach will be. I prefer an approach that is idiomatic to vue-search-select.
I tried adding a customAttr like so:
<model-select :custom-attr="ariaAttrs" />
function ariaAttrs() {
return function() { return '" aria-label="hello" tabindex="0'; }
}
Although the attributes do appear in my developer console's inspector, my screen reader still does not read out the options.

It seems custom-attr will not help you as it does not allow you to add any attr you want - anything the function returns is just placed as a value of data-vss-custom-attr attribute
Any decent Vue library with similar functionality would offer a slot to customize rendering of menu items, but this does not. Plus it doesn't seem to be maintained for a long time so maybe it is a time to look for an alternative....

Related

React native picker long list handler

I have a long list of company names need to be displayed in the picker dropdown and it's causing the app to freeze. I am aware of the infinite scroll if it's viewing the content, where you fetch a limited size of the data from the server side and load more as the scroll reach to the bottom. But does it apply the same concept for a dropdown picker?
I am using the library #react-native-picker/picker and considering the behavior of the component I have no idea how to handle it.
I haven't done anything on my codes yet. Currently it's fetching all the listing from the server side and dump all the data in the picker.
usually it's best practice for large select list to create a modal screen which open up by clicking on the selectbox and there you provide a search box on top and show list using FlatList as it's good for large set of data and will not freeze your screen while rendering.
Check out this
This issue 2850 mentioned something may help you and to be clear there was a solution mentioned by M1K3Yio
please check the code using react-window in this link !!

Programatically disable Lazy Loading or infinite scroll with jQuery in Pinterest?

NOTE: New to this forum (UX/User Experience), so please let me know if this would be better in a different category. I searched Stack Exchange for "pinterest" and this forum seemed to have the most results. Thanks!
Hi guys. I'm writing a jQuery gist to grab links of all the images pinned to a given board in Pinterest. However, I've been running into the problem of having to repeatedly keep scrolling because all the results are not displayed on the same page. With the trendy "infinite scroll" or "lazy load" feature, one has to keep scrolling to the bottom without actually knowing if they are anywhere close because it seems to depend on your zoom percentage in your browser window and your window size as well, as to how many items display on your screen. I've been searching this for hours to no avail.
Searches I've already done keep returning non-productive results
The results I get when searching for
"Pinterest how to disable lazy loading" and "Pinterest how to disable infinite scroll"
keep returning the opposite of what I am looking for -- incorrect results for my purposes are anything like:
"How to add infinite scroll to my website",
"20 Useful Pinterest Tools",
or anything to do with adding infinite scroll.
The Problem: Infinite Scroll/Lazy Loading makes it hard for me to use browser plugins like jquerify (Chrome) and FireQuery (Firefox)
The issue for me is that I want to be able to view all my pins on a given board at once. Then I can use jQuery to manipulate all images on the page. Currently, infinite scroll makes it hard to keep track of where I'm at. I've tried stuff already by it's late at night and hard to remember everything. The important find was that in page source, Pinterest is using a "lazy" function. Here is what I found:
P.lazy = {
onImageLoad: function(a) {
var b = LOADED_CLASS;
P.overlap.isOverlappingViewport(a) && (b += FADE_CLASS);
a.className += b
}
};
This is just starting to be a deeper rabbit hole. I've checked for plugins to "remove", "disable", or "bypass" lazy loading, but haven't found any ... only those for adding it in.
Thanks in advance for your kind assistance and Cheers.
Pinterest loads cards via Ajax. When you scroll to the bottom of a page, browser javascript fires an Ajax call to load the next page full of cards.
This means it's not really possible to "disable" the infinite scrolling feature.
A few possible approaches:
Depending on how you're instantiating the browser, you might try setting or spoofing the window dimensions to a very large height. Pinterest may detect that height and attempt to load a window's worth of images, which may be enough to cover the feed you're trying to scrape.
If #1 is not practical for you, you can use javascript/jquery to keep scrolling the browser down until it has finished loading all the images. There are several ways to do this, since you are injecting javascript into the browser session.
(a) You can do this the "dumb" way with a loop that sets a timeout (setTimeout), then scrolls to the bottom (scrollTo()), then keeps going until the window stops scrolling and that comprises a kludgey auto-detect for the bottom of the page load.
(b) a more sophisticated approach would be to implement a listener for pinterest's ajax load function, (see the code, but it's a GET request to URL https://www.pinterest.com/resource/UserHomefeedResource/get/). An ajaxComplete() jQuery handler may help you detect the completion of a page load request so you can scrape the new images loaded.
Hope that helps

Flag module - link's position change (Drupal)

I've just installed Flags module and it looks awful when on the bottom I see "Flag this item" link. The only thing I've found in configuration is enabling it to show as normal link. Still I haven't found how to change position of this link. Is it even possible to change link's place? I have installed CCK Blocks but it doesn't give me any option to get rid of it. If someone know or suspect what's possible - please help me.
Try the Display Suite module, this module is integrated with many modules like flag, title etc...
Display Suite allows you to take full control over how your content is displayed using a drag and drop interface. Arrange your
nodes, views, comments, user data etc. the way you want without having
to work your way through dozens of template files. A predefined list
of layouts (D7 only) is available for even more drag and drop fun!
https://drupal.org/project/ds
You can move and generate custom layouts for the fields/properties on the entity display formatter: teaser, full...

Embedd scrollable document faster than PDF possible?

I have a page of about 10 embedded PDF docs. My question is there another option that would use smaller file sizes or something so they don't bogg down the page when visited? Even convert PDF to something else if possible. Right now they are all in an accordion jquery and run with Scribd. Maybe something similar to this would work.:
scrolling text box
If you want the jqueryui to download different data for each tab you need to put an empty div inside each section and then set an on open (I am not familiar with jqueryui but maybe the activate event?) and create an ajax call to get the relevant pdf and save it to the empty div.
There are lots of questions about ajax in jqui accordion here here and here for example.

Where can I read how to make web notifiers such as the StackExchange at the top left side of StackOverflow screen?

I'm not even sure what the name of that is to be able to make a search... but I would like to make those kind of things. Facebook has that too with the messages, notifications and friends requests. Thanks
I'm not sure if you expect anyone to give you a complete tutorial with source code included? :) You should probably do some digging around yourself, since a concrete answer on this could mean to write a few pages :)
How can you dig around?
Thé tool for a job like that is Firebug (IMO).
With bigger tasks like these it makes sense to try to split it up in smaller pieces.
Let's say you go for a widget like the user profile popup on SO.
you need some HTML to display in a popup: right click on any html element on the popup and click the 'inspect element' menu item. This brings you to the HTML tab in firebug. This allows you to figure out how the HTML is structured
you need some CSS to style that popup: when you're browsing the html structure, you might already have noticed that on the right side of it is the CSS that is applied to the active element
you might want to use some animation effects: for that you could use jquery. Have a look here to find out more on which effects are available and how they can be triggered. Fading is used in the profile popup on SO.
then you might ask yourself the question where SO get's that html structure from, right? To find out more about which server calls are made you can use the 'NET' tab in Firebug. (When you hover over your user name (only the first time?), then you should notice there's a call made to something like: http://stackoverflow.com/users/profile-link-stats?_=someLongNumberHere
In firebug you can then inspect the request and response. You should notice that the response is some HTML structure. This HTML structure is then inserted into the DOM.
Sooooo you can kinda glue it all together now:
the user hovers over his user name
the hovering triggers a server call (see step 4): use jquery hover to attach a handler to the user link. (subsequent hovers don't trigger that server call, so there needs to be a check to see if that profile popup was already loaded or not)
when the server call successfully returns (see jquery get), the returned html is inserted into the DOM and a fadeIn effect is triggered.
it seems a mouseout is used to fadeOut the popup
I HOPE this is the answer you were looking for. It took me a while ;)
You probably need to check out stackapps