Skip to content

Commit

Permalink
fix: add prop for removing tabindex (#2215)
Browse files Browse the repository at this point in the history
  • Loading branch information
felix-ico authored Nov 24, 2023
1 parent 6d1d3f7 commit 3fdafab
Show file tree
Hide file tree
Showing 4 changed files with 34 additions and 6 deletions.
11 changes: 6 additions & 5 deletions packages/components/src/components/tab-panel/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,12 @@

## Properties

| Property | Attribute | Description | Type | Default |
| -------- | --------- | ----------------------------------------------------------------------------------- | -------------------- | ----------- |
| `size` | `size` | <span style="color:red">**[DEPRECATED]**</span> - no more size difference<br/><br/> | `"large" \| "small"` | `'small'` |
| `small` | `small` | <span style="color:red">**[DEPRECATED]**</span> - no more size difference<br/><br/> | `boolean` | `false` |
| `styles` | `styles` | (optional) Injected CSS styles | `string` | `undefined` |
| Property | Attribute | Description | Type | Default |
| --------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | ----------- |
| `size` | `size` | <span style="color:red">**[DEPRECATED]**</span> - no more size difference<br/><br/> | `"large" \| "small"` | `'small'` |
| `small` | `small` | <span style="color:red">**[DEPRECATED]**</span> - no more size difference<br/><br/> | `boolean` | `false` |
| `styles` | `styles` | (optional) Injected CSS styles | `string` | `undefined` |
| `tabbablePanel` | `tabbable-panel` | (optional) adds tab-index="0" to the panel, set to false to exclude the tab-panel from the tab sequence, e.g. if the first element in the panel is a focusable button | `boolean` | `true` |


## Shadow Parts
Expand Down
10 changes: 9 additions & 1 deletion packages/components/src/components/tab-panel/tab-panel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@ export class TabPanel {
/** (optional) size */
/** @deprecated - no more size difference */
@Prop() size: 'small' | 'large' = 'small';
/** (optional) adds tab-index="0" to the panel, set to false to exclude the tab-panel from the tab sequence, e.g. if the first element in the panel is a focusable button */
@Prop() tabbablePanel?: boolean = true;
/** (optional) Injected CSS styles */
@Prop() styles?: string;

Expand All @@ -43,12 +45,18 @@ export class TabPanel {
}
}

setTabIndex() {
if (this.tabbablePanel === true) {
return { tabindex: '0' };
}
}

render() {
return (
<Host
id={`scale-tab-panel-${this.generatedId}`}
role="tabpanel"
tabindex="0"
{...this.setTabIndex()}
>
{this.styles && <style>{this.styles}</style>}
<div part="tab-panel" class="tab-panel">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,12 @@ import {
Description,
} from '@storybook/addon-docs';
import ScaleTabNav from './ScaleTabNav.vue';
import TabPanel from './TabPanel.vue';

<Meta
title="Components/Tab Navigation"
component={ScaleTabNav}
subcomponents={{ 'Scale Tab Panel': TabPanel }}
argTypes={{
styles: {
table: {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<script>
export default {
name: 'Tab Panel',
props: {
styles: { type: String },
tabbable: { type: Boolean, default: 'true',
argTypes:{
table: {
type: { summary: 'string' },
},
description: `(optional) Injected styles`,
control: { type: null },
},
},
}
};
</script>

0 comments on commit 3fdafab

Please sign in to comment.