Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
3 changes: 3 additions & 0 deletions .git-blame-ignore-revs
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,6 @@ a83be9b0727eedc7745e285521cfc6669178bf74

# format after new branch (bundle size reduction) creation and migration
28c3a6ec3dd3dc4e2f3e628e7d42d122b2e3bdad

# Prettier run on mdoc files
639cfa42fd6851d82a0e8a2872601dc321047b6c
13 changes: 13 additions & 0 deletions .prettierrc
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,19 @@
"options": {
"parser": "astro"
}
},
{
"files": "*.mdoc",
"options": {
"parser": "markdown",
"embeddedLanguageFormatting": "off"
}
},
{
"files": "*.md",
"options": {
"parser": "markdown"
}
}
],
"plugins": ["@trivago/prettier-plugin-sort-imports", "prettier-plugin-astro"]
Expand Down
1 change: 1 addition & 0 deletions .rulesync/commands/context-remember.md
1 change: 0 additions & 1 deletion .rulesync/rules/jira.md

This file was deleted.

3 changes: 3 additions & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@
"editor.tabSize": 4,
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"files.associations": {
"*.mdoc": "markdown"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,12 @@
"name": "Client-Side Single Cell Update",
"url": "./data-update-single-row-cell/"
}
},
"getDataValue": {
"more": {
"name": "Client-Side Single Cell Update",
"url": "./data-update-single-row-cell/"
}
}
},
"selection": {
Expand Down
5 changes: 5 additions & 0 deletions documentation/ag-grid-docs/src/content/docs-nav/nav.json
Original file line number Diff line number Diff line change
Expand Up @@ -819,6 +819,11 @@
"title": "Number Filter",
"path": "filter-number"
},
{
"type": "item",
"title": "BigInt Filter",
"path": "filter-bigint"
},
{
"type": "item",
"title": "Date Filter",
Expand Down
111 changes: 58 additions & 53 deletions documentation/ag-grid-docs/src/content/docs/accessibility/index.mdoc
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ Even if you are not mandated to conform to any particular accessibility standard

Currently the most commonly encountered conformance guidelines are:

* [ADA](https://www.ada.gov/) - US Department of Justice
* [Section 508](https://www.section508.gov/) - US federal agencies
* [WCAG 2.0](https://www.w3.org/WAI/intro/wcag) - globally accepted standard
- [ADA](https://www.ada.gov/) - US Department of Justice
- [Section 508](https://www.section508.gov/) - US federal agencies
- [WCAG 2.0](https://www.w3.org/WAI/intro/wcag) - globally accepted standard

WCAG 2.0 has 3 levels of conformance; A, AA and AAA (in order of conformance)

Expand Down Expand Up @@ -53,44 +53,45 @@ In order to give screen readers the contextual information they require to inter

When inspecting the DOM you'll notice the following roles and properties have been added:

* **role="treegrid"** / **role="grid"** - marks the enclosing element of the grid. The grid has `role="treegrid"` when using [Tree Data](./tree-data/) or the grid has [Row Grouping](./grouping/) applied. In other cases, when providing flat data or using [Master / Detail](./master-detail/), the grid has `role="grid"`.

**Note:** You can set any aria property in the panel (role="treegrid") by using the `setGridAriaProperty` method in the [Grid Api](./grid-api/).

* **aria-rowcount** - announces the number of rows.
* **aria-colcount** - announces the number of columns.
* **aria-multiselectable="true"** - marks the grid as being able to select multiple rows.
* **role="rowgroup"** - element that serve as container for the table header rows and grid rows.
* **role="row"** - a row of column headers or grid cells.
* **aria-rowindex** - announces the visible index of the row.
* **aria-selected** - only present if the row is selectable, it announces the selection state.
* **aria-expanded** - only present in row groups, it announces the expand state.
* **role="columnheader"** - element containing a column header.
* **aria-colindex** - announces the visible index of the column.
* **aria-colspan** - only present if the column spans across multiple columns, it helps guide screen readers.
* **aria-expanded** - only present in grouped headers, it announces the expand state.
* **aria-sort** - only present in sortable columns, it announces the sort state.
* **role="gridcell"** - element containing a grid cell.
* **aria-colindex** - announces the visible index of the cell.
* **aria-selected** - only present if the cell is selectable, it announces the selection state.
* **aria-expanded** - only present in a group cell, it announces the expand state.
* **role="tablist"** - element that serve as a container for a single levels of tab items.
* **role="tab"** - marks an element as a tablist item.
* **role="tree"** - element that serve as a container for items that could have multiple levels.
* **role="treeitem"** - marks an element as an item of a tree.
* **aria-level** - announces the current level of the tree.
* **aria-expanded** - only present if the item has subitems, it announces the current expand state.
* **role="listbox"** - element that serve as a container for multiple elements that will be presented as a list.
* **role="option"** - marks an element as an item of a listbox.
* **aria-setsize** - announces the total number of items in the listbox.
* **aria-posinset** - announces the position of the item within the set.
* **aria-selected** - only present if the item is selectable, it announces the current select state.
* **aria-checked** - only present if the item has a checkbox, it announces the current check state.
* **role="presentation"** - indicates an element should be ignored.
* **aria-hidden="true"** - indicates an element and child elements should be ignored.
* **aria-label** - used to provide information about the current focused item.
* **aria-labelledby** - used to provide the id of an element that has the label for the current focused element.
* **aria-describedby** - used to provide additional information about the current selected item.
- **role="treegrid"** / **role="grid"** - marks the enclosing element of the grid. The grid has `role="treegrid"` when using [Tree Data](./tree-data/) or the grid has [Row Grouping](./grouping/) applied. In other cases, when providing flat data or using [Master / Detail](./master-detail/), the grid has `role="grid"`.

**Note:** You can set any aria property in the panel (role="treegrid") by using the `setGridAriaProperty` method in the [Grid Api](./grid-api/).

- **aria-rowcount** - announces the number of rows.
- **aria-colcount** - announces the number of columns.
- **aria-multiselectable="true"** - marks the grid as being able to select multiple rows.

- **role="rowgroup"** - element that serve as container for the table header rows and grid rows.
- **role="row"** - a row of column headers or grid cells.
- **aria-rowindex** - announces the visible index of the row.
- **aria-selected** - only present if the row is selectable, it announces the selection state.
- **aria-expanded** - only present in row groups, it announces the expand state.
- **role="columnheader"** - element containing a column header.
- **aria-colindex** - announces the visible index of the column.
- **aria-colspan** - only present if the column spans across multiple columns, it helps guide screen readers.
- **aria-expanded** - only present in grouped headers, it announces the expand state.
- **aria-sort** - only present in sortable columns, it announces the sort state.
- **role="gridcell"** - element containing a grid cell.
- **aria-colindex** - announces the visible index of the cell.
- **aria-selected** - only present if the cell is selectable, it announces the selection state.
- **aria-expanded** - only present in a group cell, it announces the expand state.
- **role="tablist"** - element that serve as a container for a single levels of tab items.
- **role="tab"** - marks an element as a tablist item.
- **role="tree"** - element that serve as a container for items that could have multiple levels.
- **role="treeitem"** - marks an element as an item of a tree.
- **aria-level** - announces the current level of the tree.
- **aria-expanded** - only present if the item has subitems, it announces the current expand state.
- **role="listbox"** - element that serve as a container for multiple elements that will be presented as a list.
- **role="option"** - marks an element as an item of a listbox.
- **aria-setsize** - announces the total number of items in the listbox.
- **aria-posinset** - announces the position of the item within the set.
- **aria-selected** - only present if the item is selectable, it announces the current select state.
- **aria-checked** - only present if the item has a checkbox, it announces the current check state.
- **role="presentation"** - indicates an element should be ignored.
- **aria-hidden="true"** - indicates an element and child elements should be ignored.
- **aria-label** - used to provide information about the current focused item.
- **aria-labelledby** - used to provide the id of an element that has the label for the current focused element.
- **aria-describedby** - used to provide additional information about the current selected item.

These attributes will enable screen readers to interpret and navigate the columns and rows of the grid.

Expand Down Expand Up @@ -163,8 +164,8 @@ However note that lots of rendered rows will mean a very large amount of renderi

The example below presents a simple grid layout with the following properties enabled:

* `ensureDomOrder` - ensures the rows and columns in the DOM always appear in the same order as displayed in the grid.
* `suppressColumnVirtualisation` and `suppressRowVirtualisation` - ensure all column and rows appear in the DOM.
- `ensureDomOrder` - ensures the rows and columns in the DOM always appear in the same order as displayed in the grid.
- `suppressColumnVirtualisation` and `suppressRowVirtualisation` - ensure all column and rows appear in the DOM.

{% gridExampleRunner title="Grid Customised for Accessibility" name="accessibility" /%}

Expand All @@ -179,17 +180,21 @@ customisation in action.

Using advanced functionality in AG Grid makes the DOM structure incompatible with the assumptions screen readers make. This results in a few limitations in accessibility when specific functionality is used:

* ### Navigation to pinned rows/columns
Screen readers assume that the visual and DOM element order are identical. Specifically, when you pin a row/column, it causes elements to be rendered in different containers. This is why you cannot use screen readers to navigate into a pinned row/column cells, as in fact, this means they're rendered in a different element from the rest of the columns/rows which are scrollable.
- ### Navigation to pinned rows/columns

* ### Full width rows
Full Width Rows are rendered in a different container, therefore screen readers have trouble announcing them for the same reason as `Pinned Rows/Columns`. This also includes Row Grouping, when `groupDisplayType="groupRows"`
Screen readers assume that the visual and DOM element order are identical. Specifically, when you pin a row/column, it causes elements to be rendered in different containers. This is why you cannot use screen readers to navigate into a pinned row/column cells, as in fact, this means they're rendered in a different element from the rest of the columns/rows which are scrollable.

* ### Limitations in announcing the correct column name in grouped columns
Even though all aria tags have been applied to the necessary elements, some screen readers have trouble navigating the tags when the structure of the grid gets more complex (eg. grouped columns). This is the reason why there are some limitations announcing the correct column names.
- ### Full width rows

* ### No announcements of state change of a gridcell or gridheader
Some screen readers will not recognise changes that happen to an element that is currently focused (including children of this element). So in order to detect changes (eg. sorted state, updated labels, etc...) you will need to move focus to another element and back.
Full Width Rows are rendered in a different container, therefore screen readers have trouble announcing them for the same reason as `Pinned Rows/Columns`. This also includes Row Grouping, when `groupDisplayType="groupRows"`

* ### Server-side row model
Announcing the row count in the grid when using server-side row model (SSRM) is not supported. This is because the row count cannot be known in all the scenarios where SSRM is in use.
- ### Limitations in announcing the correct column name in grouped columns

Even though all aria tags have been applied to the necessary elements, some screen readers have trouble navigating the tags when the structure of the grid gets more complex (eg. grouped columns). This is the reason why there are some limitations announcing the correct column names.

- ### No announcements of state change of a gridcell or gridheader

Some screen readers will not recognise changes that happen to an element that is currently focused (including children of this element). So in order to detect changes (eg. sorted state, updated labels, etc...) you will need to move focus to another element and back.

- ### Server-side row model
Announcing the row count in the grid when using server-side row model (SSRM) is not supported. This is because the row count cannot be known in all the scenarios where SSRM is in use.
Original file line number Diff line number Diff line change
Expand Up @@ -73,11 +73,11 @@ browser memory only (as each of these row models use a data source to lazy load

The example below shows the different For-Each API methods as follows:

* **For-Each Node**: Prints out every row in the grid. It ignores filtering and sorting.
* **For-Each Node After Filter**: Prints out every row in the grid, except those filtered out.
* **For-Each Node After Filter and Sort**: Prints out every row in the grid, except those filtered,
and in the same order they appear on the screen if sorting is applied.
* **For-Each Leaf Node**: Prints out every row in the grid except group rows.
- **For-Each Node**: Prints out every row in the grid. It ignores filtering and sorting.
- **For-Each Node After Filter**: Prints out every row in the grid, except those filtered out.
- **For-Each Node After Filter and Sort**: Prints out every row in the grid, except those filtered,
and in the same order they appear on the screen if sorting is applied.
- **For-Each Leaf Node**: Prints out every row in the grid except group rows.

In the example, try applying some sorts and filters, and see how this impacts the different operations in the developer console.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ The design system has been built from the ground up to be consistent with the ja

## Getting Started

To start working with the AG Grid Figma design system, visit our [Figma community page](https://www.figma.com/community/file/1360600846643230092) and click "Open in Figma". The AG Grid design system will open directly in Figma and you're ready to start designing for AG Grid applications.
To start working with the AG Grid Figma design system, visit our [Figma community page](https://www.figma.com/community/file/1360600846643230092) and click "Open in Figma". The AG Grid design system will open directly in Figma and you're ready to start designing for AG Grid applications.

{% note %}
We supply the AG Grid design system as a [Figma community file](https://www.figma.com/community/file/1360600846643230092). You will use the file by duplicating it to your Figma workspace. Whilst we regularly update the AG Grid design system, your duplicated files will not receive any updates automatically.
Expand All @@ -25,7 +25,7 @@ For more information about how Figma community files function, please review the

## Video Introduction & Figma Documentation

You’ll find comprehensive documentation for the design system right within the Figma file. We have guides for getting started and premade grid templates. Further detailed information around how each grid component works is also within the Figma file.
You’ll find comprehensive documentation for the design system right within the Figma file. We have guides for getting started and premade grid templates. Further detailed information around how each grid component works is also within the Figma file.

{% videoSection id="Ymmm7wxLy7Y" title="Introducing the AG Grid Figma Design System" %}
Watch our [short introduction video](https://youtu.be/Ymmm7wxLy7Y) to the design system on Youtube. You'll learn how to get started with the design system, where to find complete grid templates, and how to build your own grids from scratch. After you've absorbed the basics we also have a [playlist of in-depth videos](https://www.youtube.com/watch?v=Ymmm7wxLy7Y&list=PLsZlhayVgqNzE9G1yLLHQCRYSgDvx7Zo1&pp=gAQB) diving deeper into working with the AG Grid design system.
Expand All @@ -45,10 +45,10 @@ If you have created your own theme in Figma using the variables feature, you can

To export your Figma Variables as JSON...

1. In the Resources panel go to the Plugins tab.
1. In the Resources panel go to the Plugins tab.
2. Search for the [Design Tokens](https://www.figma.com/community/plugin/888356646278934516/design-tokens) Figma plugin.
3. In the [Design Tokens](https://www.figma.com/community/plugin/888356646278934516/design-tokens) plugin settings enable the options "**Add mode to design token name (if 2 or more modes)**" and "**Add mode to design token value**".
4. Click run for the [Design Tokens](https://www.figma.com/community/plugin/888356646278934516/design-tokens) and select the 'Export Design Tokens File' option.
4. Click run for the [Design Tokens](https://www.figma.com/community/plugin/888356646278934516/design-tokens) and select the 'Export Design Tokens File' option.
5. Deselect all ‘include types...’ except for "Figma Variables"
6. Click the 'Save & Export' button and save the json file.

Expand Down
Loading
Loading