docs: add a draft for the accessibility page

This commit is contained in:
Hans Pagel 2021-01-19 15:20:15 +01:00
parent 43b0e031b0
commit 0ece2be793
3 changed files with 82 additions and 2 deletions

View File

@ -0,0 +1,26 @@
# Accessibility
## toc
## Introduction
We strive to make tiptap accessible to everyone, but to be honest, theres not much work done now. From our current understanding, thats what needs to be done:
### Interface
An interface needs to have semantic markup, must be keyboard accessible and well documented. Currently, we dont even provide an interface, so for now thats totally up to you. But no worries, well provide an interface soon and take accessibility into account early on.
### Editor
The editor needs to produce semantic markup, must be keyboard accessible and well documented. The tiptap content is well structured so thats a good foundation already. That said, we can add support and encourage the usage of additional attributes, for example the Alt-attribute for images.
### Writing assistance (optional)
An optional writing assitance could help people writing content semanticly correct, for example pointing out an incorrect usage of heading levels. With that kind of assistance provided by the core developers, we could help to improve the content of a lot of applications.
## Resources
| Document | Section | Heading |
| -------- | ------- | -------------------------------------------------------------------------------------- |
| WCAG 2.1 | 1.1 | [Text Alternatives](https://www.w3.org/WAI/WCAG21/Understanding/text-alternatives) |
| WCAG 2.1 | 1.1.1 | [Non-text Content](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content) |
| WCAG 2.1 | 2.1 | [Keyboard Accessible](https://www.w3.org/WAI/WCAG21/Understanding/keyboard-accessible) |
| WCAG 2.1 | 2.1.1 | [Keyboard](https://www.w3.org/WAI/WCAG21/Understanding/keyboard) |
| WCAG 2.1 | 4.1.1 | [Parsing](https://www.w3.org/WAI/WCAG21/Understanding/parsing) |
| WCAG 2.1 | 4.1.2 | [Name, Role, Value](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value) |

View File

@ -0,0 +1,51 @@
# Working with TypeScript
## toc
## Introduction
The whole tiptap is code base is written in TypeScript. If you havent heard of it or never used it, no worries. You dont have to.
TypeScript extends JavaScript by adding types (hence the name). It adds new syntax, which doesnt exist in plain JavaScript. Its actually removed before running in the browser, but this step the compilation is important to find bugs early. It checks if you passe the right types of data to functions. For a big and complex project, thats very valuable. It means well get notified of lot of bugs, before shipping code to you.
Anyway, if you dont use TypeScript in your project, thats fine. Youll still be able to use tiptap and even get a really nice autocomplete for the tiptap API (if your editor supports it, but most do).
If youre using TypeScript in your project and want to extend tiptap, there are two things that are good to know.
## Options type
To extend or create default options for an extension, youll need to define a custom type, here is an example:
```ts
import { Extension } from '@tiptap/core'
export interface CustomExtensionOptions {
awesomeness: number,
}
const CustomExtension = Extension.create({
defaultOptions: <CustomExtensionOptions>{
awesomeness: 100,
},
})
```
## Command type
The core package also exports a `Command` type, which needs to be added to all commands that you specify in your code. Here is an example:
```ts
import { Command, Extension } from '@tiptap/core'
const CustomExtension = Extension.create({
addCommands() {
return {
/**
* Comments will be added to the autocomplete.
*/
yourCommand: (): Command => ({ commands }) => {
// …
},
}
},
})
```
Thats basically it. Were doing all the rest automatically.

View File

@ -72,11 +72,14 @@
- title: Complex node views - title: Complex node views
link: /guide/node-views link: /guide/node-views
type: draft type: draft
- title: Working with TypeScript
link: /guide/working-with-typescript
- title: Collaborative editing - title: Collaborative editing
link: /guide/collaborative-editing link: /guide/collaborative-editing
type: pro type: pro
- title: Accessibility
link: /guide/accessibility
type: draft
- title: Working with TypeScript
link: /guide/typescript
- title: API - title: API
items: items: