diff --git a/packages/components/src/components/button/button.e2e.ts b/packages/components/src/components/button/button.e2e.ts index 211bbd381a..d7c9f4890e 100644 --- a/packages/components/src/components/button/button.e2e.ts +++ b/packages/components/src/components/button/button.e2e.ts @@ -18,4 +18,13 @@ describe('scale-button', () => { const element = await page.find('scale-button'); expect(element).toHaveClass('hydrated'); }); + + it('should set tabindex on its inner element', async () => { + const page = await newE2EPage(); + await page.setContent( + 'Click me!' + ); + const element = await page.find('scale-button >>> button'); + expect(element.getAttribute('tabindex')).toBe('5'); + }); }); diff --git a/packages/components/src/components/button/button.tsx b/packages/components/src/components/button/button.tsx index b16b82bb04..d466822790 100644 --- a/packages/components/src/components/button/button.tsx +++ b/packages/components/src/components/button/button.tsx @@ -47,8 +47,10 @@ export class Button { @Prop() target?: string = '_self'; /** (optional) Injected CSS styles */ @Prop() styles?: string; - /** (optional) name of a file to be downloaded */ + /** (optional) Name of a file to be downloaded */ @Prop() download?: string; + /** (optional) Set `tabindex` in the inner button or link element */ + @Prop() innerTabindex?: number; private focusableElement: HTMLElement; @@ -137,6 +139,7 @@ export class Button { target={this.target} rel={this.target === '_blank' ? 'noopener noreferrer' : undefined} part={basePart} + tabIndex={this.innerTabindex} > @@ -148,6 +151,7 @@ export class Button { disabled={this.disabled} type={this.type} part={basePart} + tabIndex={this.innerTabindex} > diff --git a/packages/components/src/components/button/readme.md b/packages/components/src/components/button/readme.md index 9e124499d3..9d82a3b612 100644 --- a/packages/components/src/components/button/readme.md +++ b/packages/components/src/components/button/readme.md @@ -7,18 +7,19 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| -------------- | --------------- | -------------------------------------------------------------- | --------------------------------- | ----------- | -| `disabled` | `disabled` | (optional) If `true`, the button is disabled | `boolean` | `false` | -| `download` | `download` | (optional) name of a file to be downloaded | `string` | `undefined` | -| `href` | `href` | (optional) When present, an tag will be used | `string` | `undefined` | -| `iconOnly` | `icon-only` | (optional) Set to `true` when the button contains only an icon | `boolean` | `false` | -| `iconPosition` | `icon-position` | (optional) Icon position related to the label | `"after" \| "before"` | `'before'` | -| `size` | `size` | (optional) The size of the button | `"large" \| "small"` | `'large'` | -| `styles` | `styles` | (optional) Injected CSS styles | `string` | `undefined` | -| `target` | `target` | (optional) The target attribute for the tag | `string` | `'_self'` | -| `type` | `type` | (optional) Button type | `"button" \| "reset" \| "submit"` | `undefined` | -| `variant` | `variant` | (optional) Button variant | `string` | `'primary'` | +| Property | Attribute | Description | Type | Default | +| --------------- | ---------------- | -------------------------------------------------------------- | --------------------------------- | ----------- | +| `disabled` | `disabled` | (optional) If `true`, the button is disabled | `boolean` | `false` | +| `download` | `download` | (optional) Name of a file to be downloaded | `string` | `undefined` | +| `href` | `href` | (optional) When present, an tag will be used | `string` | `undefined` | +| `iconOnly` | `icon-only` | (optional) Set to `true` when the button contains only an icon | `boolean` | `false` | +| `iconPosition` | `icon-position` | (optional) Icon position related to the label | `"after" \| "before"` | `'before'` | +| `innerTabindex` | `inner-tabindex` | (optional) Set `tabindex` in the inner button or link element | `number` | `undefined` | +| `size` | `size` | (optional) The size of the button | `"large" \| "small"` | `'large'` | +| `styles` | `styles` | (optional) Injected CSS styles | `string` | `undefined` | +| `target` | `target` | (optional) The target attribute for the tag | `string` | `'_self'` | +| `type` | `type` | (optional) Button type | `"button" \| "reset" \| "submit"` | `undefined` | +| `variant` | `variant` | (optional) Button variant | `string` | `'primary'` | ## Methods diff --git a/packages/components/src/components/link/link.e2e.ts b/packages/components/src/components/link/link.e2e.ts index cbdd5b69d5..d43640b5df 100644 --- a/packages/components/src/components/link/link.e2e.ts +++ b/packages/components/src/components/link/link.e2e.ts @@ -18,4 +18,13 @@ describe('scale-link', () => { const element = await page.find('scale-link'); expect(element).toHaveClass('hydrated'); }); + + it('should set tabindex on its inner element', async () => { + const page = await newE2EPage(); + await page.setContent( + 'default' + ); + const element = await page.find('scale-link >>> a'); + expect(element.getAttribute('tabindex')).toBe('5'); + }); }); diff --git a/packages/components/src/components/link/link.tsx b/packages/components/src/components/link/link.tsx index 26c16fe42a..b35d8c149e 100644 --- a/packages/components/src/components/link/link.tsx +++ b/packages/components/src/components/link/link.tsx @@ -49,6 +49,8 @@ export class Link { @Prop() target?: '_self' | '_blank' | '_parent' | '_top'; /** (optional) */ @Prop() type?: string; + /** (optional) Set `tabindex` in the inner button or link element */ + @Prop() innerTabindex?: number; /** (optional) Injected CSS styles */ @Prop() styles?: string; @@ -62,7 +64,7 @@ export class Link { getAnchorProps() { const props = { href: this.href || null, - tabIndex: this.disabled ? -1 : null, + tabIndex: this.disabled ? -1 : this.innerTabindex, 'aria-disabled': this.disabled ? 'true' : false, download: this.download || null, hreflang: this.hreflang || null, diff --git a/packages/components/src/components/link/readme.md b/packages/components/src/components/link/readme.md index a529ec0900..32084df18e 100644 --- a/packages/components/src/components/link/readme.md +++ b/packages/components/src/components/link/readme.md @@ -62,6 +62,7 @@ | `href` | `href` | (optional) Link href | `string` | `undefined` | | `hreflang` | `hreflang` | (optional) | `string` | `undefined` | | `iconPosition` | `icon-position` | (optional) Chnage icon/content slot order | `"after" \| "before"` | `'after'` | +| `innerTabindex` | `inner-tabindex` | (optional) Set `tabindex` in the inner button or link element | `number` | `undefined` | | `omitUnderline` | `omit-underline` | (optional) Remove the initial line from the text (can also be achieved via `--line-thickness-initial: 0`) Remove the line for every state with `--line-thickness: 0` | `boolean` | `false` | | `ping` | `ping` | (optional) | `string` | `undefined` | | `referrerpolicy` | `referrerpolicy` | (optional) | `"" \| "no-referrer" \| "no-referrer-when-downgrade" \| "origin" \| "origin-when-cross-origin" \| "same-origin" \| "strict-origin" \| "strict-origin-when-cross-origin" \| "unsafe-url"` | `undefined` | diff --git a/packages/storybook-vue/stories/3_components/button/Button.stories.mdx b/packages/storybook-vue/stories/3_components/button/Button.stories.mdx index e15b74c6b4..351d7ba9fa 100644 --- a/packages/storybook-vue/stories/3_components/button/Button.stories.mdx +++ b/packages/storybook-vue/stories/3_components/button/Button.stories.mdx @@ -42,6 +42,7 @@ export const Template = (args, { argTypes }) => ({ :variant="variant" :icon-position="icon === 'after' ? 'after' : 'before'" :icon-only="iconOnly" + :inner-tabindex="innerTabindex" :styles="styles" @click="action('clicked')" > diff --git a/packages/storybook-vue/stories/3_components/button/ScaleButton.vue b/packages/storybook-vue/stories/3_components/button/ScaleButton.vue index d09c260952..0286a616ab 100644 --- a/packages/storybook-vue/stories/3_components/button/ScaleButton.vue +++ b/packages/storybook-vue/stories/3_components/button/ScaleButton.vue @@ -8,6 +8,7 @@ :type="type" :variant="variant" :icon-only="iconOnly" + :inner-tabindex="innerTabindex" :styles="styles" @click="handler" > @@ -30,6 +31,7 @@ export default { variant: String, size: String, iconOnly: Boolean, + innerTabindex: Number, styles: String, }, methods: { diff --git a/packages/storybook-vue/stories/3_components/link/Link.stories.mdx b/packages/storybook-vue/stories/3_components/link/Link.stories.mdx index 80b0573f00..498f1985fe 100644 --- a/packages/storybook-vue/stories/3_components/link/Link.stories.mdx +++ b/packages/storybook-vue/stories/3_components/link/Link.stories.mdx @@ -56,7 +56,7 @@ export const Template = (args, { argTypes }) => ({ ...ScaleLink.props, }, template: ` - ({ :rel="rel" :target="target" :type="type" + :inner-tabindex="innerTabindex" > {{ label }}