@workday/canvas-kit-docs
Version:
Documentation components of Canvas Kit components
1,571 lines • 205 kB
JavaScript
module.exports = {specifications: [
{
"type": "file",
"name": "Autocomplete",
"children": [
{
"type": "describe",
"name": "Autocomplete",
"children": [
{
"type": "describe",
"name": "given the 'Autocomplete' story is rendered",
"children": [
{
"type": "it",
"name": "should have aria-haspopup set to listbox"
},
{
"type": "it",
"name": "should have aria-expanded set to false"
},
{
"type": "it",
"name": "should not have an aria-activedescendant attribute"
},
{
"type": "it",
"name": "should have an aria-autocomplete attribute set to \"list\""
},
{
"type": "it",
"name": "should not set aria-owns"
},
{
"type": "it",
"name": "should not show menu"
},
{
"type": "it",
"name": "should not show the clear button"
},
{
"type": "describe",
"name": "when the combobox is opened",
"children": [
{
"type": "describe",
"name": "when the combobox is clicked",
"children": [
{
"type": "it",
"name": "should close the menu"
}
]
},
{
"type": "it",
"name": "should set the aria-owns to reference the listbox element"
},
{
"type": "it",
"name": "should show menu"
},
{
"type": "it",
"name": "should not have activedescendant set"
},
{
"type": "it",
"name": "should not have visual focus on any element"
},
{
"type": "it",
"name": "should not have aria-selected=true on any elements"
},
{
"type": "describe",
"name": "when the user types a printable character \"b\"",
"children": [
{
"type": "it",
"name": "should clear activedescendant"
},
{
"type": "it",
"name": "should not have visual focus on the first item"
},
{
"type": "it",
"name": "should set aria-selected=false to the first option"
}
]
},
{
"type": "describe",
"name": "when \"Red\" is typed",
"children": [
{
"type": "it",
"name": "should have the value entered as the value"
},
{
"type": "describe",
"name": "when escape key is pressed",
"children": [
{
"type": "it",
"name": "should close the listbox"
},
{
"type": "it",
"name": "should keep focus on the combobox"
}
]
},
{
"type": "describe",
"name": "when the clear button is clicked",
"children": [
{
"type": "it",
"name": "should clear the combobox"
},
{
"type": "it",
"name": "should close the listbox"
},
{
"type": "it",
"name": "should keep focus on the combobox"
}
]
},
{
"type": "describe",
"name": "when down arrow key is pressed",
"children": [
{
"type": "it",
"name": "should have activedecendant set to the first option"
},
{
"type": "it",
"name": "should set visual focus to the first option"
},
{
"type": "describe",
"name": "when the user presses the enter key",
"children": [
{
"type": "it",
"name": "should set the combobox value to the option text value"
},
{
"type": "it",
"name": "should close the listbox"
},
{
"type": "describe",
"name": "when the user hits the \"2\" key",
"children": [
{
"type": "it",
"name": "should open the listbox"
},
{
"type": "it",
"name": "should change the combobox value to reflect the key entered"
},
{
"type": "it",
"name": "should set aria-selected to the first option"
}
]
}
]
},
{
"type": "describe",
"name": "when the user presses metaKey + enter key",
"children": [
{
"type": "it",
"name": "should not set the combobox value to the option text value"
},
{
"type": "it",
"name": "should not close the listbox"
}
]
}
]
},
{
"type": "describe",
"name": "when the user clicks on the first option",
"children": [
{
"type": "it",
"name": "should set the combobox value to the option text value"
},
{
"type": "it",
"name": "should close the listbox"
},
{
"type": "it",
"name": "should keep focus on combobox"
},
{
"type": "describe",
"name": "when the user clicks on the combobox",
"children": [
{
"type": "it",
"name": "should open the listbox again"
}
]
}
]
},
{
"type": "describe",
"name": "when down arrow key is pressed two times",
"children": [
{
"type": "it",
"name": "should have activedecendant set to the second option"
},
{
"type": "it",
"name": "should set visual focus on the second option"
},
{
"type": "it",
"name": "should not have aria-selected=true on any elements"
}
]
},
{
"type": "describe",
"name": "when the value is \"Red Apple 1\"",
"children": [
{
"type": "describe",
"name": "when the value is \"Red Apple 1\" and down arrow key is pressed six times",
"children": [
{
"type": "it",
"name": "should have activedecendant set to the first option"
},
{
"type": "it",
"name": "should set visual focus on the first option"
},
{
"type": "it",
"name": "should not have aria-selected=true on any elements"
}
]
},
{
"type": "describe",
"name": "when up arrow key is pressed",
"children": [
{
"type": "it",
"name": "should have activedecendant set to the last option"
},
{
"type": "it",
"name": "should set visual focus on the last option"
},
{
"type": "it",
"name": "should not have aria-selected=true on any elements"
}
]
},
{
"type": "describe",
"name": "when up arrow key is pressed two times",
"children": [
{
"type": "it",
"name": "should have activedecendant set to the third option"
},
{
"type": "it",
"name": "should set visual focus on the third option"
},
{
"type": "it",
"name": "should not have aria-selected=true on any elements"
}
]
},
{
"type": "describe",
"name": "when up arrow key is pressed four times",
"children": [
{
"type": "it",
"name": "should have activedecendant set to the first option"
},
{
"type": "it",
"name": "should set visual focus on the first option"
},
{
"type": "it",
"name": "should not have aria-selected=true on any elements"
}
]
}
]
}
]
},
{
"type": "describe",
"name": "when the user types in a value not found",
"children": [
{
"type": "describe",
"name": "when the user hits the enter key",
"children": []
},
{
"type": "it",
"name": "should not clear the input"
}
]
}
]
}
]
}
]
}
]
},
{
"type": "file",
"name": "Avatar",
"children": [
{
"type": "describe",
"name": "Avatar",
"children": [
{
"type": "describe",
"name": "Image Example",
"children": [
{
"type": "it",
"name": "should not have any axe errors"
},
{
"type": "it",
"name": "should show the initials HD given the name is Happy Doggo until the image is loaded "
}
]
}
]
}
]
},
{
"type": "file",
"name": "Banner",
"children": [
{
"type": "describe",
"name": "Banner",
"children": [
{
"type": "describe",
"name": "Error Example",
"children": [
{
"type": "it",
"name": "should pass axe checks"
},
{
"type": "it",
"name": "should have an element with a role of \"button\""
}
]
},
{
"type": "describe",
"name": "Sticky Example",
"children": [
{
"type": "it",
"name": "should pass axe checks"
},
{
"type": "it",
"name": "should have an element with a role of \"button\""
}
]
}
]
}
]
},
{
"type": "file",
"name": "Breadcrumbs",
"children": [
{
"type": "describe",
"name": "Breadcrumbs",
"children": [
{
"type": "describe",
"name": "given the [Components/Navigation/Breadcrumbs, Basic] example is rendered",
"children": [
{
"type": "it",
"name": "should not have any axe errors"
},
{
"type": "it",
"name": "should have an element with a role of \"navigation\""
},
{
"type": "it",
"name": "should have an element with a label of \"Breadcrumbs\""
},
{
"type": "it",
"name": "should have a role of \"list\" on the <ul> element"
},
{
"type": "it",
"name": "should have list item elements inside the \"list\""
},
{
"type": "it",
"name": "should have \"data-id\" for list items"
},
{
"type": "describe",
"name": "when a breadcrumb link is focused",
"children": [
{
"type": "it",
"name": "should show tooltips for truncated link items"
},
{
"type": "it",
"name": "should not show tooltips for not truncated link items"
},
{
"type": "describe",
"name": "when the tab key is pressed",
"children": [
{
"type": "it",
"name": "should move focus to the next link"
}
]
}
]
},
{
"type": "describe",
"name": "when the last breadcrumb (current item) is focused",
"children": [
{
"type": "it",
"name": "should show a tooltip for the truncated text"
}
]
}
]
},
{
"type": "describe",
"name": "given the [Components/Navigation/Breadcrumbs, Overflow Breadcrumbs] example is rendered",
"children": [
{
"type": "it",
"name": "should not have any axe errors"
},
{
"type": "it",
"name": "should have 8 items inside the \"list\""
},
{
"type": "it",
"name": "should have aria-expanded set to \"false\" on the dropdown button"
},
{
"type": "it",
"name": "should have aria-haspopup set to \"true\" on the dropdown button"
},
{
"type": "it",
"name": "should have aria-controls set to \"menu\" on the dropdown button"
}
]
},
{
"type": "describe",
"name": "when action list container is only 480px wide",
"children": [
{
"type": "it",
"name": "should have 4 items inside the \"list\""
},
{
"type": "describe",
"name": "when the \"More\" button is clicked",
"children": [
{
"type": "it",
"name": "should show the overflow menu"
},
{
"type": "it",
"name": "should contain second link as the first menu item"
},
{
"type": "it",
"name": "should contain fifth link as the last menu item"
}
]
}
]
},
{
"type": "describe",
"name": "when action list container is only 250px wide",
"children": [
{
"type": "it",
"name": "should have 3 list items inside the \"list\""
},
{
"type": "describe",
"name": "when the \"More\" button is clicked",
"children": [
{
"type": "it",
"name": "should show the overflow menu"
},
{
"type": "it",
"name": "should contain second link as the first menu item"
},
{
"type": "it",
"name": "should contain fifth link as the last menu item"
}
]
}
]
},
{
"type": "describe",
"name": "when action list container is only 150px wide",
"children": [
{
"type": "it",
"name": "should have 2 list items inside the \"list\""
},
{
"type": "describe",
"name": "when the \"More\" button is clicked",
"children": [
{
"type": "it",
"name": "should show the overflow menu"
},
{
"type": "it",
"name": "should contain home link as the first menu item"
},
{
"type": "it",
"name": "should contain fifth link as the last menu item"
}
]
}
]
}
]
},
{
"type": "describe",
"name": "given the [Components/Navigation/Breadcrumbs, Overflow Breadcrumbs] menu is rendered",
"children": [
{
"type": "it",
"name": "should not have any axe errors"
},
{
"type": "it",
"name": "should have role set to \"menu\" on the dropdown menu"
},
{
"type": "it",
"name": "should toggle the button's aria-expanded attribute to true"
},
{
"type": "it",
"name": "should have role set to \"menuitem\" for dropdown item link"
},
{
"type": "describe",
"name": "when the dropdown menu is toggled with a keypress",
"children": [
{
"type": "it",
"name": "should set focus to the first menu item"
}
]
},
{
"type": "describe",
"name": "when the first menu item is focused",
"children": [
{
"type": "it",
"name": "should toggle focus to the second menu item on down keypress"
}
]
},
{
"type": "describe",
"name": "when the last menu item is focused",
"children": [
{
"type": "it",
"name": "should roll the focus back to the first menu item on down keypress"
}
]
},
{
"type": "describe",
"name": "when the down arrow key is pressed on the dropdown menu",
"children": [
{
"type": "it",
"name": "should toggle focus to the next menu item on down keypress"
}
]
},
{
"type": "describe",
"name": "when the up arrow key is pressed on the dropdown menu",
"children": [
{
"type": "it",
"name": "should toggle focus to the previous list item"
},
{
"type": "it",
"name": "should return focus from the first menu item to the last"
}
]
},
{
"type": "describe",
"name": "when the escape key is pressed on the dropdown menu",
"children": [
{
"type": "it",
"name": "should return focus to the dropdown menu button"
}
]
}
]
}
]
},
{
"type": "file",
"name": "Button",
"children": [
{
"type": "describe",
"name": "Button",
"children": [
{
"type": "describe",
"name": "given primary buttons are rendered",
"children": [
{
"type": "it",
"name": "should not have any axe errors"
},
{
"type": "it",
"name": "should render the correct text"
}
]
},
{
"type": "describe",
"name": "given delete buttons are rendered",
"children": [
{
"type": "it",
"name": "should not have any axe errors"
},
{
"type": "it",
"name": "should render the correct text"
}
]
}
]
}
]
},
{
"type": "file",
"name": "Checkbox",
"children": [
{
"type": "describe",
"name": "Checkbox",
"children": [
{
"type": "describe",
"name": "given the 'Basic' example is rendered",
"children": [
{
"type": "it",
"name": "should not have any axe errors"
},
{
"type": "describe",
"name": "when clicked",
"children": [
{
"type": "it",
"name": "should be checked"
}
]
}
]
},
{
"type": "describe",
"name": "given the 'Caution' example is rendered",
"children": [
{
"type": "it",
"name": "should not have any axe errors"
},
{
"type": "describe",
"name": "when clicked",
"children": [
{
"type": "it",
"name": "should be checked"
}
]
}
]
},
{
"type": "describe",
"name": "given the 'Error' example is rendered",
"children": [
{
"type": "it",
"name": "should not have any axe errors"
},
{
"type": "describe",
"name": "when clicked",
"children": [
{
"type": "it",
"name": "should be checked"
}
]
}
]
},
{
"type": "describe",
"name": "given the 'Disabled' example is rendered",
"children": [
{
"type": "it",
"name": "should not have any axe errors"
},
{
"type": "it",
"name": "should be disabled"
}
]
},
{
"type": "describe",
"name": "given the 'Indeterminate' story is rendered",
"children": [
{
"type": "it",
"name": "should not have any axe errors"
},
{
"type": "it",
"name": "should have the correct attributes"
}
]
}
]
}
]
},
{
"type": "file",
"name": "ColorPicker",
"children": [
{
"type": "describe",
"name": "ColorInput",
"children": [
{
"type": "describe",
"name": "given the 'Basic' example is rendered",
"children": [
{
"type": "it",
"name": "should not have any axe errors"
},
{
"type": "describe",
"name": "when clicked",
"children": [
{
"type": "it",
"name": "should be focused"
}
]
},
{
"type": "describe",
"name": "when provided a 6 digit hex value",
"children": [
{
"type": "it",
"name": "should reflect the hex value"
}
]
},
{
"type": "describe",
"name": "when provided a 3 digit hex",
"children": [
{
"type": "it",
"name": "should reflect the hex value"
}
]
},
{
"type": "describe",
"name": "when provided a hex with a hash",
"children": [
{
"type": "it",
"name": "should strip the hash from the hex value"
}
]
},
{
"type": "describe",
"name": "when provided a hex with more than 6 characters",
"children": [
{
"type": "it",
"name": "should truncate the value to a length of 6"
}
]
}
]
},
{
"type": "describe",
"name": "given the 'Caution' example is rendered",
"children": [
{
"type": "it",
"name": "should not have any axe errors"
},
{
"type": "describe",
"name": "when clicked",
"children": [
{
"type": "it",
"name": "should be focused"
}
]
},
{
"type": "describe",
"name": "when provided a 6 digit hex value",
"children": [
{
"type": "it",
"name": "should reflect the hex value"
}
]
},
{
"type": "describe",
"name": "when provided a 3 digit hex",
"children": [
{
"type": "it",
"name": "should reflect the hex value"
}
]
},
{
"type": "describe",
"name": "when provided a hex with a hash",
"children": [
{
"type": "it",
"name": "should strip the hash from the hex value"
}
]
},
{
"type": "describe",
"name": "when provided a hex with more than 6 characters",
"children": [
{
"type": "it",
"name": "should truncate the value to a length of 6"
}
]
}
]
},
{
"type": "describe",
"name": "given the 'Error' example is rendered",
"children": [
{
"type": "it",
"name": "should not have any axe errors"
},
{
"type": "describe",
"name": "when clicked",
"children": [
{
"type": "it",
"name": "should be focused"
}
]
},
{
"type": "describe",
"name": "when provided a 6 digit hex value",
"children": [
{
"type": "it",
"name": "should reflect the hex value"
}
]
},
{
"type": "describe",
"name": "when provided a 3 digit hex",
"children": [
{
"type": "it",
"name": "should reflect the hex value"
}
]
},
{
"type": "describe",
"name": "when provided a hex with a hash",
"children": [
{
"type": "it",
"name": "should strip the hash from the hex value"
}
]
},
{
"type": "describe",
"name": "when provided a hex with more than 6 characters",
"children": [
{
"type": "it",
"name": "should truncate the value to a length of 6"
}
]
}
]
},
{
"type": "describe",
"name": "given the 'Checked' example is rendered",
"children": [
{
"type": "it",
"name": "should not have any axe errors"
},
{
"type": "describe",
"name": "when clicked",
"children": [
{
"type": "it",
"name": "should be focused"
}
]
},
{
"type": "describe",
"name": "when provided a 6 digit hex value",
"children": [
{
"type": "it",
"name": "should reflect the hex value"
}
]
},
{
"type": "describe",
"name": "when provided a 3 digit hex",
"children": [
{
"type": "it",
"name": "should reflect the hex value"
}
]
},
{
"type": "describe",
"name": "when provided a hex with a hash",
"children": [
{
"type": "it",
"name": "should strip the hash from the hex value"
}
]
},
{
"type": "describe",
"name": "when provided a hex with more than 6 characters",
"children": [
{
"type": "it",
"name": "should truncate the value to a length of 6"
}
]
}
]
},
{
"type": "describe",
"name": "given the 'Grow' example is rendered",
"children": [
{
"type": "it",
"name": "should not have any axe errors"
},
{
"type": "describe",
"name": "when clicked",
"children": [
{
"type": "it",
"name": "should be focused"
}
]
},
{
"type": "describe",
"name": "when provided a 6 digit hex value",
"children": [
{
"type": "it",
"name": "should reflect the hex value"
}
]
},
{
"type": "describe",
"name": "when provided a 3 digit hex",
"children": [
{
"type": "it",
"name": "should reflect the hex value"
}
]
},
{
"type": "describe",
"name": "when provided a hex with a hash",
"children": [
{
"type": "it",
"name": "should strip the hash from the hex value"
}
]
},
{
"type": "describe",
"name": "when provided a hex with more than 6 characters",
"children": [
{
"type": "it",
"name": "should truncate the value to a length of 6"
}
]
}
]
},
{
"type": "describe",
"name": "given the `Disabled` example is rendered",
"children": [
{
"type": "it",
"name": "should not have any axe errors"
},
{
"type": "it",
"name": "should be disabled"
}
]
}
]
},
{
"type": "describe",
"name": "ColorPreview",
"children": [
{
"type": "describe",
"name": "given the 'Basic' story is rendered",
"children": [
{
"type": "it",
"name": "should not have any axe errors"
}
]
}
]
},
{
"type": "describe",
"name": "ColorPicker",
"children": [
{
"type": "describe",
"name": "Icon button ColorPicker Popup",
"children": [
{
"type": "describe",
"name": "when the SecondaryButton is clicked",
"children": [
{
"type": "it",
"name": "should not have any axe errors"
},
{
"type": "it",
"name": "should be open"
},
{
"type": "describe",
"name": "when a swatch is clicked",
"children": [
{
"type": "it",
"name": "should have check icon"
},
{
"type": "describe",
"name": "when color reset is clicked",
"children": [
{
"type": "it",
"name": "should set the color picker value to the reset color"
}
]
}
]
},
{
"type": "describe",
"name": "when a custom color is submitted",
"children": [
{
"type": "it",
"name": "should set the selected color to input value"
}
]
}
]
}
]
},
{
"type": "describe",
"name": "Color Input ColorPicker Popup",
"children": [
{
"type": "describe",
"name": "when the input is focused",
"children": [
{
"type": "it",
"name": "should not have any axe errors"
},
{
"type": "it",
"name": "should be open"
},
{
"type": "describe",
"name": "when a swatch is clicked",
"children": [
{
"type": "it",
"name": "should update the color input to the swatch color"
},
{
"type": "it",
"name": "should have check icon"
},
{
"type": "describe",
"name": "when color reset is clicked",
"children": [
{
"type": "it",
"name": "should set the color picker value to the reset color"
}
]
}
]
}
]
}
]
},
{
"type": "describe",
"name": "when the InputInteraction story is loaded",
"children": [
{
"type": "describe",
"name": "when input is entered into the color input and user hits enter",
"children": [
{
"type": "it",
"name": "should not enter a newline in the textarea"
}
]
}
]
}
]
}
]
},
{
"type": "file",
"name": "Dialog",
"children": [
{
"type": "describe",
"name": "Dialog",
"children": [
{
"type": "describe",
"name": "given the 'DialogWithFallbackPlacements' example is rendered",
"children": [
{
"type": "describe",
"name": "check the fallback placements",
"children": [
{
"type": "describe",
"name": "when the preferred placement is set to top",
"children": [
{
"type": "it",
"name": "should show the fallback placement: bottom"
}
]
},
{
"type": "describe",
"name": "when the preferred placement is set to left",
"children": [
{
"type": "it",
"name": "should show the fallback placement: right"
}
]
},
{
"type": "describe",
"name": "when the preferred placement is set to right",
"children": [
{
"type": "it",
"name": "should show the fallback placement: left"
}
]
},
{
"type": "describe",
"name": "when the preferred placement is set to bottom",
"children": [
{
"type": "it",
"name": "should show the fallback placement: top"
}
]
}
]
}
]
}
]
}
]
},
{
"type": "file",
"name": "Examples",
"children": [
{
"type": "describe",
"name": "TextInputWithReactHookForm",
"children": [
{
"type": "describe",
"name": "given inputs using React Hook Form",
"children": [
{
"type": "it",
"name": "should not have any axe errors"
}
]
}
]
}
]
},
{
"type": "file",
"name": "ExpandableContainer",
"children": [
{
"type": "describe",
"name": "ExpandableContainer",
"children": [
{
"type": "describe",
"name": "given the [Labs/Expandable, Long Title] story is rendered",
"children": [
{
"type": "it",
"name": "should pass axe checks"
},
{
"type": "it",
"name": "should have aria-expanded set to false"
},
{
"type": "it",
"name": "should not show expanded content"
},
{
"type": "describe",
"name": "when the container is clicked",
"children": [
{
"type": "it",
"name": "should set aria-expanded to true"
},
{
"type": "it",
"name": "should show expanded content"
},
{
"type": "it",
"name": "should have an aria-controls attribute pointing to the id of content"
},
{
"type": "describe",
"name": "when the container is clicked again",
"children": [
{
"type": "it",
"name": "should hide expanded content"
},
{
"type": "it",
"name": "should have aria-expanded set to false"
}
]
}
]
}
]
}
]
}
]
},
{
"type": "file",
"name": "FormField",
"children": [
{
"type": "describe",
"name": "Form Field",
"children": [
{
"type": "describe",
"name": "given the Basic example is rendered",
"children": [
{
"type": "it",
"name": "should not have any axe errors"
},
{
"type": "it",
"name": "should add an \"id\" to the input and point it to the \"for\" attribute of the label"
},
{
"type": "it",
"name": "should add an \"aria-labelledby\" to the input and point it to the \"id\" attribute of the label"
},
{
"type": "it",
"name": "should link the input to the label name"
},
{
"type": "describe",
"name": "when clicking on the label",
"children": [
{
"type": "it",
"name": "should focus the input"
}
]
}
]
},
{
"type": "describe",
"name": "given the 'Caution' story is rendered",
"children": [
{
"type": "it",
"name": "should not have any axe errors"
},
{
"type": "it",
"name": "should connect the input with the hint text"
}
]
},
{
"type": "describe",
"name": "given the 'Error' story is rendered",
"children": [
{
"type": "it",
"name": "should not have any axe errors"
},
{
"type": "it",
"name": "should connect the input with the hint text"
}
]
},
{
"type": "describe",
"name": "given the Required story is rendered",
"children": [
{
"type": "it",
"name": "should not have any axe errors"
},
{
"type": "it",
"name": "the input should have a \"required\" attribute"
}
]
}
]
}
]
},
{
"type": "file",
"name": "Hyperlink",
"children": [
{
"type": "describe",
"name": "Hyperlink",
"children": [
{
"type": "describe",
"name": "given internal hyperlinks are rendered",
"children": [
{
"type": "it",
"name": "should not have any axe errors"
},
{
"type": "it",
"name": "should render the correct text"
}
]
},
{
"type": "describe",
"name": "given external hyperlinks are rendered",
"children": [
{
"type": "it",
"name": "should not have any axe errors"
},
{
"type": "it",
"name": "should render the correct text"
}
]
}
]
}
]
},
{
"type": "file",
"name": "InformationHighlight",
"children": [
{
"type": "describe",
"name": "Information Highlight",
"children": [
{
"type": "describe",
"name": "Informational Example",
"children": [
{
"type": "it",
"name": "should pass axe checks"
},
{
"type": "it",
"name": "should have an element with a role o