I just want to know how can we get rid of 508 issue for wave for p-tablecheckbox which states "Form label not present". Basically, we have one p-table inside which there is p-tablecheckbox where we tried using aria-label too but it is not working. So, is there any alternate way where i can get some straightforward technique to resolve this ongoing issue with p-tablecheckbox.
Any help would be appreciated.
Thank you.
"ariaLabel" property is added for p-tablecheckbox in latest version.
If you are unable to use latest version, here is a work around.
Add aria label in typescript code.
First define your aria label in labels list. Then,
this.elements = document.getElementsByClassName("p-checkbox");
for (let i = 0; i < this.elements.length; i++) {
this.elements[i].ariaLabel = this.labels[i];
}
Related
I am using a git repository to display a chessboard:
https://github.com/shaack/cm-chessboard
An example of the displayed chessboard can be found here:
https://shaack.com/projekte/cm-chessboard/
My goal is to display some text over a square of my choice, which would display over the piece if it is present. So I presume that involves some kind of z-index on the svg.
I've done inspect on the chessboard to see what the source code looks like, but I am at a loss for how to add a function that works like this:
function(coordinate,text), where coordinate could be something like c2.
How would you go about creating this function?
I am at a loss of where to start. I've been looking at the source code in the git file and commenting the code to get a better understanding. Ideally I would like a function that doesn't alter the git repository, because then if they do an update, my code won't break. Maybe I need to add a function that modifies the instance of the board object.
Any help is greatly appreciated.
I did a modern Chessboard (only to show the power of Web Components)
Problem with the "traditional" approach is you can NOT extend on it;
without taking the source code and changing it.
Modern Web Components can be extended WITHOUT needing the source code.
Below is ALL code required to add the label( square , label ) functionality you are after.
Better yet, same code in: https://jsfiddle.net/WebComponents/jvpm875b/
One issue.. the square-label is still shown; because my CSS was created to hide the square-label when there is a Chess-Piece in the square. You have to dig into the CSS to change that.
ChessMeister was an experiment, meant to be a BaseClass for Web Component developers; it has the UNlicense on it.. so you are free to use it (and you can't sue me)
https://chessmeister.github.io/
<script src="https://chessmeister.github.io/elements.chessmeister.js"></script>
<script>
customElements.define( "chess-board",
class extends customElements.get("chessmeister-board") {
connectedCallback() {
super.connectedCallback(); // execute <chessmeister-board>
let style = document.createElement("style");
style.innerHTML = `#labels div{background:rgb(100,100,0,.5);font:16px Arial;color:red;display:flex;align-items:center;justify-content:center}`
this.shadowRoot.append(style);
this.labels = this.addlayer("labels");
this.label("A7", "Make");
this.label("B7", "Your");
this.label("C7", "Own");
this.label("D7", "Chess");
this.label("E7", "Board");
}
label(square = "A8", label = "LABEL") {
let div = document.createElement("div");
div.setAttribute("at", square);
div.innerHTML = label;
this.labels.append(div);
return div;
}
})
</script>
<chess-board fen="4r3/8/2p2PPk/1p6/pP2p1R1/P1B5/2P2K2/3r4"></chess-board>
In my React project, sometimes a dynamically generated UUID needs to be added to the a data-testid value to ensure uniqueness amongst duplicate components in the DOM.
I have a test situation where I can grab the element I want. Now I want to get the dynamically generated data-testid from it. I've tried this but it doesn't work:
const questionDropdown = queryAllByText('Free Text')[0];
console.log(questionDropdown.getAttribute('data-testid'));
Any suggestions how to get it?
I think it's a dataset so you can get it like this:
console.log(questionDropdown.dataset.testid);
If you have an expected result you can test it with testing-library/jest-dom:
expect(questionDropdown).toHaveAttribute("data-testid", "test-id");
Doc: https://github.com/testing-library/jest-dom#tohaveattribute
I finally figured out how to do it!
So, I have a Semantic-UI Dropdown with a dynamically generated data-testid. The trick to getting the element is simply to use Regex, like this:
const questionTypeDropdown = getByTestId(/conditional-task-question-type/);
I'm revisiting this. I believe that the answer from adesuriey works great if you're dealing with conventional text, say in an Input element. But in the Semantic UI Dropdown it does not appear to work.
I think the problem lies with finding the correct ancestor element. I've tried many things but with no success.
I have the default Reactify Material UI DataTable that looks like this image
I need to heavily customise it including removing the download and print functionality and add icons into the columns for status and a drop-down added into the actions column. I have been thrown in the deep end with this project and would like to know where to start. I am using Reactify and I am slowly getting used to React so just need direction on what to research and what to learn.
Do I duplicate the mui-datatables node module and start modifying that?
Thanks
You can customized it, just read the docs very carefully.
https://www.npmjs.com/package/mui-datatables
This is the link where you can find its docs and make your data tables customize, for example if you want to remove the download and print functionality you just give false values to download and print option like this
const options = {
print: false,
download: false,
};
You can add icons in the status just change the value in data array. for example
let icon = <i className="ti-close" />
const data = [
["UserName_Value", "Title_Value", icon , "Date_Value", "Action_Value"],
];
Similarly you can add dropdowns to the action columns as well, just read the docs carefully and you will get the answer.
How can I wrap the text of TextArea hint and also how can I align the hint to the top?
I tried subclassing of TextArea didn't help. I didn't find any relevant method of TextAre to achieve relevant result.
You can't. A hint is a label subclass and those are single line. Unfortunately we implemented it in a way that doesn't make this simple.
However, you can workaround it using code like this:
TextArea actualTa = ...;
TextArea hint = new TextArea("My long hint text");
hint.setEditable(false);
hint.setUIID("TextHint");
Container textAreaWithHint = LayeredLayout.enclose(actualTa, hint);
if(actualTa.getText().getLength() > 0) {
hint.setVisible(false);
}
// I'll leave that as an exercise for you...
textAreaWithHint.addFocusListener(...);
I am trying to make the Bootstrap dropdown keyboard accessible in my page. But I don't know why keydown/up doesn't work. Please see the my jsfiddle demo
And I also have some questions on Bootstrap accessibility. Please help to review it.
According the Issue 931. It seems the keyboard accessibility wasn't added until v3.0.0-rc1. Right?
Why missing href in the anchor element would disable keyup/down accessibility for dropdown?
The problem lies in the following source code of bootstrap's dropdown.js that is using to find index of focused element:
var index = $items.index($items.filter(':focus'))
the problem is that the $items.filter(':focus') don't returns correct element and in this case index will be -1 each time.
I don't know how jQuery's :focus exactly works but this problem can be solved with the following code: var index = $items.index($(document.activeElement)). But anywhere it's not good thing to change something in source code of 3rd-party library.