I've built an ASP.net web application which allows the users to view and make notes on a list of calendar events. The notes are edited in a WYSIWYG editor that outputs to HTML text (but could also output to RTF), which is then saved as text in an MSSQL05 database.
Now I've got to add a printing function to the calendar application. Prior to this version, the printing was done through SSRS05, but now that I've added rich text notes, this method will no longer work.
I can render the whole calendar in a printer-friendly format in the web browser, but my users have two issues with that: first, I can't turn off the header and footer added during the print, and the users are a little too basic to understand how to turn it off themselves; and second, when a note gets too long, the text gets wrapped not-too-gracefully to the next page. Unfortunately, they use IE7, so the page-break-inside attribute isn't recognized, and upgrading to IE8 or using a different browser is out of the question (I already asked :P)
So with that information, what's the best way to generate a report which features rich text?
I suggest DataDynamics ActiveReports. Very powerful, lightyears ahead Crystal. Give it a try!
Related
I am trying to select a dynamic calendar on a website. My goal is to open the calendar and input dates as I need to. I am not able to open the calendar by "Press button on web page" or "Click link on web page" with my selected UI Element. There are no ID's available to select. I have tried using the div class names with no luck. I have tried altering the selector to make a custom selector that looks for div names containing part of the class name. The 'Name' attribute in Power Automate is unavailable for the UI Element.
After trying all this, I noticed an Icon that is part of a div for the calendar, has
aria-hidden="true"'. When I checked the MDN here it has a warning statement: "Warning: Do not use aria-hidden="true" on focusable elements."
With being unable to select the calendar with standard and custom selectors, am I being blocked by the accessibility setting? Is Power Automate unable to focus on the calendar opener from aria-hidden="true"?
I don't know power automate, but what you observe makes sense. The attribute aria-hidden=true tells assistive tools such as screen readers and voice control software to ignore the element, as if it wasn't present at all.
A focusable element must never be aria-hidden=true. A screen reader won't know what to say when landing on it, and, as observed, it won't be reachable using voice control.
That's simply a pure accessibility fail (I would even call it stupidity, but well).
Technically, the solution is very simple: remove that stupid offending aria-hidden=true. Those who made that calendar probably put it there because:
they thought that screen reader and voice control users will always enter a date by hand and won't ever use the date picker
the date picker hasn't been made accessible, and so it's better to ignore it completely rather to present something only partially accessible
They copy/paste the code from elsewhere and didn't pay attention
They have no excuse for the third one, and for the two first, both reasoning are just wrong. Even if it isn't perfect, it's better to have a little something rather than nothing.
Keyboard-only user or screen reader user don't necessarily mean eased to enter a date manually. ON a mobile, the virtual keyboard is often painful to use, and people with limited movement sometimes use a device with only a few available keys (such as enter, tab, escape, and arrow keys only). Additionally, both might be combined if you think about someone who has a strong dyslexia and an inability to use his hands (the device would be actioned with feet, blinking eyes, etc.).
In theory, you shouldn't ever use custom widgets if you can avoid it. For entering dates, the standard exists: input type=date and friends.
Using standard widgets is the best guaranty to have something accessible at long term. Even if it might not be 100% accessible right now, it's getting better as the time passes.
Sadly, UX designers often don't like standard widgets much because it doesn't look like what they want, and there are still a few older browsers which don't support them all very well.
I've realized that when I try to copy/paste a text from an Angular Application to any text editor software (ie Microsoft Word), all the text loses the original format.
I'm using as example the angular material website: https://material.angular.io/
When I copy the text and past in Microsoft Word:
Thats means, the pasted text lost the center alignment, the color and de font type.
Is there a way to keep the website format? I know that the font used by Angular Material is different from text editor, but there are another things that could be mantained (i.e. alignment, color, etc).
I've started a project using Angular 8 + Angular Material and I'm facing the same problem.
Well, you're not likely to get a straight copy/paste action to do what you're requesting.
Why it doesn't work as you expect:
Copy & Paste out of MS Word for example and you'll get Rich Text where all the formatting is part of the data payload. When you copy this to the clipboard all that extra styling metadata goes along with the text. If you paste that data INTO a rich text editor (not a straight text input) like Wordpress's Admin that editor package translates the text metadata that you can't see into equivalent HTML styling.
However, When you copy from HTML (in your browsers) all you're getting is the text without all the "rich" formatting. This happens because a browser uses outside context like DOM position, tag type, and CSS to style the HTML content into what is presented for you to see.
Rich text copy for just YOU
There are multiple browser plug-ins for Chrome and Firefox that will intercept your copy request, create formatting and then paste that to the clipboard. Just ask Google for recommendations.
Rich text copy for all users of a project
This, unfortunately, is more complicated. You will need to write code to do the following (this answer has a good example):
Figure out what the user is trying to copy (usually mapped to selected text).
Convert that content into rich text format. The example above simply copies the HTML but that won't get styling applied by external CSS. Packages like Quill MIGHT give you the option to get rich text back out.
Copy your converted text to the user's local clipboard. You shouldn't hijack browser commands to do this which is why you frequently see a "copy to clipboard" button to do this action. You can move content to the user's clipboard using the Clipboard API in most modern browsers.
Oh and you'll need the user's permission to do all this since proactively interacting with the user's clipboard presents a pretty massive security issue.
We are trying to improve handicapped accessibility of one of our pages and allow a user to perform all the actions without a mouse. The page contains some buttons and an iframe with a pdf document. In IE11 I can tab through the buttons but when the control goes to the pdf viewer iframe, nothing is highlighted and pressing tab doesn't do anything.
In chrome pressing tab will cycle in through the buttons, than the handful of controls on the pdf and than step out of the viewer and start to cycle again. How do I get IE to do the same thing.
As a side note if I use shift+tab to cycle backwards, IE will ignore the iframe and cycle through the elements correctly. In fact after tabbing into the iframe, I can use shift+tab to get back to the button controls.
Any help would be greatly appreciated.
It sounds like you're trying to test PDF accessibility in the browser, which isn't really how things are done. The PDF viewers in web browsers are inferior to Acrobat, and people who need assistive technology likely won't be using the PDF readers built into IE or Chrome anyway.
As a starting point, I'd recommend opening up the document in Acrobat and making sure that it has tags. If it doesn't, you can try to have Acrobat generate them for you. If you're using any kind of a complex layout (other than simple text, images, and maybe lists), then the tagging will probably require you to manually review and correct them. PDF tags are structured very similar to HTML (but not entirely identical). If you already know HTML, then you'll probably be able to tag PDFs well enough. Otherwise, there's going to be a learning curve.
PDF remediation is an art unto itself that takes some time to master.
Here are some resources that will hopefully point you in the right direction:
https://webaim.org/techniques/acrobat/
https://helpx.adobe.com/acrobat/using/create-verify-pdf-accessibility.html
https://www.washington.edu/accessibility/documents/pdf-acrobat/
I have a client who's having trouble with Visual Editor on WordPress but I cannot, for the life of me, replicate the issue my client's having.
A little background...
For styling purposes, there are certain elements on the content area
with custom codes/data attributes hard-coded in Text editor by me. I
primarily work with Foundation framework (by Zurb) and if you're not
familiar, in the markup there are html attributes like 'data-tabs' or
'data-accordions' that enable certain stylistic components on the
front-end.
I also put a lot of effort in accessibility so there are
many instances where I add ARIA attributes wherever necessary.
My client deals with some educational analytical data, so there are some iframes embedded in the content area.
Problem arises when my client tries to edit text contents in the Visual Editor and the editor strips any custom code I put in, data attributes and outright deletes iframe altogether.
Here's what I've done so far:
Even before handing off the project monthes ago, I had added 'valid_elements',
'extended_valid_elements' rule set in the WordPress filter 'tiny_mce_before_init' to allow any kind of attributes/data sets I want
Ever since the issue has been reported, I added ARIA attribute specifically just to make sure that it's not being removed
For iframes being removed, I added extra rule that specifies iframe as a valid children of any container, and iframe can have all the necessary attributes it comes with
Switching back and forth between Visual and Text editor (at least on my environment), saving progress on both Visual/Text while editing content on the other sides, autosaving/drafting/forcing it to close and using browser backups did not cause codes/attributes/iframe to disappear so far (before handing the project to the client and after my client reported the issue).
I've tested with Chrome, Firefox, Internet Explorer, Safari, and Opera on both iOS and Windows environment
I asked my client what their work environment is like, and my client is using Mac, and according to my client, there is no browser extentions like adblock or script block installed on Firefox/Safari
This is what I added in the filter before my client even reported having the problem:
$opts = '*[*]';
$initArray['valid_elements'] = $opts;
$initArray['extended_valid_elements'] = $opts;
I added extra and modified the rules since, and this is what I have right now (in functions.php):
$initArray['valid_elements'] = $opts. ',#[role|aria-hidden|aria-checked|aria-selected|aria-pressed|aria-label|aria-labelledby|aria-disabled|aria-grabbed|aria-controls|aria-describedby|aria-required|tabindex|class|style|data-tabs|data-tabs-content|data-equalizer|data-equalizer-watch|data-equalize-on|data-count|data-ratio|frameborder|allowFullScreen|allowfullscreen]';
$initArray['extended_valid_elements'] = 'iframe[title|class|type|width|height|src|frameborder|allowFullScreen|allowfullscreen|data-ratio]';
$initArray['valid_children'] = '+p[iframe],+div[iframe]';
$initArray['invalid_elements'] = '';
I added iframe as valid children, and specifically told TinyMCE that there are no invalid elements.
...And the client is still having the same problem and I need some insight on why this is happening and how to fix this.
Anyone had the similar experience or might have an answer to this issue?
Edit: Currently looking for a plugin-less solution. There is nothing wrong with using a plugin, I suppose, but if it's doable by writing extra bit of code to solve this, then I'd rather not use it.
Edit 2: It seems that iframe being removed is more pressing issue at the moment. Attributes seem to be intact from my client's grasp, for now.
Update: Figured out the issue. It had nothing to do with TinyMCE. One thing I neglected to account for was that the website is a multisite, and that admin account don't actually have 'unfiltered_html' capability. It was something I did not know, and now I know.
WordPress cleans all the content edited in TinyMCE using KSES functions. So, even if you whitelist some tags in TinyMCE settings, on save, WordPress will filter the content using own KSES functions and will remove tags that are not allowed. By default, only administrators can use IFRAME in the content, for other users, it will be stripped on save. Here is the article on manipulating tags that KSES will allow to be used in content: KSES Tricks. Using similar method, you can add IFRAME to allowed tags list for all users.
I want to show a PDF in browser, from which user can select text, showing pdf is very easy i have done this using "pdfviewer" control, now i want to get the selected text which the user selects in the PDF, is there any way to achieve this? i am using asp.net.
Edit: If there is a flash/ flex solution at the client end that will as well, does anyone know about it, i tried one API, but that dint seem to work
You can add a JavaScript PDF action to the page and have it post to an online form.
The PDF Viewer control from Winnovative doesn't offer any text selection APIs at all.
Acrobat's JavaScript engine doesn't either.
Sorry: No.