React-A11y yells at my Modal for 'tabIndex' and 'role'. My Modal looks like this:
<Modal
aria-label="..."
tabIndex={-1}
role="Dialog"
show={this.state.showInfo}
onHide={this.closeInfo.bind(this)} >
<Modal.Header tabIndex={9} role="Dialog" closeButton>
<Modal.Title tabIndex={-1} role="Dialog">...</Modal.Title>
</Modal.Header>
<Modal.Body tabIndex={-1} role="Dialog">
...
</Modal.Body>
</Modal>
As you can see from above, I do have tabIndex and role in every Element, but when I checkout React plugin I found out that A11y is yelling at the child of Modal that I can't access:
I am not allowed to use other modified Modals like React-Accessible-Modal. So is there any ways for me to go around to get rid of this warning? Thanks
Top element is correct. Immediate child div should have role="document" and NO tabIndex. In fact only your root element (the dialog box) should have tabIndex="-1". All other roles should be removed.
Tabindex affects tabbing order. If you set it 0, then that element will be able to receive focus via tabbing. I would avoid this if possible. Browsers allow focus on interactive elements. Consider wrapping elements you want to receive focus in an anchor or the like.
Tabindex as a positive is a no no. Totally messes up tabbing order.
Tabindex -1 is actually fine, but ONLY if that element is to receive focus programmatically via js
[Element].focus();
So your dialog should programmatically receive focus and just allow a natural tabbing order for the rest.
Note: trap focus in the modal until the user closes the modal. Then return focus to the modal trigger(anchor or button, I prefer anchor)
Related
While selecting radio button inside laravel Dusk i am getting
Facebook\WebDriver\Exception\ElementNotInteractableException: element
not interactable
Here is my code
$browser->visit('/test')
->radio('question_outer_3', '29')
->assertTitleContains('Test');
This is my templete
<input type="radio" class="radio user_questions " name="question_outer_3" id="option29" value="29" data-question="11" data-option="29" data-scroll-to=" #question_outer_4 ">
Often elements are "not interactable" when are not in the viewport (e.g. you have to scroll to reach them, or are still to be appended in the DOM after a Javascript call).
Scrolling and waiting for text may help.
I'm trying to catch the click of a v-switch prior to it flipping to see if a preexisting condition has been met. While logging e.target of the event I am getting
<div class="v-input--selection-controls__ripple primary--text"></div>
as the result but every now and then I get
<input aria-checked="true" id="input-24" role="switch" type="checkbox" aria-disabled="false" value="Arizona">
Am I missing something in this or is this unexpected behavior?
Codepen Example
What is happening is that you're clicking on two different elements.
When you click on the ball or around it in the grey area you click on this element:
But when you click outside it but still inside the input you click on this other element:
However, both of then capture you click.
You could change your implementation to capture the change event:
<template v-slot:item.ia="{ item }">
<v-switch
v-model="ia_array"
:key="item.id"
:label="item.state"
:value="item.state"
#change="onChange"
></v-switch>
</template>
Good day!
I just wish to ask if any of you have a way to Open a modal from a modal, then from that second modal, There is another modal to be opened.
Because in the current behavior of my modal, the 3rd modal will be always in the back of the second modal. I already read this article on how to get the parent modal, and it works perfectly for the second modal, but the problem is that the 3rd modal is not working properly.
Thank you so much.
Try to change its z-index using CSS style. You could even assign one to each RadWindow.
<telerik:RadWindow ID="modalPopup" runat="server" Modal="true" Style="z-index: 100001;">
I'm experiencing a problem ONLY in Chrome where an Ajax response is not being displayed. Oddly, when I hover over the page's main menu, the response shows up and also stays when I move the mouse away again from the main menu.
Here is a more specific description:
The page contains a search box that allows the user to start typing a contact name. As the user types, an ajax request is made to return a list of suggested contacts. The user can then click on a radio button corresponding to a contact in that list to display all the contact information of that one person. Up to that point everything works fine. But now if the user goes back to the search box to change his search, the previously returned list of contacts goes away, but the new one from the new search does not show up. It is the click on the radio button that causes the following search not to display any ajax responses. The odd thing now is that the response does show up if the user hovers over the main menu at the top of the page (which uses css), and it also stays if the user moves the mouse away again from the menu and everything works fine afterwards. Here is the page structure:
<div id="fixedTopBar">
<?php
include("include/mainMenu.php");
?>
</div>
<div id="pageContent">
<div id="contactListContainer">
<form>
<input id="contactSearchBox" type="text" autocomplete="off" onkeyup="showHint(this.value, 'contactList', null , 'include/ajax/getContacts.php')">
</form>
<div id="contactList">
<form>
<?php
echoAllContacts(getContactsFromDatabase());
?>
</form>
</div>
</div>
<div id="profile"></div>
The ajax request is made with the showHint() function in the id="contactSearchBox" input, and the response is displayed within the id="contactList" div.
So in short, the click on a radio button causes the problem, and hovering over the top menu solves the problem (very strange no?).
Please let me know what other code you need to track down the problem if you have any ideas, or if anything I said did not make sense.
Thanks in advance!
I was able to solve my problem with some css:
The id="contactListContainer" div was positioned: fixed ...once I positioned it absolute, the problem was gone. Now, to actually position it fixed and not have the problem, I also had to add the position:fixed or position:absolute property to the child div id="contactList".
I would like to add a toolbar button to CKEditor that shows the current color of the selection. Is this possible?
So far I managed to add a new toolbar button by following this tutorial and the colorbutton plugin, but I can't find any example of a toolbar button with dynamic presentation.
You could use a transparent image for the button and set the background color of the button span within your plugins functionality.
It looks like it might be easiest to get that span by finding the anchor tag with the title that you assigned (the tooltip) and then set the background color of the child span with id=cke_icon.
This is what the HTML for one of my plugin buttons looks like, the name of the particular plugin that the button calls isn't used, it's functions are assigned variable function numbers, so the plugin name isn't available:
<a id="cke_33" class="cke_off"
onclick="CKEDITOR.tools.callFunction(71, this); return false;"
onfocus="return CKEDITOR.tools.callFunction(70, event);"
onkeydown="return CKEDITOR.tools.callFunction(69, event);"
onblur="this.style.cssText = this.style.cssText;" aria-haspopup="true"
aria-labelledby="cke_33_label" role="button" hidefocus="true" tabindex="-1"
title="Block Background Color">
<span class="cke_icon" style="background-image:url
(/ckeditor_3.6.1/plugins/cwmarcontentbackcolor/images/contentbackcolor16x16.png?t=B5GJ5GG);
background-position:0 0px;">
</span>
<span id="cke_33_label" class="cke_label">Block Background Color</span>
<span class="cke_buttonarrow"> </span>
</a>
It will be a fair amount of work if you want to determine the color each time the user selects a portion of the content area because they could select multiple elements with multiple colors. Even if they simply click in the content area, you may have to walk up the DOM tree to find the element that the cursor position is inheriting it's color from.
I helped with a plugin for another question that had a different goal, but it involved firing each time a selection was made, creating an object based on the selection, and walking up the DOM tree to look at the class assigned to the elements. You may be able to modify it to fit your goals:
How to block editing on certain part of content in CKEDITOR textarea?