diff --git a/.changeset/big-icons-report.md b/.changeset/big-icons-report.md new file mode 100644 index 00000000..b2e1ffa5 --- /dev/null +++ b/.changeset/big-icons-report.md @@ -0,0 +1,9 @@ +--- +'nuxt-js': patch +'@chakra-ui/vue': patch +'@chakra-ui/nuxt': patch +'@chakra-ui/theme-vue': patch +'chakra-ui-docs': patch +--- + +Fixes skip link and textarea props diff --git a/.storybook/components/Canvas.vue b/.storybook/components/Canvas.vue index 69005fbe..cb1ce043 100644 --- a/.storybook/components/Canvas.vue +++ b/.storybook/components/Canvas.vue @@ -6,34 +6,41 @@ :bg="colorMode === 'light' ? 'white' : 'gray.800'" :color="colorMode === 'light' ? 'gray.800' : 'gray.50'" class="root" + width="100vw" + height="100vh" + transition="all 0.2s ease-in-out" > - @chakra-ui/vue - - + @chakra-ui/vue + + + Github + + + + + - Github - - - -
-
+ @@ -46,8 +53,10 @@ import { CReset, CButton, CBox, + CFlex, CIconButton, - CColorModeProvider } from '../../packages/chakra-ui-core/src' + CColorModeProvider +} from '../../packages/chakra-ui-core/src' export default { name: 'Canvas', @@ -57,32 +66,9 @@ export default { CReset, CButton, CBox, + CFlex, CIconButton, CColorModeProvider } } - - \ No newline at end of file diff --git a/examples/nuxt-js/CHANGELOG.md b/examples/nuxt-js/CHANGELOG.md index 9e20d9cf..9b9b144c 100644 --- a/examples/nuxt-js/CHANGELOG.md +++ b/examples/nuxt-js/CHANGELOG.md @@ -1,5 +1,12 @@ # nuxt-js +## 1.2.1 + +### Patch Changes + +- Updated dependencies [[`960efd20`](https://github.com/chakra-ui/chakra-ui-vue/commit/960efd20a3e9628da42dde07cce55310c5573a0f)]: + - @chakra-ui/nuxt@0.7.0 + ## 1.2.0 ### Minor Changes diff --git a/examples/nuxt-js/package.json b/examples/nuxt-js/package.json index 9ec31a3b..5ff420d7 100644 --- a/examples/nuxt-js/package.json +++ b/examples/nuxt-js/package.json @@ -1,6 +1,6 @@ { "name": "nuxt-js", - "version": "1.2.0", + "version": "1.2.1", "private": true, "scripts": { "dev": "nuxt", @@ -9,7 +9,7 @@ "generate": "nuxt generate" }, "dependencies": { - "@chakra-ui/nuxt": "^0.6.0", + "@chakra-ui/nuxt": "^0.7.0", "@nuxtjs/emotion": "^0.1.0", "core-js": "^3.15.1", "nuxt": "^2.15.7" diff --git a/packages/chakra-ui-core/CHANGELOG.md b/packages/chakra-ui-core/CHANGELOG.md index 26898cb4..16d49ece 100644 --- a/packages/chakra-ui-core/CHANGELOG.md +++ b/packages/chakra-ui-core/CHANGELOG.md @@ -1,5 +1,16 @@ # Change Log +## 0.13.0 + +### Minor Changes + +- [`960efd20`](https://github.com/chakra-ui/chakra-ui-vue/commit/960efd20a3e9628da42dde07cce55310c5573a0f) Thanks [@codebender828](https://github.com/codebender828)! - Fix `CTextarea` component and fix nuxtjs/emotion dependency + +### Patch Changes + +- Updated dependencies [[`960efd20`](https://github.com/chakra-ui/chakra-ui-vue/commit/960efd20a3e9628da42dde07cce55310c5573a0f)]: + - @chakra-ui/theme-vue@0.6.0 + ## 0.12.0 ### Minor Changes diff --git a/packages/chakra-ui-core/package.json b/packages/chakra-ui-core/package.json index 7c1b04ad..5376eb88 100644 --- a/packages/chakra-ui-core/package.json +++ b/packages/chakra-ui-core/package.json @@ -1,6 +1,6 @@ { "name": "@chakra-ui/vue", - "version": "0.12.0", + "version": "0.13.0", "description": "Build Accessible and Responsive Vue.js websites and applications with speed ⚡️", "main": "dist/cjs/index.js", "module": "dist/esm/index.js", @@ -37,7 +37,7 @@ }, "dependencies": { "@chakra-ui/styled-system": "^1.15.0", - "@chakra-ui/theme-vue": "^0.5.0", + "@chakra-ui/theme-vue": "^0.6.0", "@popperjs/core": "^2.4.0", "animejs": "^3.1.0", "aria-hidden": "^1.1.1", diff --git a/packages/chakra-ui-core/src/CAlertDialog/CAlertDialog.js b/packages/chakra-ui-core/src/CAlertDialog/CAlertDialog.js index b415d079..92e3ad9c 100644 --- a/packages/chakra-ui-core/src/CAlertDialog/CAlertDialog.js +++ b/packages/chakra-ui-core/src/CAlertDialog/CAlertDialog.js @@ -55,7 +55,7 @@ const CAlertDialog = { type: Function, default: () => null }, - leastDestructiveRef: [HTMLElement, Object] + leastDestructiveRef: [HTMLElement, Object, String, Function] }, render (h, { slots, props, data }) { return h(CModal, { diff --git a/packages/chakra-ui-core/src/CMenu/CMenu.js b/packages/chakra-ui-core/src/CMenu/CMenu.js index 33e627df..7f7555f2 100644 --- a/packages/chakra-ui-core/src/CMenu/CMenu.js +++ b/packages/chakra-ui-core/src/CMenu/CMenu.js @@ -93,6 +93,7 @@ const CMenu = { focusAtIndex: this.focusAtIndex, focusOnLastItem: this.focusOnLastItem, focusOnFirstItem: this.focusOnFirstItem, + openMenu: this.openMenu, closeMenu: this.closeMenu, autoSelect: this.autoSelect, closeOnSelect: this.closeOnSelect, diff --git a/packages/chakra-ui-core/src/CSkipNav/CSkipNav.js b/packages/chakra-ui-core/src/CSkipNav/CSkipNav.js new file mode 100644 index 00000000..6a25ff52 --- /dev/null +++ b/packages/chakra-ui-core/src/CSkipNav/CSkipNav.js @@ -0,0 +1,123 @@ +/** + * Hey! Welcome to @chakra-ui/vue SkipNavLink + * + * Renders a link that remains hidden until focused to skip to the main content. + * + * @see Docs https://vue.chakra-ui.com/skip-nav-link + * @see Source https://github.com/chakra-ui/chakra-ui-vue/blob/master/packages/chakra-ui-core/src/CSkipNav/CSkipNav.js + */ + +import { SNA } from '../config/props.types' +import { createStyledAttrsMixin, mode } from '../utils' +import CBox from '../CBox' + +const FALLBACK_ID = 'chakra-skip-nav' + +const createSkipNavLinkStyles = (props) => { + const baseStyles = { + userSelect: 'none', + border: '0', + borderRadius: 'md', + fontWeight: 'semibold', + height: '1px', + width: '1px', + margin: '-1px', + padding: '0', + outline: '0', + overflow: 'hidden', + position: 'absolute', + clip: 'rect(0 0 0 0)', + _focus: { + clip: 'auto', + width: 'auto', + height: 'auto', + boxShadow: 'outline', + padding: '1rem', + position: 'fixed', + top: '1.5rem', + insetStart: '1.5rem', + bg: mode('white', 'gray.700') + } + } + + return { ...baseStyles } +} + +/** + * CSkipNavLink component + * + * Renders a link that remains hidden until focused to skip to the main content. + * + * @see Docs https://vue.chakra-ui.com/skip-nav + */ +const CSkipNavLink = { + name: 'CSkipNavLink', + mixins: [createStyledAttrsMixin('CSkipNavLink')], + props: { + id: { + type: String, + default: FALLBACK_ID + } + }, + computed: { + colorMode () { + return this.$chakraColorMode() + }, + theme () { + return this.$chakraTheme() + }, + componentStyles () { + return createSkipNavLinkStyles() + } + }, + render (h) { + return h( + 'a', + { + class: this.className, + attrs: { + href: `#${this.id}` + } + }, + this.$slots.default + ) + } +} + +/** + * CSkipNavLink component + * + * Renders a div as the target for the link. + * + * @see Docs https://vue.chakra-ui.com/skip-nav + */ +const CSkipNavContent = { + name: 'CSkipNavContent', + mixins: [createStyledAttrsMixin('CSkipNavContent')], + props: { + id: { + type: String, + default: FALLBACK_ID + }, + to: SNA + }, + render (h) { + return h( + CBox, + { + class: this.className, + attrs: { + id: this.id, + tabIndex: '-1', + style: { + outline: 0 + }, + 'data-testid': 'chakra-skip-nav' + } + }, + this.$slots.default + ) + } +} + +export { CSkipNavLink, CSkipNavContent } diff --git a/packages/chakra-ui-core/src/CSkipNav/CSkipNav.stories.js b/packages/chakra-ui-core/src/CSkipNav/CSkipNav.stories.js new file mode 100644 index 00000000..719a9bb7 --- /dev/null +++ b/packages/chakra-ui-core/src/CSkipNav/CSkipNav.stories.js @@ -0,0 +1,49 @@ +import { storiesOf } from '@storybook/vue' +import CInput from '../CInput' +import CText from '../CText' +import CList, { CListItem, CListIcon } from '../CList' +import { CSkipNavLink, CSkipNavContent } from './CSkipNav' + +storiesOf('UI | SkipNav', module).add('Default', () => ({ + components: { + CSkipNavLink, + CSkipNavContent, + CInput, + CText, + CList, + CListItem, + CListIcon + }, + template: ` +
+ Skip to Content + +
+ + To test the SkipNav Components: + + + + Place focus on the input + + + + Press "Shift + Tab" to make the SkipNavLink appear + + + + Hit "Enter". You might leave the page to load up the iFrame isolated + + + + You should now see a blue outline over all the content. + + + + + +
+ +
+ ` +})) diff --git a/packages/chakra-ui-core/src/CSkipNav/accessibility.md b/packages/chakra-ui-core/src/CSkipNav/accessibility.md new file mode 100644 index 00000000..79655054 --- /dev/null +++ b/packages/chakra-ui-core/src/CSkipNav/accessibility.md @@ -0,0 +1,51 @@ +# Skip Nav | Accessibility ♿️ + +This report is adapted to the outline from the [WAI-ARIA Authoring Patterns practices](https://www.w3.org/WAI/ARIA/apg/patterns/) and technique information from [WebAIM](https://webaim.org/techniques/skipnav/), supported by Chakra UI for the `CSkipNav` components. + +### Description + +The Skip Navigation components are a tandem used to provide interaction for the keyboard user in skipping navigation content (or redundant content used at the top of multiple pages) to the main body of the page. + +#### Components + +`@chakra-ui/vue` exports 2 Skip Nav related components: + +- `CSkipNavLink` +- `CSkipNavContent` + +### `CSkipNav` Keyboard Interaction + +- **`Tab`**: + - On initial load of the page, moves focus to the `CSkipNavLink` element, provided that this component is the first focusable element in the page. + - On focus of the `CSkipNavContent` component, moves to the next focusable element inside the wrapper. +- **`Enter`**: + - Moves focus from the `CSkipNavLink` element to the `CSkipNavContent` element. + +### `CDrawer` WAI-ARIA Roles, States, and Properties: + +- The `CSkipNavLink` contains an href linking to the `id` of the `CSkipNavContent` component. +- The `CSkipNavContent` component renders `tabindex="-1"` to show visible change of focus to the main content. A screen reader is expected to immediately read out the first of this content. + +### Consideration of Multiple `CSkipNavLinks` Components + +In most cases, a single component is sufficient. + +However, a very complex page with several repeated elements may neeeded additional skip links, either by providing the whole set at the very beginning of the page to navigate through, or added as in-page links to allow the user to quickly bypass content, including confusing or inaccessible content such as ASCII art, complex tables, or complex social media feeds. + +Remember, the purpose of skip navigation links is to make keyboard navigation more efficient. Adding more links increases link-clutter. At what point will you need to add a "Skip the skip links" link?! + +### Concerns with Aestheic Impact + +The `CSkipNavLink` component is designed to be hidden until a user navigtes to it with a keyboard. The address concerns of the link being unattractive or confusing to users who do not need it. + +Techniques like `display: none` or the `hidden` attribute will remove the component from keyboard interaction. Therefore, the component is styled in such a way that it positioned out of the visible browser window, and then on focus with CSS it transitions into view. + +If there is concern with a user potentially tabbing quickly away from the component, it can be styled or scripted to remain visible for an extended period of time. + +### `CLink` WAI-ARIA compliance + +- [WCAG 2.4.1 (Bypass Blocks - Level A)](https://www.w3.org/TR/WCAG21/#bypass-blocks): This component tandem is a mechanism bypassing blocks of content that are repeated on multiple pages. +- The `CSkipNavLink` component renders an `` element with rendered visibility as hidden off the screen. When tabbing to the link, it becomes visible for sighted keyboard users, and read out by a screen reader. +- With the `CSkipNavContent` component containing `tabindex="-1"`, the component renders a focus ring on focus for the visual keyboard user to indicate arrival to the main content. + +Noticed a bug or inconsistency with this component? [Open an issue](https://github.com/chakra-ui/chakra-ui-vue/issues/new/choose) diff --git a/packages/chakra-ui-core/src/CSkipNav/index.js b/packages/chakra-ui-core/src/CSkipNav/index.js new file mode 100644 index 00000000..1fc03fec --- /dev/null +++ b/packages/chakra-ui-core/src/CSkipNav/index.js @@ -0,0 +1 @@ +export * from './CSkipNav' diff --git a/packages/chakra-ui-core/src/CSkipNav/tests/CSkipNav.test.js b/packages/chakra-ui-core/src/CSkipNav/tests/CSkipNav.test.js new file mode 100644 index 00000000..dc3432b1 --- /dev/null +++ b/packages/chakra-ui-core/src/CSkipNav/tests/CSkipNav.test.js @@ -0,0 +1,64 @@ +import { CSkipNavLink, CSkipNavContent } from '../CSkipNav' +import { fireEvent, render, userEvent, screen, wait } from '@/tests/test-utils' + +const renderComponent = (props) => { + const base = { + components: { CSkipNavLink, CSkipNavContent }, + template: ` +
+ Skip to Content + +
+
+ +
+
+ +
+ `, + ...props + } + return render(base) +} + +const getSkipLink = () => screen.getByText('Skip to Content') + +const getContentWrapper = () => screen.getByTestId('chakra-skip-nav') + +const triggerSkipLink = async () => { + const link = getSkipLink() + await fireEvent.keyDown(link, { + key: 'Enter', + code: 'Enter' + }) +} + +describe('CSkipNav', () => { + beforeEach(async () => { + renderComponent() + await userEvent.tab() + }) + + it('should be tabbed to link after initial render', () => { + const link = getSkipLink() + expect(link).toHaveAttribute('href', '#chakra-skip-nav') + }) + + it('should navigate to content wrapper on selecting skip link', async () => { + await triggerSkipLink() + const contentWrapper = getContentWrapper() + + wait(() => { + expect(contentWrapper).toHaveFocus() + }) + }) + + it('should tab to input after wrapper focus', async () => { + await triggerSkipLink() + await userEvent.tab() + + const input = screen.getByPlaceholderText('Search') + + expect(input).toHaveFocus() + }) +}) diff --git a/packages/chakra-ui-core/src/CTextarea/CTextarea.js b/packages/chakra-ui-core/src/CTextarea/CTextarea.js index c491a67d..cba918c2 100644 --- a/packages/chakra-ui-core/src/CTextarea/CTextarea.js +++ b/packages/chakra-ui-core/src/CTextarea/CTextarea.js @@ -12,7 +12,6 @@ import { inputProps } from '../CInput/utils/input.props' import { forwardProps, extractListeners } from '../utils' import CInput from '../CInput' -import { SNA } from '../config/props.types' /** * CTextarea component @@ -26,28 +25,12 @@ const CTextarea = { name: 'CTextarea', functional: true, model: { - prop: 'inputValue', + prop: 'value', event: 'change' }, props: { ...inputProps, - inputValue: String, - py: { - type: SNA, - default: '8px' - }, - minHeight: { - type: SNA, - default: '80px' - }, - fontFamily: { - type: SNA, - default: 'body' - }, - lineHeight: { - type: SNA, - default: 'shorter' - } + inputValue: String }, render (h, { props, slots, data, listeners, ...rest }) { // Default styles diff --git a/packages/chakra-ui-core/src/CTextarea/tests/CTextarea.test.js b/packages/chakra-ui-core/src/CTextarea/tests/CTextarea.test.js new file mode 100644 index 00000000..fc6d5d29 --- /dev/null +++ b/packages/chakra-ui-core/src/CTextarea/tests/CTextarea.test.js @@ -0,0 +1,40 @@ +import { CTextarea } from '../..' +import { render, screen, userEvent } from '@/tests/test-utils' + +const renderComponent = (props) => { + const inlineAttrs = (props && props.inlineAttrs) || '' + const base = { + data: () => ({ text: 'hello' }), + components: { CTextarea }, + template: ``, + ...props + } + return render(base) +} + +test('should render correctly', () => { + const { asFragment } = renderComponent() + expect(asFragment()).toMatchSnapshot() +}) + +test('v-model works', () => { + renderComponent() + const textarea = screen.getByTestId('textarea') + + userEvent.type(textarea, ' world') + expect(textarea).toHaveValue('hello world') +}) + +test('readonly textarea renders correctly', () => { + renderComponent({ inlineAttrs: 'isReadOnly' }) + const textarea = screen.getByTestId('textarea') + + expect(textarea).toHaveAttribute('readonly') +}) + +test('disabled textarea renders correctly', () => { + renderComponent({ inlineAttrs: 'isDisabled' }) + const textarea = screen.getByTestId('textarea') + + expect(textarea).toHaveAttribute('disabled') +}) diff --git a/packages/chakra-ui-core/src/CTextarea/tests/__snapshots__/CTextarea.test.js.snap b/packages/chakra-ui-core/src/CTextarea/tests/__snapshots__/CTextarea.test.js.snap new file mode 100644 index 00000000..dbc778f6 --- /dev/null +++ b/packages/chakra-ui-core/src/CTextarea/tests/__snapshots__/CTextarea.test.js.snap @@ -0,0 +1,84 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should render correctly 1`] = ` + + .emotion-0 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + position: relative; + -webkit-transition: all 0.2s; + transition: all 0.2s; + outline: 2px solid transparent; + outline-offset: 2px; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + font-size: var(--chakra-fontSizes-md); + -webkit-padding-start: var(--chakra-space-4); + padding-inline-start: var(--chakra-space-4); + -webkit-padding-end: var(--chakra-space-4); + padding-inline-end: var(--chakra-space-4); + height: var(--chakra-sizes-10); + line-height: var(--chakra-lineHeights-shorter); + border-radius: var(--chakra-radii-md); + border-width: 1px; + border-color: inherit; + background: var(--chakra-colors-white); + font-family: var(--chakra-fonts-body); + padding-top: 8px; + padding-bottom: 8px; + min-height: 80px; +} + +.emotion-0[aria-readonly=true], +.emotion-0[readonly], +.emotion-0[data-readonly] { + background: var(--chakra-colors-transparent); + box-shadow: none!important; + -webkit-user-select: all; + -moz-user-select: all; + -ms-user-select: all; + user-select: all; +} + +.emotion-0:hover, +.emotion-0[data-hover] { + border-color: var(--chakra-colors-gray-300); +} + +.emotion-0[disabled], +.emotion-0[aria-disabled=true], +.emotion-0[data-disabled] { + opacity: 0.4; + cursor: not-allowed; +} + +.emotion-0:focus, +.emotion-0[data-focus] { + z-index: 1; + border-color: #7db1ff; + box-shadow: 0 0 0 1px #7db1ff; +} + +.emotion-0[aria-invalid=true], +.emotion-0[data-invalid] { + border-color: #e66673; + box-shadow: 0 0 0 1px #e66673; +} + +