bug: components that are not accessible with the keyboard

[brandyscarney]

Bug Report

Ionic version:

[x] 4.x

The following components have issues with their focused states and keyboard navigation:

• Slides
  • Can't navigate easily
• Item
  • In a menu with routerLink it focuses but you have to tab twice to make enter work
  • Requires tabbing twice to get through the list
  • Buttons inside of a disabled tab can still get tabbed to
• Segment (MD and iOS)
  • Not receiving focused state
  • Can tab and activate disabled segment buttons
• Datetime
  • There is no way to navigate datetime using the keyboard

This list is not comprehensive and will be added to if needed.

[amymarsh4work]

@brandyscarney Hi Brandy! Our app uses the datetime and segment components. Our UX\Accessibility team has raised the issues with us internally as well. I'm interested in helping with these, but would work on them one at a time. The datetime seems one of the more challenging components, so would not tackle that one right away.

Would your team be opposed to an issue be created for each component? It seems like the commits would be easier for your team to get through the pipeline and approved if they are kept small. Would you consider these bugs or feature requests?

[brandyscarney]

@amymarsh4work Hey! Thank you for wanting to help, again! I can also help with any questions.

I would be fine with an issue for each component. I wanted to open this to keep track of all of the problems with navigating, but I can just link the issues here. 🙂 We consider them bugs because it should be working. If any changes to the API are made (properties or new components added) it would be considered a feature.

[amymarsh4work]

Deal. I'll open individual bug cards as I'm working through fixing them and commit with the 'fix' prefix. Thanks for being so helpful! You guys are nice to work with. 👍

[brandyscarney]

Hey @amymarsh4work could you either email me or post your email here for me to delete right after? [email protected]

Looking to see if you'd like to be added to our Slack for discussion. Let me know! 🙂

[willmartian]

Related open issues:

• bug: Arrow Keys do not seem to work with Popover #23512
• bug: segment should be usable with arrow keys #23520
• feat: overlays, enter key to dismiss dialog with inputs #21665
• feat: <ion-select> should have the same base functionality as <select> in regards to keyboard events #13362
• bug: Ion-datetime component is not accessible for the user using keyboard #21553
• core(a11y): keyboard navigation with menu and popovers #20590
• bug: "Next" keyboard button does not focus on correct field. #19504
• feat: Use arrows to change day/month/year HH:SS in datetime #18122

[liamdebeasi]

Thanks for the issue! The issues in the original post have been resolved, so I am going to close this out.

ion-slides was deprecated in Ionic 6, and this issue is likely fixed in a newer version of Swiper.js. Please see https://ionicframework.com/docs/api/slides#migration for more information. Additionally, datetime was revamped in Ionic 6 to be useable on desktop.

For any additional bugs, please open a new issue. Thank you!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.