Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(TabBar): accessibility improvements for TabBar & Tab #1468

Merged
merged 3 commits into from
Jul 3, 2024
Merged

feat(TabBar): accessibility improvements for TabBar & Tab #1468

merged 3 commits into from
Jul 3, 2024

Conversation

alaa-yahia
Copy link
Member

@alaa-yahia alaa-yahia commented Mar 26, 2024 •
edited
Loading

Implements LIBS-557

Description

  • TabBar has role="tablist"

  • Tab has role="tab"

  • selected prop maps to aria-selected

  • disabled prop maps to aria-disabled

  • TabBar acts as a composite component, a user can tab to TabBar

  • A user can use left/right arrow keys to move between Tab components.

  • Pressing the left/right arrow keys will cycle back to the first or last tab, ensuring continuous navigation.

  • Moving to a Tab activates it.

  • Tab components with overflowing labels displays a Tooltip with full label on hover and focus.

Known issues

  • When pressing the Tab key the focus go to the first Tab component regardless of the selected prop.

  • Tabs with disabled prop can be tabbed into.

Checklist

  • API docs are generated
  • Tests were added
  • Storybook demos were added

@alaa-yahia alaa-yahia requested a review from kabaros March 26, 2024 09:11
@alaa-yahia alaa-yahia requested a review from a team as a code owner March 26, 2024 09:11
@alaa-yahia alaa-yahia changed the base branch from alpha to master March 26, 2024 09:19
@alaa-yahia alaa-yahia changed the title feat(TabBar | Tab): accessibility improvements for TabBar & Tab feat(TabBar): accessibility improvements for TabBar & Tab Mar 26, 2024
kabaros
kabaros requested changes Apr 2, 2024
View reviewed changes
Copy link
Collaborator

@kabaros kabaros left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the code looks good - could you add tests to cover the new scenarios. You can use add e2e if you can, but it might be easier to add unit tests for these new scenarios.

Also add a storybook story for the overflow scenario.

@alaa-yahia
Copy link
Member Author

the code looks good - could you add tests to cover the new scenarios. You can use add e2e if you can, but it might be easier to add unit tests for these new scenarios.

Also add a storybook story for the overflow scenario.

The storybook story is already included here, Do you suggest to add a separate one for the overflow ?
For the tests, there wasn't a unit test in the folder probably because the consumer is responsible for managing the state not the TabBar component. Should I include an example component and use it in the unit test?

@kabaros
Copy link
Collaborator

kabaros commented Apr 3, 2024

Do you suggest to add a separate one for the overflow ?

Yes, I mean to add a story for the overflow scenario

Should I include an example component and use it in the unit test?
Yes, you'll need to do that .. I don't know if it needs to manage the state (or just pass down tabs to it), but basically a component to be able the new logic you added for handling keys, so you render a tab bar, and trigger key events to make sure the right tabs have the focus.

@alaa-yahia
Copy link
Member Author

alaa-yahia commented Apr 3, 2024 •
edited
Loading

Do you suggest to add a separate one for the overflow ?

Yes, I mean to add a story for the overflow scenario

Should I include an example component and use it in the unit test?
Yes, you'll need to do that .. I don't know if it needs to manage the state (or just pass down tabs to it), but basically a component to be able the new logic you added for handling keys, so you render a tab bar, and trigger key events to make sure the right tabs have the focus.

What I mean the text overflow story is included here:
image

There isn't a test for handling the main functionality "moving between Tabs" because it is managed by the consumer component not the TabBar component.

@kabaros
Copy link
Collaborator

kabaros commented Apr 3, 2024 •
edited
Loading

What I mean the text overflow story is included here:

ah ok .. yeah then that's fine. No need to add anything.

@dhis2-bot
Copy link
Contributor

dhis2-bot commented Jun 14, 2024 •
edited
Loading

🚀 Deployed on https://pr-1468--dhis2-ui.netlify.app

@dhis2-bot dhis2-bot temporarily deployed to netlify June 14, 2024 19:53 Inactive
@alaa-yahia alaa-yahia force-pushed the LIBS-557-tabbar-tab-accessibility-improvements branch from aa28c70 to 4841273 Compare June 15, 2024 01:22
@dhis2-bot dhis2-bot temporarily deployed to netlify June 15, 2024 01:26 Inactive
@dhis2 dhis2 deleted a comment from cypress bot Jun 15, 2024
@kabaros kabaros merged commit b095f5a into master Jul 3, 2024
16 checks passed
@kabaros kabaros deleted the LIBS-557-tabbar-tab-accessibility-improvements branch July 3, 2024 09:47
dhis2-bot added a commit that referenced this pull request Jul 3, 2024
@dhis2-bot
chore(release): cut 9.10.0 [skip release]
975764f 
# [9.10.0](v9.9.1...v9.10.0) (2024-07-03)

### Features

* **menu:** memoise menu's childrenToRender function and add valid role checks ([#1539](#1539)) ([bddbdae](bddbdae))
* **TabBar:** accessibility improvements for TabBar & Tab ([#1468](#1468)) ([b095f5a](b095f5a))
@dhis2-bot
Copy link
Contributor

🎉 This PR is included in version 9.10.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

kabaros added a commit that referenced this pull request Aug 26, 2024
@kabaros @Chisomchima
@dhis2-bot @Birkbjo @flaminic @tomzemp @d-rita @alaa-yahia @redet-G @Mohammer5
chore: update alpha with latest master (#1586)
9892882 
* chore: update modal accessibility and translation

chore: remove unnecessary files in PR

chore: update modal accessibility and translation

* fix: add aggregate data exchange to sharing dialog type prop's type

* fix: add all possible sharing dialog type prop's types

* fix: restrict dialog types to only sharable and restrict type of sharing type

* fix(translations): sync translations from transifex (master)

Automatically merged.

* chore(release): cut 9.8.2 [skip release]

## [9.8.2](v9.8.1...v9.8.2) (2024-06-14)

### Bug Fixes

* **translations:** sync translations from transifex (master) ([0dfb475](0dfb475))

* fix(translations): sync translations from transifex (master)

Automatically merged.

* chore(release): cut 9.8.3 [skip release]

## [9.8.3](v9.8.2...v9.8.3) (2024-06-16)

### Bug Fixes

* **translations:** sync translations from transifex (master) ([5f7f65a](5f7f65a))

* fix(modal): dont swallow keyDown events

* fix(drop-down): dont swallow keyDown events unless its esc and open (#1529)

* chore(release): cut 9.8.4 [skip release]

## [9.8.4](v9.8.3...v9.8.4) (2024-06-19)

### Bug Fixes

* **drop-down:** dont swallow keyDown events unless its esc and open ([#1529](#1529)) ([bdb8eff](bdb8eff))

* chore(release): cut 9.8.5 [skip release]

## [9.8.5](v9.8.4...v9.8.5) (2024-06-19)

### Bug Fixes

* **modal:** dont swallow keyDown events ([d4a0c44](d4a0c44))

* chore(release): cut 9.8.6 [skip release]

## [9.8.6](v9.8.5...v9.8.6) (2024-06-20)

### Bug Fixes

* add aggregate data exchange to sharing dialog type prop's type ([d3b5486](d3b5486))
* add all possible sharing dialog type prop's types ([43210cb](43210cb))
* restrict dialog types to only sharable and restrict type of sharing type ([1748809](1748809))

* fix(split-button): stop swallowing key down events

* chore(release): cut 9.8.7 [skip release]

## [9.8.7](v9.8.6...v9.8.7) (2024-06-20)

### Bug Fixes

* **split-button:** stop swallowing key down events ([22d43bc](22d43bc))

* fix: i18n wrap pick a date (#1531)

* chore(release): cut 9.8.8 [skip release]

## [9.8.8](v9.8.7...v9.8.8) (2024-06-20)

### Bug Fixes

* i18n wrap pick a date ([#1531](#1531)) ([4e4a43d](4e4a43d))

* fix: update @dhis2/multi-calendar-dates (#1525)

* chore(release): cut 9.8.9 [skip release]

## [9.8.9](v9.8.8...v9.8.9) (2024-06-20)

### Bug Fixes

* update @dhis2/multi-calendar-dates ([#1525](#1525)) ([cf5d39d](cf5d39d))

* fix(LIBS-629): bump library to use Nepali script when 'ne' locale passed

* chore(release): cut 9.8.10 [skip release]

## [9.8.10](v9.8.9...v9.8.10) (2024-07-01)

### Bug Fixes

* **LIBS-629:** bump library to use Nepali script when 'ne' locale passed ([6546572](6546572))

* feat(menu): add aria-attributes and roles to menu and its components (#1514)

* feat: add relevant aria-attributes and roles to menu and its child components

* fix: update role to menuitem in sharing-dialog-autocomplete test

* feat(menu): add keyboard accessibility to menus (#1533)

* feat: add support for keyboard navigation and action

- Navigate menu items using Up and Down arrow keys
- Space and Enter keys trigger the onClick handler attached to the menu items
- Extract navigation and action logic into custom useMenuNavigation hook
- Handle visual focus of menu items by tracking only the focusable items
- Pass only native props to the native child elements, i.e. tabIndex
- Implement tests simulating keyboard interactions

* feat: ensure all menu children are li elements

- wrap non-li children in li tags for consistency
- assign tabIndex for visual focus to children with menuitem role
- add active CSS class to focused MenuItem component
- modify tests

* fix: conditional focus and navigation of menu

- apply focus and keyboard navigation within the menu iff it contains focusable items

* fix: add suffix to MenuItemProps

* chore(release): cut 9.9.0 [skip release]

# [9.9.0](v9.8.10...v9.9.0) (2024-07-02)

### Features

* **menu:** add aria-attributes and roles to menu and its components ([#1514](#1514)) ([54b816c](54b816c))
* **menu:** add keyboard accessibility to menus ([#1533](#1533)) ([235a71e](235a71e))

* fix(translations): sync translations from transifex (master) (#1532)

* chore(release): cut 9.9.1 [skip release]

## [9.9.1](v9.9.0...v9.9.1) (2024-07-02)

### Bug Fixes

* **translations:** sync translations from transifex (master) ([#1532](#1532)) ([bb15173](bb15173))

* feat(TabBar): accessibility improvements for TabBar & Tab (#1468)

* feat(TabBar): accessibility improvements for TabBar & Tab

* feat: make Tabs a composite component

* fix: failing tests

* docs: improve documentation for CalendarInput callback function usage (#1538)

* feat(menu): memoise menu's childrenToRender function and add valid role checks (#1539)

* feat: optimise menu and add valid role checks

- memoise menu's childrenToRender function
- add comments explaining menu child checks and the props passed to them
- avoid passing custom props to native HTML elements
- move separator role to the divider component
- check if role exists on menu children and log a console warning if not
- update tests

* fix(lint): lint issue in master

---------

Co-authored-by: Mozafar Haider <[email protected]>

* chore(release): cut 9.10.0 [skip release]

# [9.10.0](v9.9.1...v9.10.0) (2024-07-03)

### Features

* **menu:** memoise menu's childrenToRender function and add valid role checks ([#1539](#1539)) ([bddbdae](bddbdae))
* **TabBar:** accessibility improvements for TabBar & Tab ([#1468](#1468)) ([b095f5a](b095f5a))

* fix: do not hijack input when inside a menu (#1551)

* fix(selectorbar): handle components other than SelectorBarItem correctly as children (#1534)

* chore(release): cut 9.10.1 [skip release]

## [9.10.1](v9.10.0...v9.10.1) (2024-07-04)

### Bug Fixes

* **selectorbar:** handle components other than SelectorBarItem correctly as children ([#1534](#1534)) ([7c78ac7](7c78ac7))
* do not hijack input when inside a menu ([#1551](#1551)) ([7a27d3d](7a27d3d))

* refactor(storybook): replace "storiesOf" with new api

* refactor(testing story filenames): rename stories.e2e to e2e.stories

* chore(prod story filenames): change file extension from stories.js to prod.stories.js

* fix(calendar): pin temporal dependency to version 0.4.3 due to breaking changes

* chore(workspace package json): use new storybook start command

* chore(storybook): active working plugins

* chore(storybook): restore proper output & use static directory

* chore: adjust react-dependency to prevent "wrong hook usage" error

* chore: fix imports from story to story files

* chore: fix final-form re-export snapshot tests

* chore: fix import in calendar input e2e story

* chore: fix linter issues

* chore: remove legacy scripts and GH workflow bandaids

* chore(headerbar profile): fix wrongly resolved merge conflict post-rebase

* chore: fix tooltip story

* chore(cypress): fix intersection detector tests

* chore: fix most cypress tests

* chore: fix linter issues

* refactor: fix circular dependencies

* refactor: add missing file extensions in import statements

* chore(headerbar online test): wait for story to render before proceeding

* chore(storybook): upgrade react & react-dom to ^18

* fix: get storybook 8 working

* fix: get rid of storybook references in docs

* chore(menu item cypress test): fix selectors

* fix(icon types): export IconSubtract16 & IconSubtract24

* fix(menu item types): make suffix prop optional

* fix(modal types): accept ReactNodes as children

* fix(tag types): accept ReactNodes as children

* chore(release): cut 9.10.2 [skip release]

## [9.10.2](v9.10.1...v9.10.2) (2024-07-15)

### Bug Fixes

* **icon types:** export IconSubtract16 & IconSubtract24 ([5237c66](5237c66))
* **menu item types:** make suffix prop optional ([c059fde](c059fde))
* **modal types:** accept ReactNodes as children ([bc59cf7](bc59cf7))
* **tag types:** accept ReactNodes as children ([c093a14](c093a14))

* chore: make build script work again

* fix(translations): sync translations from transifex (master)

Automatically merged.

* chore(release): cut 9.10.3 [skip release]

## [9.10.3](v9.10.2...v9.10.3) (2024-07-24)

### Bug Fixes

* **translations:** sync translations from transifex (master) ([b7d3ec6](b7d3ec6))

* feat: implement accessible flyout menu and handle submenus (#1495)

- focus the popper's first child element when it is rendered
- move focus to flyout menu's first child, i.e. the menu when it receives focus
- the Right arrow key opens the submenu, Left arrow key closes submenu and focuses its parent item
- close flyout menu with the Escape key by passing it a closeMenu function as a prop
- add unit tests simulating opening and closing of submenus

* chore(release): cut 9.11.0 [skip release]

# [9.11.0](v9.10.3...v9.11.0) (2024-07-29)

### Features

* implement accessible flyout menu and handle submenus ([#1495](#1495)) ([73d1f7e](73d1f7e))

* fix: issue with production build not loading some dependent modules

* chore(package json): remove superfluous resolutions (react & temporal)

* fix: resolve react version (#1567)

* fix: resolve react version

* fix: update yarn.lock again

to test the build passes on CI

---------

Co-authored-by: Flaminia Cavallo <[email protected]>
Co-authored-by: Mozafar Haider <[email protected]>

* fix: pin react version in resolution (#1573)

* fix: fix publishing to npm (#1577)

* chore(release): cut 9.11.1 [skip release]

## [9.11.1](v9.11.0...v9.11.1) (2024-08-08)

### Bug Fixes

* fix publishing to npm ([#1577](#1577)) ([1889a7b](1889a7b))
* get rid of storybook references in docs ([1904b17](1904b17))
* get storybook 8 working ([8c6be62](8c6be62))
* issue with production build not loading some dependent modules ([5060c61](5060c61))
* pin react version in resolution ([#1573](#1573)) ([46cdd79](46cdd79))
* resolve react version ([#1567](#1567)) ([c18a73d](c18a73d))
* **calendar:** pin temporal dependency to version 0.4.3 due to breaking changes ([3b5a586](3b5a586))

* fix(translations): sync translations from transifex (master)

Automatically merged.

* fix(translations): sync translations from transifex (master)

Automatically merged.

* chore(release): cut 9.11.2 [skip release]

## [9.11.2](v9.11.1...v9.11.2) (2024-08-18)

### Bug Fixes

* **translations:** sync translations from transifex (master) ([2f82be2](2f82be2))
* **translations:** sync translations from transifex (master) ([e8b0559](e8b0559))

* fix: select-field not showing in correct place (#1400)

* chore(release): cut 9.11.3 [skip release]

## [9.11.3](v9.11.2...v9.11.3) (2024-08-21)

### Bug Fixes

* select-field not showing in correct place ([#1400](#1400)) ([d97d640](d97d640))

* docs: update css variables info (#1584)

---------

Co-authored-by: chisom chima <[email protected]>
Co-authored-by: Flaminia Cavallo <[email protected]>
Co-authored-by: @dhis2-bot <[email protected]>
Co-authored-by: Birk Johansson <[email protected]>
Co-authored-by: Chisom Chima <[email protected]>
Co-authored-by: Flaminia <[email protected]>
Co-authored-by: Thomas Zemp <[email protected]>
Co-authored-by: Diana Nanyanzi <[email protected]>
Co-authored-by: Alaa Yahia <[email protected]>
Co-authored-by: Redet Getachew <[email protected]>
Co-authored-by: Mohammer5 <[email protected]>
Co-authored-by: Jan-Gerke Salomon <[email protected]>
Co-authored-by: Flaminia Cavallo <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@kabaros kabaros kabaros approved these changes

Assignees
No one assigned
Labels
accessibility released
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@alaa-yahia @kabaros @dhis2-bot