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

Enhancement: Accessibility enhancement of alert #1545

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Enhancement: Accessibility enhancement of alert #1545

wants to merge 8 commits into from

Conversation

pfafffabian-ifx
Copy link
Collaborator

@pfafffabian-ifx pfafffabian-ifx commented Oct 17, 2024 •
edited by github-actions bot
Loading

By creating this pull request you agree to the terms in CONTRIBUTING.md.
https://github.com/Infineon/.github/blob/master/CONTRIBUTING.md
--- DO NOT DELETE ANYTHING ABOVE THIS LINE ---

CONTRIBUTING.md also tells you what to expect in the PR process.

Description

  • Implemented styling on focus
  • Added aria-attributes

Related Issue
#1264

Context

WCAG Guidelines Checklist
Guideline num Guideline Level Summary Status
1.1.1 Non-text Content A Provide text alternatives for non-text content Passing
1.2.1 Audio-only and Video-only (Pre-recorded) A Provide an alternative to video-only and audio-only content Not Applicable
1.2.2 Captions (Pre-recorded) A Provide captions for videos with audio Not Applicable
1.2.3 Audio Description or Media Alternative (Pre-recorded) A Video with audio has a second alternative Not Applicable
1.2.4 Captions (Live) AA Live videos have captions Not Applicable
1.2.5 Audio Description (Pre-recorded) AA Users have access to audio description for video content Not Applicable
1.2.6 Sign Language (Pre-recorded) AAA Provide sign language translations for videos Not Applicable
1.2.7 Extended Audio description (Pre-recorded) AAA Provide extended audio description for videos Not Applicable
1.2.8 Media Alternative (Pre-recorded) AAA Provide a text alternative to videos Not Applicable
1.2.9 Audio Only (Live) AAA Provide alternatives for live audio Not Applicable
1.3.1 Info and Relationships A Logical structure Passing
1.3.2 Meaningful Sequence A Present content in a meaningful order Passing
1.3.3 Sensory Characteristics A Use more than one sense for instructions Passing
1.3.4 Orientation (WCAG 2.1) AA Content can be display in portrait and landscape orientation Passing
1.3.5 Identify Input Purpose (WCAG 2.1) AA Each input field must be able to be determined programmatically, a user should be able for example to autofill inputs Not Applicable
1.3.6 Identify Purpose (WCAG 2.1) AAA Interface components, icons and landmarks (sections, article, main, etc.) must be able to be identified programmatically to help navigation for assistive technologies Passing
1.4.1 Use of Colour A Don’t use presentation that relies solely on colour Passing
1.4.2 Audio Control A Don’t play audio automatically Not Applicable
1.4.3 Contrast (Minimum) AA Contrast ratio between text and background is at least 4.5:1 Passing
1.4.4 Resize Text AA Text can be resized to 200% without loss of content or function Passing
1.4.5 Images of Text AA Don’t use images of text Passing
1.4.6 Contrast (Enhanced) AAA Contrast ratio between text and background is at least 7:1 Passing
1.4.7 Low or No Background Audio AAA Audio is clear for listeners to hear Not Applicable
1.4.8 Visual Presentation AAA Offer users a range of presentation options Failing
1.4.9 Images of Text (No Exception) AAA Don’t use images of text Passing
1.4.10 Reflow (WCAG 2.1) AA User must be able to browse a website using a 320 pixel wide screen without having to scroll horizontally (There are some exceptions) Passing
1.4.11 Non-Text Contrast  (WCAG 2.1) AA Extend color contrast of at least 3:1 to non-text content such as infographics, diagrams, states, etc. Passing
1.4.12 Text Spacing  (WCAG 2.1) AA Changing text style properties shouldn't break the page (line height, spacing after paragraph, letter spacing, word spacing) Passing
1.4.13 Content on Hover or Focus  (WCAG 2.1) AA Elements that are being shown on focus or hover (skip navigation, tooltip) should be dismissible(Esc), hoverable, persistent Passing
2.1.1 Keyboard A Accessible by keyboard only Passing
2.1.2 No Keyboard Trap A Don’t trap keyboard users Passing
2.1.3 Keyboard (No Exception) AAA Accessible by keyboard only, without exception Passing
2.1.4 Character Key Shortcuts (WCAG 2.1) A If using single letter keyboard shortcut, the shortcut should be able to be turn off, or remap, or active only on focus Not Applicable
2.2.1 Timing Adjustable A Time limits have user controls Not Applicable
2.2.2 Pause, Stop, Hide A Provide user controls for moving content Not Applicable
2.2.3 No Timing AAA No time limits Not Applicable
2.2.4 Interruptions AAA Don’t interrupt users Not Applicable
2.2.5 Re-authenticating AAA Save user data when re-authenticating Not Applicable
2.2.6 Timeouts  (WCAG 2.1) AAA Users should be warned if user inactivity could cause data loss, unless data is preserved for more than 20h Not Applicable
2.3.1 Three Flashes or Below A No content flashes more than three times per second Not Applicable
2.3.2 Three Flashes AAA No content flashes more than three times per second Not Applicable
2.3.3 Animation from Interactions  (WCAG 2.1) AAA Motion animation triggered by interaction can be disabled Not Applicable
2.4.1 Bypass Blocks A Provide a ‘Skip to Content’ link Not Applicable
2.4.10 Section Headings AAA Break up content with headings Not Applicable
2.4.11 Focus Not Obscured (Minimum) (WCAG 2.2) AA When a user interface component receives keyboard focus, the component is not entirely hidden due to author-created content. Passing
2.4.12 Focus Not Obscured (Enhanced) (WCAG 2.2) AAA When a user interface component receives keyboard focus, no part of the component is hidden by author-created content. Passing
2.4.13 Focus Appearance (WCAG 2.2) AAA The keyboard focus indicator is at least 2 pixel thick and has a contrast ratio of at least 3:1 to the unfocused state Passing
2.4.2 Page Titled A Use helpful and clear page titles Not Applicable
2.4.3 Focus Order A Logical order Passing
2.4.4 Link Purpose (In Context) A Every link’s purpose is clear from its context Not Applicable
2.4.5 Multiple Ways AA Offer several ways to find pages Not Applicable
2.4.6 Headings and Labels AA Use clear headings and labels Passing
2.4.7 Focus Visible AA Ensure keyboard focus is visible and clear Passing
2.4.8 Location AAA Let users know where they are within a set of web pages Not Applicable
2.4.9 Link Purpose (Link Only) AAA Every link’s purpose is clear from its text Not Applicable
2.5.1 Pointer Gestures (WCAG 2.1) A Complex gesture (Pinch, zooming, swiping) should have a simpler gesture alternative (Tap, double taps, long press) Not Applicable
2.5.2 Pointer Cancellation  (WCAG 2.1) A When using single pointer events, one of the following should be true, No Down-Event, Abort or Undo, Up Reversal, Essential Passing
2.5.3 Label in Name (WCAG 2.1) A Text in buttons or label should be readable by assistant technologies and can be used with Text-to-speech Passing
2.5.4 Motion Actuation  (WCAG 2.1) A Functionalities trigger by moving the device should have a fallback without (Eg some apps use shake to undo) Not Applicable
2.5.5 Target Size (WCAG 2.1) AAA The size of the target for pointer inputs is at least 44 by 44 CSS pixels Failing
2.5.6 Concurrent Input Mechanisms (WCAG 2.1) AAA Inputs must to available to use with a different mechanism (Mouse, keyboard, stylus, touch, voice) Passing
2.5.7 Dragging Movements  (WCAG 2.2) AA All functionality that uses a dragging movement for operation can be achieved by a single pointer without dragging unless essential or functionality determined by user agent Not Applicable
2.5.8 Target Size (Minimum)  (WCAG 2.2) AA The size of the target for pointer inputs is at least 24 by 24 CSS pixels, except where: spacing, equivalent, inline, user agent control, essential Passing
3.1.1 Language of Page A Page has a language assigned Not Applicable
3.1.2 Language of Parts AA Tell users when the language on a page changes Not Applicable
3.1.3 Unusual words AAA Explain any strange words Not Applicable
3.1.4 Abbreviations AAA Explain any abbreviations Not Applicable
3.1.5 Reading Level AAA Users with nine years of school can read your content Passing
3.1.6 Pronunciation AAA Explain any words that are hard to pronounce Not Applicable
3.2.1 On Focus A Elements do not change when they receive focus Passing
3.2.2 On Input A Elements do not change when they receive input Not Applicable
3.2.3 Consistent Navigation AA Use menus consistently Not Applicable
3.2.4 Consistent Identification AA Use icons and buttons consistently Passing
3.2.5 Change on Request AAA Don’t change elements on your website until users ask Not Applicable
3.2.6 Consistent Help (WCAG 2.2) A Help mechanisms are available on every page in the same manner Not Applicable
3.3.1 Error Identification A Clearly identify input errors Not Applicable
3.3.2 Labels or Instructions A Label elements and give instructions Passing
3.3.3 Error Suggestion AA Suggest fixes when users make errors Not Applicable
3.3.4 Error Prevention (Legal, Financial, Data) AA Reduce the risk of input errors for sensitive data Not Applicable
3.3.5 Help AAA Provide detailed help and instructions Passing
3.3.6 Error Prevention (All) AAA Reduce the risk of all input errors Not Applicable
3.3.7 Redundant Entry (WCAG 2.2) A Information previously entered by or provided to the user that is required to be entered again in the same process is either auto-populated or available to select (Exceptions) Not Applicable
3.3.8 Accessible Authentication (Minimum) (WCAG 2.2) AA A cognitive function test is not required in authentication unless at least one of the following is met: alternative, mechanism, object recognition, personal content Not Applicable
3.3.9 Accessible Authentication (Enhanced) (WCAG 2.2) AAA A cognitive function test is not required in authentication unless at least one of the following is met: alternative, mechanism Not Applicable
4.1.1 Parsing (removed in WCAG 2.2) A No major code errors Passing
4.1.2 Name, Role, Value A Build all components for accessibility Passing
4.1.3 Status Messages (WCAG 2.1) AA Content that is updated dynamically must be notified to users of assistive technologies without getting visual focus Not Applicable
📦 Published PR as canary version: 25.11.0--canary.1545.afbe67b88f343ef8af0c674d6402215c66a294be.0

✨ Test out this PR locally via:

npm install @infineon/infineon-design-system-stencil@25.11.0--canary.1545.afbe67b88f343ef8af0c674d6402215c66a294be.0
# or 
yarn add @infineon/infineon-design-system-stencil@25.11.0--canary.1545.afbe67b88f343ef8af0c674d6402215c66a294be.0

@pfafffabian-ifx pfafffabian-ifx self-assigned this Oct 17, 2024
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Oct 17, 2024 •
edited
Loading

PR Preview Action v1.4.8
🚀 Deployed preview to https://Infineon.github.io/infineon-design-system-stencil/pr-preview-angular-example/pr-1545/
on branch gh-pages at 2024-10-17 14:58 UTC

@github-actions GitHub Actions
Copy link
Contributor

--STORYBOOK-PREVIEW--

@pfafffabian-ifx pfafffabian-ifx added enhancement Adding a new feature or improving existing code minor minor version bump labels Oct 17, 2024
@github-actions GitHub Actions
Copy link
Contributor

--EXAMPLE-APPS-PREVIEW--
PR Preview URLs:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees

@pfafffabian-ifx pfafffabian-ifx

Labels
enhancement Adding a new feature or improving existing code minor minor version bump
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@pfafffabian-ifx