From 21b8dd28f3b6744b29a2b23f20ab7b17775b5cad Mon Sep 17 00:00:00 2001 From: Anand Patil Date: Mon, 18 Oct 2021 15:06:57 -0400 Subject: [PATCH 1/3] Update RFC_Technical_Design_Document.md --- RFC_Technical_Design_Document.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/RFC_Technical_Design_Document.md b/RFC_Technical_Design_Document.md index 61b25d9..29e1dc4 100644 --- a/RFC_Technical_Design_Document.md +++ b/RFC_Technical_Design_Document.md @@ -150,3 +150,5 @@ element that contains the content associated with a tab ### Refs https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html + + From f79290599ad031b3534daf138b78df28b0c51136 Mon Sep 17 00:00:00 2001 From: apatil Date: Thu, 21 Oct 2021 18:39:14 -0400 Subject: [PATCH 2/3] fix(rfc tabs): fixed as discussed suggestions --- RFC_Technical_Design_Document.md | 104 ++++++++++++++++++------------- 1 file changed, 60 insertions(+), 44 deletions(-) diff --git a/RFC_Technical_Design_Document.md b/RFC_Technical_Design_Document.md index 29e1dc4..97e6924 100644 --- a/RFC_Technical_Design_Document.md +++ b/RFC_Technical_Design_Document.md @@ -1,36 +1,46 @@ - # RFC : Technical design document ## Component - Tab ### Scope of the Document + This document outlines the technical design document of Tab component functionalities. Its highlights the component design, properties, and initial implementation. ### Component Overview + Tabs organize and allow users to move between content without having to navigate away from a page. The Tabs component organizes multiple sections of related content so a user can view one section at a time. ### Component Design + > Component designed based on the scope of the tab component, by default, the Tab simply renders data passed to it. - ### Scope - - Tab Container: Tab container is a component that manages the context and state of the tabs. - - Tab List: Wrapper for the tab components. - - Tab: Element that serves as a label for one of the tab panels and can be activated to display that panel. - - Tab Panel: Is a presentational component which accepts a tab’s content as its children. - #### Tab Container -The component or element the *Tabs* should render as *Fragment*. +### Scope + +- Tab Container: Tab container is a component that manages the context and state of the tabs. +- Tab List: Wrapper for the tab components. +- Tab: Element that serves as a label for one of the tab panels and can be activated to display that panel. +- Tab Panel: Is a presentational component which accepts a tab’s content as its children. + +#### Tabs + +The component or element the *Tabs* should render as *Fragment*. Provides context and state. + ##### Properties + | Props | Type | Default | Required | Description | | :------------- |:-------------:|:-------------:|:-------------:|:-------------| | ClassName| Object | | | Override or extend component style.| | Id | String | | | Unique identification of tabs. | #### TabList + The component or element the *TabList* should render as *div*. + ##### Properties + | Props | Type | Default | Required | Description | | :------------- |:-------------:|:-------------:|:-------------:|:-------------| | ClassName| Object | | | Override or extend component style.| @@ -45,7 +55,9 @@ The component or element the *TabList* should render as *div*. The component or element the ‘**_Tab’_** should render as ‘**_button’._** Children of Tablist component, display based on label, by default index is 0 + ##### Properties + | Props | Type | Default | Required | Description | | :------------- |:-------------:|:-------------:|:-------------:|:-------------| | Active| Boolean | | | Selected, Unselected flag, based on this flag active tab.| @@ -55,76 +67,80 @@ Children of Tablist component, display based on label, by default index is 0 | ClassName | Object | | =Orientation| Override or extend component style. | #### TabPanel + The component or element the ‘**_TabPanel’_** should render as ‘**_div’._** element that contains the content associated with a tab + ##### Properties + | Props | Type | Default | Required | Description | | :------------- |:-------------:|:-------------:|:-------------:|:-------------| | ClassName| Object | | | Override or extend component style.| | Id | String | | | Unique identification of tabs. | | Children | Node | | | Override or extend component style. | - ### Design Flow - image +### Design Flow + image ### Component Style + #### Mixings - - nds—tabs (base) - - nds-tabs__tablist - - nds-tabs__tabpanel - - nds—tabs__tab +- nds—tabs (base) +- nds-tabs__tablist +- nds-tabs__tabpanel +- nds—tabs__tab ### Keyboard Intraction | Key | Action| | :------------- |:-------------| -| ArrowLeft| Move focus to previous column. | -| ArrowRight| Move focus to next column. | -|Tab | Focus moves into the tablist from the place of active tab. -|Space or Enter | Activate tab if tabs are not activated. -|Home | Focus move to first tab. -|End | Focus moves to last tab. +| ArrowLeft| Move focus to previous column. | +| ArrowRight| Move focus to next column. | +|Tab | Focus moves into the tablist from the place of active tab. +|Space or Enter | Activate tab if tabs are not activated. +|Home | Focus move to first tab. +|End | Focus moves to last tab. ## Accessibility ### ARIA Roles + #### Tab | Role | Description| | :------------- |:-------------| -| role=”tab”| Indicate that is tab. | -| aria-selected| Set for active tab. | -|aria-control | Set associate idb. +| role=”tab”| Indicate that is tab. | +| aria-selected| Set for active tab. | +|aria-control | Set associate idb. #### TabList | Role | Description| | :------------- |:-------------| -| role=”tablist”| Indicate that is tablist. | -| aria-orientation| Indicate horizontally or vertically tab. | - -## Implementation example +| role=”tablist”| Indicate that is tablist. | +| aria-orientation| Indicate horizontally or vertically tab. | +## Implementation example - - One - Two - Three - - - This is tab one - - -

This is tab two

- - -
This is tab three.
- - + + One + Two + Three + + + This is tab one + + +

This is tab two

+ + +
This is tab three.
+ + ## Component render example @@ -146,9 +162,9 @@ element that contains the content associated with a tab ### Anatomy document + [https://docs.google.com/document/d/1D0MjvCYdCaaHDJGYcPk8u9pSREkVpAac8JqNYzviHc0/edit#heading=h.5old1136lvpw](https://docs.google.com/document/d/1D0MjvCYdCaaHDJGYcPk8u9pSREkVpAac8JqNYzviHc0/edit#heading=h.5old1136lvpw) ### Refs -https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html - + From 281c15a98db9724228d2962bde6d88619b018e56 Mon Sep 17 00:00:00 2001 From: apatil Date: Sun, 24 Oct 2021 19:47:10 -0400 Subject: [PATCH 3/3] fix(tabs) : addressed all the review comments --- RFC_Technical_Design_Document.md | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/RFC_Technical_Design_Document.md b/RFC_Technical_Design_Document.md index 97e6924..4d7938e 100644 --- a/RFC_Technical_Design_Document.md +++ b/RFC_Technical_Design_Document.md @@ -77,12 +77,12 @@ element that contains the content associated with a tab | Props | Type | Default | Required | Description | | :------------- |:-------------:|:-------------:|:-------------:|:-------------| | ClassName| Object | | | Override or extend component style.| -| Id | String | | | Unique identification of tabs. | -| Children | Node | | | Override or extend component style. | +| Id | String | | | Unique identification of tabpanel. | +| Children | Node | | | Any component or element. | ### Design Flow - image + image ### Component Style @@ -97,8 +97,8 @@ element that contains the content associated with a tab | Key | Action| | :------------- |:-------------| -| ArrowLeft| Move focus to previous column. | -| ArrowRight| Move focus to next column. | +| ArrowLeft| Move focus to previous tab. | +| ArrowRight| Move focus to next tab. | |Tab | Focus moves into the tablist from the place of active tab. |Space or Enter | Activate tab if tabs are not activated. |Home | Focus move to first tab. @@ -114,7 +114,7 @@ element that contains the content associated with a tab | :------------- |:-------------| | role=”tab”| Indicate that is tab. | | aria-selected| Set for active tab. | -|aria-control | Set associate idb. +| aria-control | Set associate id. #### TabList @@ -123,6 +123,13 @@ element that contains the content associated with a tab | role=”tablist”| Indicate that is tablist. | | aria-orientation| Indicate horizontally or vertically tab. | +#### TabPanel + +| Role | Description| +| :------------- |:-------------| +| role=”tabpanel”| Indicate that is tabpanel. | +| aria-label| may be used on any element, not just labelable elements. | + ## Implementation example