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

UI5-Button | iOS | a11y - Button Focus outline not visible #8178

Closed
1 task done
yoganjan opened this issue Jan 25, 2024 · 6 comments · Fixed by #8414
Closed
1 task done

UI5-Button | iOS | a11y - Button Focus outline not visible #8178

yoganjan opened this issue Jan 25, 2024 · 6 comments · Fixed by #8414
Assignees
@didip1000
Labels
ACC consulting Medium Prio TOPIC B

Comments

@yoganjan
Copy link

Bug Description

UI5-Button focus is not visible while tabbing. This is happening for iphone

Affected Component

Button

Expected Behaviour

Outline focus should be visible for the button when its fouced while tabbing

Isolated Example

No response

Steps to Reproduce

  1. Open https://sap.github.io/ui5-webcomponents-react/?path=/docs/inputs-button--docs
  2. Open Toggle Device Tool Bar from chrome dev tool
  3. Select iPhone 14 Pro Max
  4. Tray focusing the button by clicking on keyboard tab
    ...

Log Output, Stack Trace or Screenshots

No response

Priority

Medium

UI5 Web Components Version

1.20.0

Browser

Chrome

Operating System

No response

Additional Context

No response

Organization

SAP

Declaration

  • I’m not disclosing any internal or sensitive information.
@yoganjan yoganjan added the bug This issue is a bug in the code label Jan 25, 2024
@yoganjan yoganjan changed the title UI5-Button | iOS | a11y UI5-Button | iOS | a11y - Button Focus outline not visible Jan 25, 2024
@LidiyaGeorgieva LidiyaGeorgieva self-assigned this Jan 25, 2024
@LidiyaGeorgieva LidiyaGeorgieva added consulting and removed bug This issue is a bug in the code labels Jan 25, 2024
@LidiyaGeorgieva
Copy link
Contributor

Hello @yoganjan ,

If you are testing on real device (phone) there will be no "tab" key. The way you test seems wrong to me.
Also on phone there is no need of features as focus, hover, etc. since they are not useful without real keyboard or mouse.

Best Regards,
Lidiya

@yoganjan
Copy link
Author

yoganjan commented Jan 29, 2024 •
edited
Loading

Hi @LidiyaGeorgieva ,
We are testing by connecting blueetooth enabled keyboard to the iphone and testing. Same we were able to reproduce from chrome dev tools as well

@LidiyaGeorgieva
Copy link
Contributor

Hello @yoganjan ,
Could you please explain which Accessibility standard is violated.
Best Regards,
Lidiya

@yoganjan
Copy link
Author

Hi @LidiyaGeorgieva ,

When we navigate the input fields with Tab key on keyboard , we should see outline for the buttons. But for the Ui5-Button outline is not visible when its focused using Tab

Thanks,
Yoganjan

@LidiyaGeorgieva
Copy link
Contributor

Hello @SAP/ui5-webcomponents-topic-b,
Please advice.
Regards,
Lidiya

@petyabegovska
Copy link
Collaborator

petyabegovska commented Jan 30, 2024 •
edited
Loading

Note: This is part of bigger topic for visual focus on mobile: FIORITECHP1-17583.

Related to: #8250

@unazko unazko removed their assignment Feb 13, 2024
@didip1000 didip1000 mentioned this issue Mar 8, 2024
Merged
@hinzzx hinzzx assigned hinzzx and didip1000 and unassigned hinzzx Mar 11, 2024
didip1000 added a commit that referenced this issue Apr 11, 2024
@didip1000 @pskelin
feat(ui5-button): provide focus support for mobile (#8414)
4d9e32f 
Button elements can now receive focus when using keyboards on mobile devices. Focus outline is now displayed via CSS pseudo-classes and no longer relies on using the[focused] attribute.

The following components were updated:
* ui5-button
* ui5-toggle-button
* ui5-segmented-button
* ui5-split-button

Fixes: #8178
Related to: #8322

Co-authored-by: Peter Skelin <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@didip1000 didip1000

Labels
ACC consulting Medium Prio TOPIC B
Projects
Maintenance - Topic B
Status: Completed
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(ui5-button): provide focus support for mobile SAP/ui5-webcomponents
6 participants
@LidiyaGeorgieva @petyabegovska @unazko @yoganjan @didip1000 @hinzzx