Skip to content

Commit 14945be

Browse files
DeepakRajSundarDeepakRajSundar
committed
Merge remote-tracking branch 'remotes/origin/hotfix/hotfix-v26.1.35'
2 parents 81da24b + 6b8defa commit 14945be

File tree

43 files changed

+1380
-17185
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+1380
-17185
lines changed

‎ej2-react/circular-gauge/accessibility.md

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,34 @@ domainurl: ##DomainURL##
1010

1111
# Accessibility in React Circular Gauge component
1212

13-
Circular Gauge has built-in accessibility features like screen reading and WAI-ARIA attributes.
13+
The Circular Gauge component follows commonly used accessibility guidelines and standards, such as [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles).
14+
15+
The accessibility compliance for the Circular Gauge component is outlined below.
16+
17+
| Accessibility Criteria | Compatibility |
18+
| -- | -- |
19+
| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> |
20+
| [Section 508 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> |
21+
| [Screen Reader Support](../common/accessibility#screen-reader-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
22+
| [Right-To-Left Support](../common/accessibility#right-to-left-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
23+
| [Color Contrast](../common/accessibility#color-contrast) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
24+
| [Mobile Device Support](../common/accessibility#mobile-device-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
25+
| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | Not Applicable |
26+
| [Accessibility Checker Validation](../common/accessibility#ensuring-accessibility) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
27+
| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
28+
29+
<style>
30+
.post .post-content img {
31+
display: inline-block;
32+
margin: 0.5em 0;
33+
}
34+
</style>
35+
36+
<div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> - All features of the control meet the requirement.</div>
37+
38+
<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> - Some features of the control do not meet the requirement.</div>
39+
40+
<div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="No"> - The control does not meet the requirement.</div>
1441

1542
## WAI-ARIA attributes
1643

‎ej2-react/code-snippet/gantt/how-to-draganddrop-cs1/app/index.jsx

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -32,16 +32,17 @@ function App (){
3232
const fields = { dataSource: editingResources, id: 'resourceId', text: 'resourceName' };
3333
const allowDragAndDrop = true;
3434
function nodeDragStop(args) {
35+
args.cancel = true;
3536
let chartEle = closest(args.target, '.e-chart-row');
3637
let gridEle = closest(args.target, '.e-row');
3738
if(gridEle){
3839
var index = ganttInstance.treeGrid.getRows().indexOf(gridEle);
3940
ganttInstance.selectRow(index);
4041
}
41-
if (chartEle) {
42-
var index = chartEle.ariaRowIndex;
43-
ganttInstance.selectRow(Number(index));
44-
}
42+
if (chartEle) {
43+
var index = chartEle.rowIndex;
44+
ganttInstance.selectRow(index);
45+
}
4546
let record = args.draggedNodeData;
4647
let selectedData = ganttInstance.flatData[ganttInstance.selectedRowIndex];
4748
let selectedDataResource = selectedData.taskData.resources;
@@ -58,10 +59,6 @@ function App (){
5859
resources: resources
5960
};
6061
ganttInstance.updateRecordByID(data);
61-
var elements = document.querySelectorAll('.e-drag-item');
62-
while (elements.length > 0 && elements[0].parentNode) {
63-
elements[0].parentNode.removeChild(elements[0]);
64-
}
6562
}
6663
};
6764

‎ej2-react/code-snippet/gantt/how-to-draganddrop-cs1/app/index.tsx

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,15 +32,16 @@ function App (){
3232
const fields = { dataSource: editingResources, id: 'resourceId', text: 'resourceName' };
3333
const allowDragAndDrop = true;
3434
function nodeDragStop(args: DragAndDropEventArgs): void {
35+
args.cancel = true;
3536
let chartEle: any = closest(args.target, '.e-chart-row');
3637
let gridEle: any = closest(args.target, '.e-row');
3738
if(gridEle){
3839
var index = ganttInstance.treeGrid.getRows().indexOf(gridEle);
3940
ganttInstance.selectRow(index);
4041
}
4142
if(chartEle){
42-
var index = chartEle.ariaRowIndex;
43-
ganttInstance.selectRow(Number(index));
43+
var index = chartEle.rowIndex;
44+
ganttInstance.selectRow(index);
4445
}
4546
let record: any = args.draggedNodeData;
4647
let selectedData = ganttInstance.flatData[ganttInstance.selectedRowIndex];
@@ -58,10 +59,6 @@ function App (){
5859
resources: resources
5960
};
6061
ganttInstance.updateRecordByID(data);
61-
var elements = document.querySelectorAll('.e-drag-item');
62-
while (elements.length > 0 && elements[0].parentNode) {
63-
elements[0].parentNode.removeChild(elements[0]);
64-
}
6562
}
6663
};
6764

‎ej2-react/code-snippet/grid/show-hide-spinner-cs1/app/App.jsx

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { ColumnDirective, ColumnsDirective, GridComponent, Inject, Page } from '@syncfusion/ej2-react-grids';
2+
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
3+
import * as React from 'react';
4+
import { data } from './datasource';
5+
6+
function App() {
7+
let grid;
8+
const loadData = () => {
9+
grid.showSpinner();
10+
setTimeout(() => {
11+
grid.dataSource = data;
12+
grid.hideSpinner();
13+
}, 1000);
14+
}
15+
16+
const showhideSpinner = (args) => {
17+
if (args.currentTarget.id === 'showButton') {
18+
grid.showSpinner();
19+
} else {
20+
grid.hideSpinner();
21+
}
22+
}
23+
return <div>
24+
<ButtonComponent id='loadButton' cssClass='e-outline' onClick={loadData}>Load Data</ButtonComponent>
25+
<ButtonComponent id='showButton' cssClass='e-outline' style={{ marginLeft: "5px" }} onClick={showhideSpinner}>Show Spinner</ButtonComponent>
26+
<ButtonComponent id='hideButton' cssClass='e-outline' style={{ marginLeft: "5px" }} onClick={showhideSpinner}>Hide Spinner</ButtonComponent>
27+
<GridComponent ref={g => { grid = g }} height='320' allowPaging={true}>
28+
<ColumnsDirective>
29+
<ColumnDirective field='OrderID' headerText='Order ID' isPrimaryKey={true} width='120' textAlign='Right'></ColumnDirective>
30+
<ColumnDirective field='CustomerID' headerText='Customer ID' width='160'></ColumnDirective>
31+
<ColumnDirective field='ProductName' headerText='Product Name' width='130' textAlign='Right' />
32+
<ColumnDirective field='Quantity' headerText='Quantity' width='120' />
33+
</ColumnsDirective>
34+
<Inject services={[Page]} />
35+
</GridComponent>
36+
</div>
37+
}
38+
export default App;

‎ej2-react/code-snippet/grid/show-hide-spinner-cs1/app/App.tsx

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { ColumnDirective, ColumnsDirective, GridComponent, Inject, Page } from '@syncfusion/ej2-react-grids';
2+
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
3+
import * as React from 'react';
4+
import { data } from './datasource';
5+
6+
function App() {
7+
let grid: GridComponent | null;
8+
const loadData = () => {
9+
(grid as GridComponent).showSpinner();
10+
setTimeout(() => {
11+
(grid as GridComponent).dataSource = data;
12+
(grid as GridComponent).hideSpinner();
13+
}, 1000);
14+
}
15+
16+
const showhideSpinner = (args: MouseEvent) => {
17+
if ((args.currentTarget as HTMLElement).id === 'showButton') {
18+
(grid as GridComponent).showSpinner();
19+
} else {
20+
(grid as GridComponent).hideSpinner();
21+
}
22+
}
23+
return <div>
24+
<ButtonComponent id='loadButton' cssClass='e-outline' onClick={loadData}>Load Data</ButtonComponent>
25+
<ButtonComponent id='showButton' cssClass='e-outline' style={{ marginLeft: "5px" }} onClick={showhideSpinner}>Show Spinner</ButtonComponent>
26+
<ButtonComponent id='hideButton' cssClass='e-outline' style={{ marginLeft: "5px" }} onClick={showhideSpinner}>Hide Spinner</ButtonComponent>
27+
<GridComponent ref={g => { grid = g }} height='320px' allowPaging={true}>
28+
<ColumnsDirective>
29+
<ColumnDirective field='OrderID' headerText='Order ID' isPrimaryKey={true} width='120' textAlign='Right'></ColumnDirective>
30+
<ColumnDirective field='CustomerID' headerText='Customer ID' width='160'></ColumnDirective>
31+
<ColumnDirective field='ProductName' headerText='Product Name' width='130' textAlign='Right' />
32+
<ColumnDirective field='Quantity' headerText='Quantity' width='120' />
33+
</ColumnsDirective>
34+
<Inject services={[Page]} />
35+
</GridComponent>
36+
</div>
37+
}
38+
export default App;

0 commit comments

Comments
 (0)