-
Features of A Standard Doenet Component
-
+
+ Features of A Standard Doenet Component
+
These are the guidelines for creating components for user input on
Doenet. They are guidelines -- you can break them (and should if
something looks ridiculous), but make sure you have a reason why you
need to and that you can convince someone else of that reason. Once
you’ve created or fixed a component, add the documentation for it to
- this file ../src/Tools/uiDocs.js and update the component spreadsheet
-
- {" "}
here
-
+
.{" "}
-
-
+
+
-
Comments on Accessibility
-
+ Comments on Accessibility
+
All clickable elements need to have a focus indicator. Our standard is
a 2px border that matches the element's current border with a 2px
- offset. See styling
-
- {" "}
- here{" "}
- {" "}
-
-
+ here
+
+ {"."}
+
+
All clickable elements also need an aria-label. Some elements, like
buttons, do this for you, so adding an additional aria-label is
considered bad practice. The naming techniques and accessible name
- guidance sections will be the most helpful. Read more
-
- {" "}
- here{" "}
-
-
-
+ here
+
+ {"."}
+
+
All components must follow standard keyboard and aria practices for
that specific element. Find the element you are working on here and
add the required keyboard interactions and aria information that it
- lists. Here is the
-
- {" "}
- link{" "}
-
-
+ link
+
+ {"."}
+
-
States to Consider (* denotes required)
-
- *disabled - remove ability for user to interact with component,
- see styling
- States to Consider (* denotes required)
+
+ *disabled - remove ability for user to interact
+ with component, see styling{" "}
+
- {" "}
here
-
-
-
- *alert - if component requires user's attention, give red
- #C1292E border, see styling
-
+ {"."}
+
+
+ *alert - if component requires user's attention,
+ give red #C1292E border, see styling{" "}
+
- {" "}
here
-
-
-
+
+ {"."}
+
+
-
Standard Props (* denotes required)
-
- width = menu (235px) is the only option, otherwise the size
- should be a default based on input (text, icons, ...)
-
-
- value = information expected to be shown on component (text on
- Button)
-
-
- icon = small image that can be displayed, if it can show text -
- it can have an icon. More info
- Standard Props (* denotes required)
+
+ width = menu (235px) is the only option, otherwise
+ the size should be a default based on input (text, icons, ...)
+
+
+ value = information expected to be shown on
+ component (text on Button)
+
+
+ icon = small image that can be displayed, if it
+ can show text - it can have an icon. More info{" "}
+
- {" "}
here
-
-
-
- value + icon = ability to have icon and value together
-
-
- label = text before componenet telling user what it is for,
- 14px font size
-
-
- vertical label = ability to have label stack on top of
- component, label must be there for vertical label to work
-
-
- placeholder = default shown before user input
-
-
- *margin = default is 0px, make 4px left and right margin with
- 2px bottom margin on label if prop margin
-
-
- *aria-label = built in HTML accessibility requirement
-
-
- onClick = you know what this is, don’t use callback function
-
-
- onChange = okay you probably know this as well, no callback
- function!
-
-
- onBlur = same idea
-
-
- onKeyDown = same thing here
-
+
+ {"."}
+
+
+ value + icon = ability to have icon and value
+ together
+
+
+ label = text before componenet telling user what
+ it is for, 14px font size
+
+
+ vertical label = ability to have label stack on
+ top of component, label must be there for vertical label to work
+
+
+ placeholder = default shown before user input
+
+
+ *margin = default is 0px, make 4px left and right
+ margin with 2px bottom margin on label if prop margin
+
+
+ *aria-label = built in HTML accessibility
+ requirement
+
+
+ onClick = you know what this is, don’t use
+ callback function
+
+
+ onChange = okay you probably know this as well, no
+ callback function!
+
+
+ onBlur = same idea
+
+
+ onKeyDown = same thing here
+
{/*
onHover = you can guess this, see
*/}
-
+
-
Comments on Styling
-
- Only use the colors found on the
- Comments on Styling
+
+ Only use the colors found on the{" "}
+
- {" "}
- Style Guide!!{" "}
- {" "}
+ Style Guide!!
+ {" "}
(Unless you've talked to Clara or Kevin about it...)
-
-
- Give it a border or a color, as shown
-
+
+ Give it a border or a color, as shown{" "}
+
- {" "}
- here{" "}
-
-
-
+ here
+
+ {"."}
+
+
Don’t apply the font to the component, fonts will be called in the
- Tool that loads it
-
-