Move code samples to separate files and update links in documentation

docs/README-EDITING.md

@@ -162,7 +162,7 @@ To link to another page but for other framework (and still for the same document
 For example, to link to a file called `./content/guides/getting-started/react-methods.md` that should be accessible only for React framework, use:
 
 ```markdown
-[React methods](@/react/guides/getting-started/react-methods.md)
+[React methods](@/react/guides/getting-started/react-methods/react-methods.md)
 ```
 
 When there is no framework defined in the link URL, the generated link will be pointed to the currently viewed framework. For example, link `[Core](@/api/core.md)` for Javascript will point to `/docs/javascript-data-grid/api/core` and for chosen React framework to `/docs/react-data-grid/api/core`.
@@ -171,7 +171,7 @@ List of available frameworks: `javascript`, `react`.
 
 Follow these rules:
 * After the `@` character, provide the target's relative file path (from the current version's root directory).<br>
-  For example: `[Clipboard][@/guides/cell-features/clipboard.md]`.
+  For example: `[Clipboard][@/guides/cell-features/clipboard/clipboard.md]`.
 * After the target file's name, add the `.md` [extension](#filenames)<br>
   For example: `[Autofill](@/api/autofill.md)`.
 * To link to a specific section, use anchors.<br>

docs/README.md

@@ -84,7 +84,7 @@ docs                            # All documentation files
 │   │   ├── jsdoc-convert       # JSDoc-to-Markdown converter
 │   │   ├── utils.js            # Tools utilities
 │   ├── config.js               # VuePress configuration
-│   ├── docs-links.js           # Lets us link within the currently-selected docs version and framework with `@` (e.g. [link](@/guides/path/file.md).)
+│   ├── docs-links.js           # Lets us link within the currently-selected docs version and framework with `@` (e.g. [link](@/guides/path/file/file.md).)
 │   ├── enhanceApp.js           # VuePress app-level enhancements
 │   ├── helpers.js              # Common helpers that set up sidebars and the documentation version and framework picker
 │   └── highlight.js            # Code highlight configuration

docs/content/guides/accessibility/accessibility/example1.css

@@ -0,0 +1,71 @@
+.checkbox-container {
+  padding-bottom: 1rem;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.checkbox-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.checkbox-group > div {
+  display: flex;
+}
+
+.checkbox-group > div > label {
+  display: flex;
+  gap: 0.2rem;
+}
+
+.external-link {
+  margin-left: 0.5rem;
+  position: relative;
+  top: 2px;
+  color: black;
+}
+
+.external-link:hover {
+  color: #0000ee;
+}
+
+.placeholder-input {
+  max-width: 20rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: black;
+  border: 1px solid #e4e4e7;
+  border-radius: 6px;
+}
+
+.option-label {
+  align-items: flex-start;
+}
+
+/* 
+  We want the focus to be around input and label, in order to achieve this,
+  we remove focus from the input and add it to the label (wrapper in this case)
+  we then use the :focus-within pseudo class plus native focus styles
+  https://css-tricks.com/copy-the-browsers-native-focus-styles/
+*/
+.option-label:focus-within {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+.option-label > input:focus {
+  outline: none;
+}
+
+/* fixes dark theme conflicting with text color */
+html.theme-dark .option-label {
+  color: #e5ebf1 !important;
+}
+
+.example-container {
+  gap: 1rem;
+  display: flex;
+  flex-direction: column;
+}