mirror of
https://github.com/kremalicious/blog.git
synced 2024-12-23 01:30:01 +01:00
Matthias Kretschmann
299084de93
* basic astro setup, kick out all gatsby configs * move content folder * src/pages setup * more file reorg * more config updates * more reorgs * refactor * refactor * bump astro * refactor * svg icon build system, theme switch * remark plugin for lead paragraph, more refactor * make images work * post meta * custom Picture component * Pagination, More component, 404 fixes * linking fixes * add table of contents * post actions fixes * tag fixes * content changes * content changes: move media files to their posts * more content moving, remove media folder * refactor remark-lead-paragraph * link css file when defined in post frontmatter * move content up again * kbd post update * allow js * downloads solution * add astro check * redirect_from solution * githubLink solution * reorg * exif solution as prebuild step * exif solution on each post during build * isolate lead paragraph extraction to articles * restore Exif components * deploy script update * fix redirects * xml & json feeds * build fix * fix exif readout in production * head and seo tweaks, add feeds * tweak image display * archive pages with single layout * restore tags archive * sitemap setup * restore thanks page functionality * reorg * cleanup * parallel scripts during prebuild * restore jest setup * remove jest, switch to vitest as test runner * adapt CI * test refactor * typescript tweaks * avatar fixes * typings * restore search functionality * theme switch with nanostores * fixes * test fixes * restore changelog functionality * umami script * border color tweak * related posts with fuse.js * plawright e2e testing setup * search tweaks * simplify typekit loading * photo fix * e2e tests * related posts fix * fix tags archive * tweaks * tweaks * linux snapshots * fix header test * new symlink tactic * fix dev server in codespaces * fix yaml * ci fixes * changelog loading tweaks * e2e against dev server on ci * changelog tweaks * ci tweaks * ci tweaks * ci tweaks * docs updates * ci tweaks * refactor photo creation script * package updates * refactor search * ci tweak * ci tweaks * test tweaks, more unit tests * more unit tests * post creation script tweaks * refactor new scripts, test them for real life * more tests * refactor * codeclimate-action update * uses update * limit ci runs * fix theme toggle, test it * more tests * favicon files cleanup * icon components location change * type checking through ci * command fixes * ci fix * search tweaks * ci tweaks * revised favicons, write post draft about it * drafts filtering fix * lint fix, favicon fixes * copy changes * fix related search images * content updates * new codeblock styles, copy tweaks, fixes * package updates * typing fixes * lint fix * content updates * restore link posts * faster theme switching * split up astro utils * related posts fixes * fix * refactor * fixes * copy tweaks * fixes * picture tweaks * image fixes * feed fixes, adapt for json feed v1.1 * e2e test updates * layout tweaks * update snaphots * migrate to createMarkdownProcessor * ci cache tweaks * activate more browsers for e2e testing * switch to macos-13 images * build caching tweaks * markdown fix * set image quality * remove avif generation * picture tweaks * head fixes * add og:image:alt * create-icons test * new post: Favicon Generation with Astro
321 lines
10 KiB
TypeScript
321 lines
10 KiB
TypeScript
// All the WAI-ARIA 1.1 attributes from https://www.w3.org/TR/wai-aria-1.1/
|
|
export interface AriaAttributes {
|
|
/** Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. */
|
|
'aria-activedescendant'?: string
|
|
/** Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. */
|
|
'aria-atomic'?: 'true' | 'false' | boolean
|
|
/**
|
|
* Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be
|
|
* presented if they are made.
|
|
*/
|
|
'aria-autocomplete'?: 'none' | 'inline' | 'list' | 'both'
|
|
/** Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user. */
|
|
'aria-busy'?: 'true' | 'false' | boolean
|
|
/**
|
|
* Indicates the current 'checked' state of checkboxes, radio buttons, and other widgets.
|
|
* @see aria-pressed @see aria-selected.
|
|
*/
|
|
'aria-checked'?: 'false' | 'mixed' | 'true' | boolean
|
|
/**
|
|
* Defines the total number of columns in a table, grid, or treegrid.
|
|
* @see aria-colindex.
|
|
*/
|
|
'aria-colcount'?: number
|
|
/**
|
|
* Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.
|
|
* @see aria-colcount @see aria-colspan.
|
|
*/
|
|
'aria-colindex'?: number
|
|
/**
|
|
* Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
|
|
* @see aria-colindex @see aria-rowspan.
|
|
*/
|
|
'aria-colspan'?: number
|
|
/**
|
|
* Identifies the element (or elements) whose contents or presence are controlled by the current element.
|
|
* @see aria-owns.
|
|
*/
|
|
'aria-controls'?: string
|
|
/** Indicates the element that represents the current item within a container or set of related elements. */
|
|
'aria-current'?:
|
|
| 'false'
|
|
| 'true'
|
|
| 'page'
|
|
| 'step'
|
|
| 'location'
|
|
| 'date'
|
|
| 'time'
|
|
| boolean
|
|
/**
|
|
* Identifies the element (or elements) that describes the object.
|
|
* @see aria-labelledby
|
|
*/
|
|
'aria-describedby'?: string
|
|
/**
|
|
* Identifies the element that provides a detailed, extended description for the object.
|
|
* @see aria-describedby.
|
|
*/
|
|
'aria-details'?: string
|
|
/**
|
|
* Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
|
|
* @see aria-hidden @see aria-readonly.
|
|
*/
|
|
'aria-disabled'?: 'true' | 'false' | boolean
|
|
/**
|
|
* Identifies the element that provides an error message for the object.
|
|
* @see aria-invalid @see aria-describedby.
|
|
*/
|
|
'aria-errormessage'?: string
|
|
/** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */
|
|
'aria-expanded'?: 'true' | 'false' | boolean
|
|
/**
|
|
* Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,
|
|
* allows assistive technology to override the general default of reading in document source order.
|
|
*/
|
|
'aria-flowto'?: string
|
|
/** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */
|
|
'aria-haspopup'?:
|
|
| 'false'
|
|
| 'true'
|
|
| 'menu'
|
|
| 'listbox'
|
|
| 'tree'
|
|
| 'grid'
|
|
| 'dialog'
|
|
| boolean
|
|
/**
|
|
* Indicates whether the element is exposed to an accessibility API.
|
|
* @see aria-disabled.
|
|
*/
|
|
'aria-hidden'?: 'true' | 'false' | boolean
|
|
/**
|
|
* Indicates the entered value does not conform to the format expected by the application.
|
|
* @see aria-errormessage.
|
|
*/
|
|
'aria-invalid'?: 'false' | 'true' | 'grammar' | 'spelling' | boolean
|
|
/** Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. */
|
|
'aria-keyshortcuts'?: string
|
|
/**
|
|
* Defines a string value that labels the current element.
|
|
* @see aria-labelledby.
|
|
*/
|
|
'aria-label'?: string
|
|
/**
|
|
* Identifies the element (or elements) that labels the current element.
|
|
* @see aria-describedby.
|
|
*/
|
|
'aria-labelledby'?: string
|
|
/** Defines the hierarchical level of an element within a structure. */
|
|
'aria-level'?: number
|
|
/** Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. */
|
|
'aria-live'?: 'off' | 'assertive' | 'polite'
|
|
/** Indicates whether an element is modal when displayed. */
|
|
'aria-modal'?: 'true' | 'false' | boolean
|
|
/** Indicates whether a text box accepts multiple lines of input or only a single line. */
|
|
'aria-multiline'?: 'true' | 'false' | boolean
|
|
/** Indicates that the user may select more than one item from the current selectable descendants. */
|
|
'aria-multiselectable'?: 'true' | 'false' | boolean
|
|
/** Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. */
|
|
'aria-orientation'?: 'horizontal' | 'vertical'
|
|
/**
|
|
* Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship
|
|
* between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
|
|
* @see aria-controls.
|
|
*/
|
|
'aria-owns'?: string
|
|
/**
|
|
* Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.
|
|
* A hint could be a sample value or a brief description of the expected format.
|
|
*/
|
|
'aria-placeholder'?: string
|
|
/**
|
|
* Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
|
|
* @see aria-setsize.
|
|
*/
|
|
'aria-posinset'?: number
|
|
/**
|
|
* Indicates the current 'pressed' state of toggle buttons.
|
|
* @see aria-checked @see aria-selected.
|
|
*/
|
|
'aria-pressed'?: 'false' | 'mixed' | 'true' | boolean
|
|
/**
|
|
* Indicates that the element is not editable, but is otherwise operable.
|
|
* @see aria-disabled.
|
|
*/
|
|
'aria-readonly'?: 'true' | 'false' | boolean
|
|
/**
|
|
* Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
|
|
* @see aria-atomic.
|
|
*/
|
|
'aria-relevant'?:
|
|
| 'additions'
|
|
| 'additions removals'
|
|
| 'additions text'
|
|
| 'all'
|
|
| 'removals'
|
|
| 'removals additions'
|
|
| 'removals text'
|
|
| 'text'
|
|
| 'text additions'
|
|
| 'text removals'
|
|
/** Indicates that user input is required on the element before a form may be submitted. */
|
|
'aria-required'?: 'true' | 'false' | boolean
|
|
/** Defines a human-readable, author-localized description for the role of an element. */
|
|
'aria-roledescription'?: string
|
|
/**
|
|
* Defines the total number of rows in a table, grid, or treegrid.
|
|
* @see aria-rowindex.
|
|
*/
|
|
'aria-rowcount'?: number
|
|
/**
|
|
* Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.
|
|
* @see aria-rowcount @see aria-rowspan.
|
|
*/
|
|
'aria-rowindex'?: number
|
|
/**
|
|
* Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
|
|
* @see aria-rowindex @see aria-colspan.
|
|
*/
|
|
'aria-rowspan'?: number
|
|
/**
|
|
* Indicates the current 'selected' state of various widgets.
|
|
* @see aria-checked @see aria-pressed.
|
|
*/
|
|
'aria-selected'?: 'true' | 'false' | boolean
|
|
/**
|
|
* Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
|
|
* @see aria-posinset.
|
|
*/
|
|
'aria-setsize'?: number
|
|
/** Indicates if items in a table or grid are sorted in ascending or descending order. */
|
|
'aria-sort'?: 'none' | 'ascending' | 'descending' | 'other'
|
|
/** Defines the maximum allowed value for a range widget. */
|
|
'aria-valuemax'?: number
|
|
/** Defines the minimum allowed value for a range widget. */
|
|
'aria-valuemin'?: number
|
|
/**
|
|
* Defines the current value for a range widget.
|
|
* @see aria-valuetext.
|
|
*/
|
|
'aria-valuenow'?: number
|
|
/** Defines the human readable text alternative of aria-valuenow for a range widget. */
|
|
'aria-valuetext'?: string
|
|
}
|
|
|
|
// All the WAI-ARIA 1.1 role attribute values from https://www.w3.org/TR/wai-aria-1.1/#role_definitions
|
|
export type AriaRole =
|
|
| 'alert'
|
|
| 'alertdialog'
|
|
| 'application'
|
|
| 'article'
|
|
| 'banner'
|
|
| 'button'
|
|
| 'cell'
|
|
| 'checkbox'
|
|
| 'columnheader'
|
|
| 'combobox'
|
|
| 'complementary'
|
|
| 'contentinfo'
|
|
| 'definition'
|
|
| 'dialog'
|
|
| 'directory'
|
|
| 'document'
|
|
| 'feed'
|
|
| 'figure'
|
|
| 'form'
|
|
| 'grid'
|
|
| 'gridcell'
|
|
| 'group'
|
|
| 'heading'
|
|
| 'img'
|
|
| 'link'
|
|
| 'list'
|
|
| 'listbox'
|
|
| 'listitem'
|
|
| 'log'
|
|
| 'main'
|
|
| 'marquee'
|
|
| 'math'
|
|
| 'menu'
|
|
| 'menubar'
|
|
| 'menuitem'
|
|
| 'menuitemcheckbox'
|
|
| 'menuitemradio'
|
|
| 'navigation'
|
|
| 'none'
|
|
| 'note'
|
|
| 'option'
|
|
| 'presentation'
|
|
| 'progressbar'
|
|
| 'radio'
|
|
| 'radiogroup'
|
|
| 'region'
|
|
| 'row'
|
|
| 'rowgroup'
|
|
| 'rowheader'
|
|
| 'scrollbar'
|
|
| 'search'
|
|
| 'searchbox'
|
|
| 'separator'
|
|
| 'slider'
|
|
| 'spinbutton'
|
|
| 'status'
|
|
| 'switch'
|
|
| 'tab'
|
|
| 'table'
|
|
| 'tablist'
|
|
| 'tabpanel'
|
|
| 'term'
|
|
| 'textbox'
|
|
| 'timer'
|
|
| 'toolbar'
|
|
| 'tooltip'
|
|
| 'tree'
|
|
| 'treegrid'
|
|
| 'treeitem'
|
|
| (string & object)
|
|
|
|
export interface HTMLAttributes extends AriaAttributes {
|
|
accesskey?: string
|
|
autocapitalize?: string
|
|
autofocus?: string
|
|
class?: string
|
|
contenteditable?: 'true' | 'false' | 'inherit' | boolean
|
|
contextMenu?: string
|
|
dir?: 'ltr' | 'rtl' | 'auto'
|
|
draggable?: 'true' | 'false' | boolean
|
|
enterkeyhint?: string
|
|
exportparts?: string
|
|
hidden?: string
|
|
id?: string
|
|
inputmode?: string
|
|
is?: string
|
|
lang?: string
|
|
placeholder?: string
|
|
role?: AriaRole
|
|
slot?: string
|
|
spellcheck?: 'true' | 'false' | boolean
|
|
style?: string
|
|
tabindex?: number
|
|
title?: string
|
|
translate?: 'yes' | 'no'
|
|
}
|
|
|
|
export interface Props extends HTMLAttributes {
|
|
fill?: string
|
|
'fill-opacity'?: number | string
|
|
'fill-rule'?: 'nonzero' | 'evenodd' | 'inherit'
|
|
height?: number | string
|
|
size?: number | string
|
|
stroke?: string
|
|
'stroke-dasharray'?: string | number
|
|
'stroke-dashoffset'?: string | number
|
|
'stroke-linecap'?: 'butt' | 'round' | 'square' | 'inherit'
|
|
'stroke-linejoin'?: 'miter' | 'round' | 'bevel' | 'inherit'
|
|
// 'stroke-miterlimit'?: number | string
|
|
'stroke-opacity'?: number | string
|
|
'stroke-width'?: number | string
|
|
viewBox?: string
|
|
width?: number | string
|
|
}
|