In week view, events that occupy only a slot are generated like
<div class="fc-event-time">13:20 - EventTitle</div>
(instead of time-range), and
<div class="fc-event-content"></div>
so, no <fc-event-title> is inserted in the content.
This can be patched in eventRender, but I wonder if this is a bug or a feature.
Tnx.
Related
I'm trying to improve accessibility on a site and I can't seem to solve a problem with NVDA screen reader and loading the results of a search page.
I've created a StackBlitz example which uses Angular and AG-Grid.
The result grid is not initially visible. When I load the results for the first time, it reads out the screen-reader-only texts, then it starts reading the whole table. I would prefer if the table was not read out loud, but that's not the issue.
The problem is when I load results again, simulating another search, the reader behaves very weird. It reads something random, and says numbers like 1 1 3... which I assume are part of the pagination. Sometimes it reads the table again, sometimes it doesn't.
On the search form I'm using aria-controls="queryResultRegion" and the target has role="region" and aria-live="polite" to make the reader aware that there's dynamic content
<form action="." aria-controls="queryResultRegion">
<button (click)="loadResults()">Load result</button>
<button (click)="noResult()">Load no result</button>
</form>
<div role="region" aria-live="polite" id="queryResultRegion">
<my-grid [rowData]="rowData"></my-grid>
</div>
On the result component I the class="sr-only" elements conditionally say either the number of results or just "No results".
<ng-container *ngIf="rowData">
<h2 class="sr-only" #resultHeader>Search Result</h2>
<div *ngIf="rowData.length < 1; else elseBlock" class="sr-only">
No results
</div>
<ng-template #elseBlock>
<div class="sr-only">
Number of results: {{ rowData.length }}
</div>
</ng-template>
<ag-grid-angular style="width: 100%; height: 200px;" class="ag-theme-alpine" [rowData]="rowData"
[columnDefs]="columnDefs" [gridOptions]="gridOptions">
</ag-grid-angular>
</ng-container>
Are you sure that a live region is the right thing for the results table?
I can understand the use of a live region to tell you "X results" or "No results", but not for the results themselves, which (I would expect) would be a browsable list containing a brief abstract and hyperlink for each entry.
If you mark up your results table correctly (with rowheaders and column headers) NVDA and other ATs will be able to browse it using special keyboard shortcuts. No need for a live region around it. This in itself might resolve (although not explain) your problem with 'weird' announcements.
A few more points:
aria-controls is not that useful. The spec gives no idea how it should actually behave, although the semantic is clear enough. AT support for it is currently poor. On the other hand, it does no actual harm, and makes a semantic relationship explicit. So... while I recommend that you keep it, don't expect it to do much (yet) either. I hope the community will work out a proper interaction pattern for aria-controls, because it would be handy in cases like this, and if you've already added it, it will 'just work'.
Region roles require an accessible name. One obvious way to do this is to use
aria-labeledby pointing at the id of the heading for the region, or if you don't want it to be visible, use aria-label.
If you want to offer the user some way of 'jumping' from the search field to the results (which is what aria-controls is supposed to facilitate), consider adding tabindex=-1 to the results element, as this will allow you to call focus() on that element when the results have arrived. The accessible name will be announced (if you add it), and then the AT user can use table-navigation keyboard shortcuts to browse through the results.
I have something like: site/country-1/item-1/item-2/item-3
In Item 3 I have a portlet. In its template I'm trying to show the title of Item 2 or Item 1. How can I do this?
<div tal:content="python:context.Title()"></div> gives me Item 3.
<div tal:content="python:context.aq_parent"></div> gives me <plone.app.portlets.portlets.classic.Renderer object at 0x7fa76b97a990>
<div tal:content="python:view"></div> the same: <plone.app.portlets.portlets.classic.Renderer object at 0x7fa76b97a590>
I need this information to implement a solution to have news items and events filtered by parent country, on any level.
The acquisition chain may be different from what you expect.
To see the acquisition chain check context.aq_chain.
You may have good luck trying context.aq_inner.aq_parent.
Anyway I would use the plone_context_state view, i.e.: context/##plone_context_state/parent.
Relevant links:
https://docs.plone.org/develop/plone/misc/context.html
https://github.com/plone/plone.app.layout/blob/master/plone/app/layout/globals/context.py#L155
Using the source code below, I need to track text values of clicked links.
How can I track this and whether page load rule or event based rule is beneficiary for it?
How to code this using dtm?
<div class="afgfj">
<section class="asked-questions">
<div class="g-bp-row-gutter p-comp-spacinottom p-rb">
<h2 class="p-heading-02 p-component-title">
Frequently Asked Questions
</h2>
<dl class="p-faq-main p-accordion"
data-ctn="S9031/26">
<dt class="p-top-10 p-faq-chapter p-active">
<span class="p-top-10-global">Top-10 FAQs</span>
<span class="p-top-10-local">Top 10 FAQs</span>
</dt>
<dd class="p-top-10 p-faq-list p-active">
<ul class="p-bullets">
<li class="p-faq-item" data-lang="ENG">
<div class="p-magnific-popup-launcher" data-comp-id="magnificPopupLauncher"
data-type="iframe"
data-title="Frequently asked questions"
data-close-label="Back"
data-href="//www.org.com/cgi-bin/oleeview?view=aa12_view_body.html&dct=QAD&refnr=0073544&slg=ENG&scy=GB&ctn=S9031/26">
How long does it take to get?
</div>
</li>
<li class="p-faq-item" data-lang="ENG">
<div class="p-magnific-popup-launcher" data-comp-id="magnificPopupLauncher"
data-type="iframe"
data-title="Frequently asked questions"
data-close-label="Back"
data-href="//www.org.com/cgi-bin/oleeview?view=aa12_view_body.html&dct=QAD&refnr=0020591&slg=ENG&scy=GB&ctn=S9031/26">
Can I recharge the appliance?
</div>
</li>
This is a perfect time to use an Event Based Rule. You'll also need to create a data element to hold the text value.
The main obstacle that I can see from your code would be identifying the A tag correctly.
First the Data Element: in DTM Rules, within Data Elements click Create New Data Element.
Enter a name, specify the type (CSS Selector seems the most appropriate here) then within the CSS Selector Chain list state how to reach it. My guess is for your code it would be "div.p-magnific-popup-launcher a" but you would need to test this. You can tell by opening a Inspect Element (F12) in Chrome or similar debugging gadget. There's a good blog about doing this from Adobe here.
You should also specify which part of the A tag to save. From your question you I believe you need 'text' which would capture items like "How long does it take to get?"
Under Event Based Rules within DTM click Create New Rule.
When you're happy with the settings on this page click Save Data Element.
Populate your name, and category if applicable. The Event Type should already be set to 'click'.
Within Tag you then have to set how to find the A tag through CSS, similar to above.
That's the basics, but you'll also need to set Criteria (what pages this should fire on). Furthermore, under the Adobe Analytics section you should set whether a pageview is incremented or not, and which eVars, Props and Events are populated as a result of the click. This is also where you can use the value from your Data Element. Under Link Tracking, choose Custom Link. Within Link Name, enter a percent sign (%) and your data elements should appear. Use the name you specified earlier.
Note: you should match up your populated eVars and Events etc. with your settings under Report Suites in the Analytics interface.
I am assuming you are attempting to get the text of an <a> element when it is clicked on.
Such as in the one below, you would want to get "How long does it take to get?":
How long does it take to get?
To do this, create an event based rule with the event type "click", set the element tag to "a". (See image below)
Next you will want to configure the Adobe Analytics section of the rule.
You will set the Tracking to s.tl() ,since you do not want to create a pageview when someone clicks the link (the page they view should already do that).
Then set an eVar and/or Prop to %this.text%. This is DTM notation to grab the text of the element that triggered the rule to fire.
Finally, set an event to trigger on this rule.
See image below for the configuration
This should track when an <a> element is clicked and store the text in an eVar
I'm using the 0.4.0 branch for the components as HTML files functionality. I'm trying to do the following: I have a component that controls the layout of a page. This component has some subcomponents as an array and displays them on different parts of the page based on some data in the subcomponent. Something akin to this (due to layout restrictions they have to be in different parts of the page):
<div id="section1">
<h1> Section 1 </h1>
{{# subcomponents}}
{{#isflagsection1(flag)}}
<subcomponent flag={{flag}}/>
{{/isflag}}
{{/subcomponents}}
</div>
<div id="section2">
<h1> Section 2 </h1>
{{# subcomponents}}
{{#isflagsection2(flag)}}
<subcomponent flag={{flag}}/>
{{/isflag}}
{{/subcomponents}}
</div>
<div id="section3">
<h1> Section 3 </h1>
{{# subcomponents}}
{{#isflagsection3(flag)}}
<subcomponent flag={{flag}}/>
{{/isflag}}
{{/subcomponents}}
</div>
The flag is updated from controls within each component. this works great (the DOM is refreshed each time I modify the flag) except for one issue. Instead of performing a move, the subcomponent is recreated every time the flag changes, e.g. it's destroyed and created a new. This is unfortunate for my use case because of two reasons:
The subcomponent has a rather heavy creation cost (specially in mobile) since it performs some graphics work.
The subcomponent stores some private data (a
history of changes made to the model) that either a) gets lost when
it's moved along to another section or b) has to be stored in the
top component polluting it's data model.
So what I would like to know is, is there a way to "move" the component without deleting/recreating it?
Regards,
V. Seguí
Yes - every Ractive instance has two methods that allow you to do this: ractive.detach() and ractive.insert(). Unfortunately the documentation is currently lacking, but here's how you use it:
// remove the instance from the DOM, and store a document
// fragment with the contents
docFrag = ractive.detach();
// insert the instance into the container element, immediately
// before nodeToInsertBefore (the second argument is optional -
// if absent or `null` it means 'insert at end of container'
ractive.insert( container, nodeToInsertBefore );
If you're removing the instance and immediately reinserting it, there's no need to detach it first - you can just do ractive.insert(). The arguments can be DOM nodes, but they can also be CSS selectors or the IDs of elements.
Here'a a JSFiddle demonstrating: http://jsfiddle.net/rich_harris/Uv8WJ/
You can also do this with inline components (i.e. <subcomponent/> as opposed to new Subcomponent(). In this JSFiddle, we're using ractive.findComponent('subcomponent') method to get a reference to the instance: http://jsfiddle.net/rich_harris/f28t5/.
I want to add multiple FullCalendars (selectable) on same page for scheduling different kinds of events and save information in database but looking the demo/sample code it seems I can add only single calendar per page as it is rendered by the <div id='calendar'></div>. Can you plesae let me know if there is way to acheive this, so that when user schedules events on different calendars on same page then calendar source/id can be identified?
No, the fullcalendar is not rendered simply by <div id='calendar'></div>
It is rendered by the .fullCalendar call you will make on that div.
<div id="calendar"></div>
$("#calendar").fullCalendar({
// Options
}
Is how a FullCalendar is initialized. If you make another div and call it something else, it'll still work.
<div id="other-calendar"></div>
$("#other-calendar").fullCalendar({
// Options
}
Since each calendar is created separately, you can define your handlers for each calendar.