Component walkthrough

[MadsBuchmann]

Components

Accordion

• Enable tabbing through accordion #2339

Action sheet

• Use pressed/hover state styles for focus when tabbing ([Enhancement] Change background color on focus inside accordion, list, action sheet and dropdown #2236 might solve this)
• Cancel button on action sheet does not get any focus styles #2340
• It is possible to spam open to get like a bazillion action sheets
• [BLOCKED][Enhancement] Responsive Actionsheet (On large screens) #404 should be solved

Alert

• The alert shouldn't slide in from the bottom on desktop - but appear in the middle of the screen... Somehow, more design needed. On mobile it should still appear from bottom

Button

Looks good!

Calendar

• Look into swapping out with new datetime component from ionic 6. The year selector experience might be a bit iffy on desktop as it uses a native like selector.

Checkbox

• we could consider creating some sort of "checkbox-group" component to semantically tie the checkboxes together. Might be more accessibility releated.

Chip

• Deprecate the standalone chip component #2341

Dropdown

• Dropdown keyboard navigation selects an option #2342

FAB Sheet

... Should generally not be used on desktop. It is a mobile pattern.

• Write guidelines in the cookbook that it should not be used on desktop

Item Picker

• No styles on tab navigation: should only change background color - no focus ring. [Enhancement] Change background color on focus inside accordion, list, action sheet and dropdown #2236 is once again relevant.

List Component

• Item in list is missing pressed state on enter/space when selectable #2343

Modal

• It does not recieve focus when it opens. If you use only keyboard it's impossible to navigate the modal. But consumers can programatically set focus inside if necessary. - Solved via Ionic 6 upgrade!! ~~~~~ dance dance dance ~~~~~

Range

• (nice to have) Has no label showing value when using keyboard. Might be more of an accessibility thing.

Reorder list

• [BUG] Reorder list rounded corners not working #2344
• It is not possible to reorder using keyboard. Might be more of an accessibility thing tho.

Segmented Control

• Adjust loudness scale for the selected segment item #2345
• Segmented control has no pressed state for enter/space when mode is default  #2346
• Segmented control - Align keyboard interactions between the different modes #2347
• Consider using a button for the grouped example for the "show all". Eventually rename the example. #2348
• Segmented Control with badge deselects completely when badge is pressed #2349

Slide

• Deprecate it, it will be removed in ionic v7. See: [Enhancement] Refactor Kirby-Slide (Desktop Ready?) #1986

tabs

• tabs does not load until pressed the second time. Might be related to onPush. Might just be a cookbook issue 🤷
• The menu button does not react on space and enter
• Totally lacks interaction states

Toggle button

• Rewrite toggle button to stateful button. Right now we're swapping it out and this removes the focus.