i'am trying making my web application (Vue + Tailwind) more accessible but i'am having lot of problems undestanding how to use all the aria- attributes.
In this case i have something like this
< div v-for="_class in classes" :key="_class.id">
< router-link
:to="`/user/classes/${_class.id}`"
:aria-labelledby="_class.id"
>
< p class="hidden" :id="_class.id">
Select class {{ _class.name }} , {{ _class.code }} ,
{{ _class.type.replace("_", "") }}
< /p>
< div
class="py-8 px-10 bg-white text-gray-800 rounded-xl w-full sm:w-350 md:w- full shadow-lg h-full"
>
....content of the div
I'd like that when the link is focused only the description of < p> is read but screen reader keeps on adding the word "link" at the end of the description because of the router-link focus,how can i disable this? And second and more important, when a link is pressed and navigation leads to the following page, screen readers reads all of the content of inner div inside the router-link. Can someone help me understand how to disable this behaviuor?
You have two questions:
How to prevent the screen reader from saying "link".
Answer: You don't, or rather, you shouldn't. Hearing "link" is telling the screen reader user that you have a link so they know what the expected behavior will be when they select it. Are you saying the user shouldn't know what type of object they're on? You can do that with role="presentation" but if you do that on a link, you will create a WCAG 4.1.2 issue.
How to prevent all content from being read.
Answer: That's a screen reader setting. When a page loads, the screen reader user has the option to have the entire page read by default or to just read the element that has focus. It's purely a user decision and you should not try to force anything otherwise.
However, you also said the "screen reader reads all of the content of inner div inside the router-link". I'm not sure what a "router link" is, I'm not a vue or tailwind user, but with normal links, <a>, the link that launched the navigation should not be read after the user has navigated to the new location. Are you saying your link text is announced after navigating away from it?
Related
I'm trying to create a link on my vue app to local pdf files. Right now here's my problem.
My pdfs are located in assets/static/ and presently linking to them like this.
<template>
<div id="forms" class="view-wrapper">
<h3>Downloadable Forms</h3>
Claim Form
</div>
</template>
This brings up a link on the page, but when I click it, I'm taken to a blank page on my app with just the navbar and footer and nothing in between. I'm hoping to have it bring up the document in the browsers pdf viewer in another tab. Some help would be greatly appreciated.
Edit: SOLVED: #dan helped me realize that I just had to use one dot to access my assets folder.
To render a pdf in the browser use an <iframe src="path-to-pdf" />. Unless you're binding reactive data to the element you don't have to do anything different in vue. Check out https://stackoverflow.com/a/52644970/6890774 this is a similar issue.
Faced such a problem - I send data to the props of the /router-link/ tag, when I click on the link, I go to the article, it gets the data, everything works. Well, if you press the "back" button in the browser and then "forward" there will be no articles, there will be empty fields without data. How can this be avoided?
This is link to the article
<h3 class="database-article__title">
<router-link
:to="{name : 'article',params: {
id: item.id ,
type:item.type ,
name: item.name,
text: item.text,
author: item.author,
isFavorite: item.isFavorite
}}"> {{item.name}} </router-link>
</h3>
Little part of article-template.vue
<div class="content-type marketing">
{{$route.params.type}}
</div>
<h3 class="database-article__title">
{{$route.params.name}}
</h3>
<div class="database-article__text">
{{$route.params.text}}
</div>
Once again, the data transfer is good, when you click on the link, everything is displayed. The problem is that when clicking on the buttons in the browser "back" and "forward" - the browser history is not saved.
Does anyone know the solution to the problem, or where i can read how to solve it?
Thanks!
My guess is that your article route does not specify any of those params in its path. When you click the link, vue-router will remember the params object you specified in the <router-link> and will be accessible through $route.params in the article component.
However, when you click the browser back then forward buttons, the transition to the article route did not occur by clicking the <router-link> like it did the first time, and since those params were not included in the route's path, $route.params will be empty.
I'm guessing you're just trying to pass data from one route to another. If you want it to persist across history state changes (i.e. browser back/forward), then either:
The data needs to be included in the URL, either as params (e.g. /article/:id/:type etc, this needs to be specified upfront in the route's path) or in the query string (e.g. /article?id=1&type=foo). This isn't ideal for this situation.
(Recommended) Store the item object in such a way that it can be accessed by any route. Vuex is one way, but this may be overkill.
Realistically your URLs should only need to have the article's ID in it, like this /article/1. All the other stuff like type/name/etc don't belong in the URL. From the ID you should be able to fetch the full article object either from a REST API (XHR request), or obtain it from some in-memory data store abstraction (Vuex or anything else really).
I have been looking for transitions between screens but was unable to find the best practice to navigate through screens .Making sub screens and entry in apps.xml was a try but it gives a link on the top of the page which is not what I want . I want make transitions as we make in html-5 or earlier versions through anchor tag. What is the best practice to do the same?
Below code in a screen can generate the code you want. But you would need to override the "label" macro by yourself to let it contain a "link" that is simply done by add a <#recurse/> in macro "label".
<transition name="gotoScreen1">
<default-response url="Screen1"/>
</transition>
<widget>
<label type="pre">
<link url="gotoScreen1" link-type="anchor" text="This test link from FTL"/>
<label type="pre">
</widget>
A screen transition is a part of a screen definition that specifies how to process input to the transition (if there are logic/actions associated with it) and which screen to transition to when it is complete.
To access a screen transition you just have the browser (or client) go to the URL of the screen, plus the name of the transition separated by a forward slash (i.e. in the URL treat the transition as a directory or file within the "directory" of the screen). This can be done with a hyperlink, a form target, an AJAX call, etc.
To create a link or button using the XML Screen (or XML Form) in Moqui, just use the "link" tag.
Is there an easy durandal way to clear the view and put a loading or please wait... on the screen so the user gets some feedback to know that it is working until the ajax content loads?
Right now when I click on a something that navigates to a child route and that child route loads a module that has to do a lot of stuff in activate(), it does not switch the nav or clear the screen or give any feedback to the user that it is working and I see them clicking many times over and over and getting frustrated, then just about when they want to give up, the page loads in fine.
I would like to make this default functionality for my app and not have to do something special in every module or on every page, is that possible?
Thanks.
Have you tried to use router.isNavigating? Original Durandal template contains a spinner like this:
<div class="loader pull-right" data-bind="css: { active: router.isNavigating }">
<i class="icon-spinner icon-2x icon-spin"></i>
</div>
A large percentage of the time, what you're looking for can be obtained very simply via:
<div data-bind="compose:ActiveVm">
<div class="text-center" style="margin : 75px">
<i class="fa fa-spinner fa-spin"></i>
</div>
</div>
The inner div can be any arbitrary markup which will display while the viewmodel is going through activation.
Note that this currently only displays the placeholder content the first time this dom section is composed. If you have a section of your application which is being updated via an observable viewmodel + compose approach, you could use the approach here:
Durandal: Showing a 'LOADING...' during composition
For anyone visiting from the future, this issue might be worth checking out in case native support for this is desired:
https://github.com/BlueSpire/Durandal/issues/414
First off I am completely new to Javascript but I have some HTML/CSS experience. I've been trying to create an html/javascript image gallery for a website; (It would probably be a lot easier to do in PHP but the web coordinator disabled PHP on our server for security reasons).
Anyway What I have is a page showing an Album-list, Album-browser and Photo-viewer in different a div and 2 iframes respectively. I have it set up so that when someone clicks on an album from the album list, a page is opened up in the album browser section (iframe:"browser-frame" showing thumbnails of all the images in the particular album). I've been trying to set it up so that when someone clicks on an image in the album browser the image will appear in the Photo-viewer section (iframe:"viewer-frame" showing the photo itself).
I didn't want the photo's in the viewer-frame to be larger than the set dimensions for the viewer-frame so I created a page for the viewer-frame that puts the image in a div with a class of set dimensions (defined in a stylesheet) as follows:
...<body>
<div class="photoview">
<img id="viewed_image" class="large" src="images/album1/1.jpg" />
</div>
</body>...
I then created a script that updates the image src to a variable:image_to_be_viewed and called it image-changer.js
// JavaScript Document
{
var image_to_be_viewed="images/album1/1.jpg";
document.getElementById("viewed_image").src=image_to_be_viewed;
}
And added a script to the viewer-frame page so it looks like:
...<body>
<div class="photoview">
<img id="viewed_image" class="large" src="images/album1/1.jpg" />
<script src="image-changer.js"></script>
</div>
</body>...
Now I wanted the gallery to work so that in the page loaded in the browser-frame, whenever one clicked on one of the pictures, the value of the global variable 'image_to_be_viewed' would be changed to the source of the clicked image as follows:
<body>
<div class="photobrowse">
<img class="medium" src="images/album1/1.jpg" onClick="image_to_be_viewed='images/album1/1.jpg'"/>
<img class="medium" src="images/album1/2.jpg" onClick="image_to_be_viewed='images/album1/2.jpg'"/>
<img class="medium" src="images/album1/3.jpg" onClick="image_to_be_viewed='images/album1/3.jpg'"/>
</div>
</body>
It doesn't work....
the gallery i'm working on is on http://ptc.tamu.edu/test/gallery_directory/test_gallery.html
everything up to the loading of the selected picture in the viewer frame works (I'm running the onlick event on the default loaded pictures 1,2,3 in the browser-frame page)(default pic's 4 and 5 simply load the image in the iframe but with no way to adjust the size it is too big and gets cut off and i don't want that)
I've been working on for an entire day and I'm sure I'm doing something wrong here but I can't figure out what exactly it is. I have a feeling it has to do with changing the global variable: image_to_be_viewed from the browser-frame page but I wanted to confirm with experts instead of flopping about like a headless fish. I'm going to continue trying to figure this out but i thought maybe having some expert assistance would speed up the process.
What the onclick triggers should be a javascript function call.
e.g. onclick="changeImg('images/album1/1.jpg')"
And the function itself should looks like this
function changeImg (image_to_be_viewed) {
document.getElementById("viewed_image").src = image_to_be_viewed;
}
btw, you probably should learn javascript a little bit more before work on something real. I recommend this book
thank you I got it to work! I figured that the changeImg function was targeting the wrong document/wrong frame and I fixed it by changing the js script to:
function changeImg (image_to_be_viewed) {
window.parent.viewer_frame.document.getElementById("viewed_image").src = image_to_be_viewed;
}