fix(core): notification a11y #7330

dmitry-stepanenko · 2021-12-07T15:14:09Z

Related Issue(s)

Description

Fixing a11y issues for notifications component.

Overview of changes that were made according to the ticket:
Issue 1: cannot reproduce
Issue 2: cannot reproduce
Issue 3: done
Issue 4: done
Issue 5: done
Issue 6: done
Issue 7: done
Issue 8: done
Issue 9: done
Issue 10: not done, should be fixed within #3123
Issue 11: cannot reproduce
Issue 12: not done, navigation information for tabs is needed
Issue 13: cannot reproduce

Screenshots

Before:

After:

Please check whether the PR fulfills the following requirements

During Implementation

Visual Testing:

visual misalignments/updates
check Light/Dark/HCB/HCW themes
RTL/LTR - proper rendering and labeling
responsiveness(resize)
Content Density (Cozy/Compact/(Condensed))
States - hover/disabled/focused/active/on click/selected/selected hover/press state
Interaction/Animation - open/close, expand/collapse, add/remove, check/uncheck
Mouse vs. Keyboard support
Text Truncation

API and functional correctness

check for console logs (warnings, errors)
API boundary values
[n/a] different combinations of components - free style
change the API values during testing

Documentation and Example validations

[n/a] missing API documentation or it is not understandable
[n/a] poor examples
Stackblitz works for all examples

Accessibility testing
Browser Testing - Edge, Safari, Chrome, Firefox

PR Quality

the commit message(s) follows the guideline:
https://github.com/SAP/fundamental-ngx/blob/main/CONTRIBUTING.md
[n/a] tests for the changes that have been done
all items on the PR Review Checklist are addressed :
https://github.com/SAP/fundamental-ngx/wiki/PR-Review-Checklist
[n/a] Run npm run build-pack-library and test in external application
[n/a] update README.md
[n/a] Breaking Changes Wiki

netlify · 2021-12-07T15:22:27Z

✔️ Deploy Preview for fundamental-ngx ready!

🔨 Explore the source changes: ed876ff

🔍 Inspect the deploy log: https://app.netlify.com/sites/fundamental-ngx/deploys/61fd5b1466f25b0008eb097b

😎 Browse the preview: https://deploy-preview-7330--fundamental-ngx.netlify.app

InnaAtanasova

small comments

libs/core/src/lib/notification/notification/notification.component.ts

dimamarksman

looks good

...cs/notification/examples/template-as-content/notification-open-template-example.component.ts

libs/core/src/lib/notification/notification-header/notification-header.component.ts

libs/core/src/lib/notification/notification-service/notification.service.ts

InnaAtanasova

🚀

github-actions · 2021-12-13T00:05:15Z

This pull request is stale because it has been open 2 days with no activity. Remove stale label or comment or this will be closed in 3 days

github-actions · 2021-12-20T00:05:56Z

This pull request is stale because it has been open 2 days with no activity. Remove stale label or comment or this will be closed in 3 days

Sanjay-1312 · 2021-12-23T10:06:40Z

Issue 1: Fixed

Issue 2: Fixed.

Issue 3: Partially fixed.

Observed Behavior: There is no tooltip or text alternative provided for the more menu.
Expected Behavior: The proper text alternative should be provided to understand for the user such as 'More' button.

Issue 4: Not fixed.

Observed Behavior: On accessing the 'More' button menu read button overflow conveying the wrong information.
Expected behavior: The more button menu should be read and the tool tip should be changed as 'More'.

Issue 5: Not fixed
Observed behavior: On traversing through the list, the list items are not read.
Expected behavior: The list count information should be read to the user.

Issue 6: Issue not reproducible

Issue 7: Fixed

Issue 8:
Case 1: not fixed.
Observed Behavior: the dialog is not properly visible to the user.
Expected behavior: On resizing the screen to different resolution, the content of the screen should be visible to the user.
Case 2: Fixed

Issue 9: Partially fixed.

Observed behavior: On activating the button, the dialog button name is read first followed by the dialog name.
Expected behavior: the dialog name should be read followed by the UI name.

Issue 10: Not fixed.

Observed Behavior:
On accessing the ‘Close’ button, of the message strip information and its Type and UI information is not read for the user.
Expected Behavior:
Ideally, all important information visually conveyed to the user must be read

Issue 11: FIxed

Issue 12: Known JAWS issue.

Issue 13: Fixed

Issue 14: Fixed

Issue 15: Not reproducible.

Retest details:
https://deploy-preview-7330--fundamental-ngx.netlify.app/#/core/notification
JAWS 2021

github-actions · 2022-02-12T07:34:53Z

Visit the preview URL for this PR (updated for commit ed876ff):

https://fundamental-ngx-gh--pr7330-ds-5579-notification-t4qlu288.web.app

_{(expires Fri, 04 Mar 2022 11:31:27 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

Veerakarthick · 2022-02-23T04:04:36Z

Hello Colleague,

Retest has been taken below are the updates.

Issue4: Fixed
Issue5:
Observed behavior:
Observed Behavior:
The item count for the items available within the More menu is not read on navigating within the items.
The speech output is:
Approve
To move through items press up or down arrow.
Reject
Forward

Expected Behavior:
Ideally, the item count for the items available within the menu should be read on navigation.

screenshot:
image

Issue8:
Observed Behavior:
When resizing the screen to ‘Responsive Design’ (320) pixels, the texts within the card are truncate no alternative provided.
Expected Behavior:
Ideally, the text must be adapted to the responsive design and should be within the card without loss of content.

screenshot:
image

Issue10:(Partially fixed)
Observed Behavior:
On accessing the ‘Close’ button, the message strip information is not read for the user.
Expected Behavior:
Ideally, all important information visually conveyed to the user must be read

screenshot:
image

Retest Environment:
URL: https://fundamental-ngx-gh--pr7330-ds-5579-notification-sy1123d8.web.app/
Screen Reader: Jaws 2021.2111.13ILM
Browser:Chrome Version 96.0.4664.110 (Official Build) (64-bit)

Regards,
Karthikeyan.c

github-actions · 2022-02-26T00:06:15Z

This pull request is stale because it has been open 2 days with no activity. Remove stale label or comment or this will be closed in 3 days

author Arkadi Berikashvili <[email protected]> 1645522035 +0400 committer Arkadi Berikashvili <[email protected]> 1646661616 +0400 parent 2c6ab2e author Arkadi Berikashvili <[email protected]> 1645522035 +0400 committer Arkadi Berikashvili <[email protected]> 1646661409 +0400 parent 2c6ab2e author Arkadi Berikashvili <[email protected]> 1645522035 +0400 committer Arkadi Berikashvili <[email protected]> 1646661161 +0400 parent 2c6ab2e author Arkadi Berikashvili <[email protected]> 1645522035 +0400 committer Arkadi Berikashvili <[email protected]> 1646661134 +0400 fix(core): fix carousel issue * fix(core): now time column respects elementsAtOnce config and instead of 7 items now only 5 are shown simultaneously * feat(core): added elementsAtOnce to carousel-column and time component. fixed type issues in wdio * feat(core): updating configs after input change * chore(core): removed redundant properties chore(release): version 0.33.5-rc.8 build 2940 [ci skip] fix(core): fix few issues in multi input (#7760) * fix(core): some issues in multi input of core Fixes #7759 * refactor(core): remove unused code * refactor(core): rename and add comment * fix(core): ctrl+a and delete in custom example test has been failed. was fixed and it do what it's expecting. * fix(core): fix test to passed test some changes applied as expected the behavior. chore(release): version 0.33.5-rc.9 build 2942 [ci skip] docs(core): upload-collection - add range selection to the example (#7761) chore(release): version 0.33.5-rc.10 build 2943 [ci skip] chore(deps): bump core-js from 3.7.0 to 3.21.1 (#7782) Bumps [core-js](https://github.com/zloirock/core-js) from 3.7.0 to 3.21.1. - [Release notes](https://github.com/zloirock/core-js/releases) - [Changelog](https://github.com/zloirock/core-js/blob/master/CHANGELOG.md) - [Commits](zloirock/core-js@v3.7.0...v3.21.1) --- updated-dependencies: - dependency-name: core-js dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> fix(platform): multi-input - omit extra dataSource triggering (#7788) chore(release): version 0.33.5-rc.11 build 2951 [ci skip] feat(platform): table - range selection & bug fixes (#7768) chore(release): version 0.33.5-rc.12 build 2952 [ci skip] feat(platform): emit event when smart filters have been updated (#7771) chore(release): version 0.33.5-rc.13 build 2953 [ci skip] feat(core): grid-list - range selection using "shift" (#7758) chore(release): version 0.33.5-rc.14 build 2954 [ci skip] fix(platform): upload collections enhancements (#7742) chore(release): version 0.33.5-rc.15 build 2956 [ci skip] fix(core): schematics angular cdk version issue (#7800) chore(release): version 0.33.5-rc.16 build 2968 [ci skip] fix(core): menu item should not receive focus on mouse hover and remove extra box shadow [ci visual] (#7774) * fix(core): menu item should not receive focus on mouse hover * fix(core): remove extra box-shadow on menu [ci visual] chore(release): version 0.33.5-rc.17 build 2979 [ci skip] chore(deps-dev): bump @angular-eslint/eslint-plugin-template (#7806) Bumps [@angular-eslint/eslint-plugin-template](https://github.com/angular-eslint/angular-eslint/tree/HEAD/packages/eslint-plugin-template) from 13.0.1 to 13.1.0. - [Release notes](https://github.com/angular-eslint/angular-eslint/releases) - [Changelog](https://github.com/angular-eslint/angular-eslint/blob/master/packages/eslint-plugin-template/CHANGELOG.md) - [Commits](https://github.com/angular-eslint/angular-eslint/commits/v13.1.0/packages/eslint-plugin-template) --- updated-dependencies: - dependency-name: "@angular-eslint/eslint-plugin-template" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> chore(release): version 0.33.5-rc.18 build 2980 [ci skip] fix(core): hide dots when there's nothing to scroll fix(core): added disable functions for previous/next buttons in the calendar (#7574) * fix(core): added disable functions for previous/next buttons in the calender * fix(core): changed to input set and added documentation in core * fix(core): added optional date parameter * fix(core): changed the input functions to just booleans for calendar-header, added handling the logic in the calendar, passing date to the disable functions * fix(core): calendar navigation buttons disable functions fixes 1. fixed docs id and source files 2. added better documentation for using disable functions 3. removed unneeded complex layout in the example file 4. removed example from calendar.po.ts 5. removed ariaDisabled as was not neeeded 6. exported disable functions to a separate type 7. checked validation that input functions are actually functions 7. changed function to be called when bindings are changed, active view is changed or selected date is changed 8. added disable functions as inputs for date picker as well 9. added selected date, currently displayed date and active view to be passed as a context to the function 10. fixed some husky errors with unused variables * fix(core): calendar navigation buttons fixes * fix(core): added correct import for navigationbuttondisablefunction type * fix(core): changed working with currentlyDisplayed prop and made documentation more generic * fix(core): added hidden and removed unused and empty function * fix(core): calendar a11y Co-authored-by: Platon Rov <[email protected]> chore(release): version 0.33.5-rc.19 build 2988 [ci skip] Update libs/core/src/lib/carousel/carousel.component.html Co-authored-by: Dmitriy Stepanenko <[email protected]> fix(core): remvoe extra method chore(deps-dev): bump rollup from 2.67.3 to 2.68.0 (#7809) Bumps [rollup](https://github.com/rollup/rollup) from 2.67.3 to 2.68.0. - [Release notes](https://github.com/rollup/rollup/releases) - [Changelog](https://github.com/rollup/rollup/blob/master/CHANGELOG.md) - [Commits](rollup/rollup@v2.67.3...v2.68.0) --- updated-dependencies: - dependency-name: rollup dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> chore(release): version 0.33.5-rc.20 build 2993 [ci skip] chore(deps-dev): bump @types/lodash-es from 4.17.5 to 4.17.6 (#7803) Bumps [@types/lodash-es](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/lodash-es) from 4.17.5 to 4.17.6. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/lodash-es) --- updated-dependencies: - dependency-name: "@types/lodash-es" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> chore(release): version 0.33.5-rc.21 build 2994 [ci skip] chore(deps-dev): bump @wdio/cli from 7.16.15 to 7.16.16 (#7802) Bumps [@wdio/cli](https://github.com/webdriverio/webdriverio) from 7.16.15 to 7.16.16. - [Release notes](https://github.com/webdriverio/webdriverio/releases) - [Changelog](https://github.com/webdriverio/webdriverio/blob/main/CHANGELOG.md) - [Commits](webdriverio/webdriverio@v7.16.15...v7.16.16) --- updated-dependencies: - dependency-name: "@wdio/cli" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> chore(release): version 0.33.5-rc.22 build 2997 [ci skip] fix(core): layout grid vertical gutter (#7813) chore(release): version 0.33.5-rc.23 build 3002 [ci skip] fix(core): @angular/cdk schematics issue (#7820) chore(release): version 0.33.5-rc.24 build 3013 [ci skip] fix(core): notification a11y (#7330) chore(release): version 0.33.5-rc.25 build 3014 [ci skip] chore(core): fix lint errors in notification (#7823) chore(release): version 0.33.5-rc.26 build 3023 [ci skip] feat(core,platform): bring horizon themes (#7819) chore(release): version 0.33.5-rc.27 build 3026 [ci skip] chore(deps): migrate to the latest nx and angular 13 versions (#7817) * chore(ci): migrate to the latest nx and angular 13 versions * chore(platform): lint fixing * chore(deps): revert to previous version of @angular/cdk due to a bug * test(platform): fix icon tab bar dnd test cases * chore: bump cdk to latest * chore(core,platform): nx migration file removing Co-authored-by: dmitry-stepanenko <[email protected]> Co-authored-by: Platon Rov <[email protected]> chore(release): version 0.33.5-rc.28 build 3045 [ci skip] feat(platform): checkbox,checkbox-group - range selection & code enhancements (#7785) chore(release): version 0.33.5-rc.29 build 3047 [ci skip] fix(core): @angular/cdk schematics issue (#7820) chore(core): fix lint errors in notification (#7823) chore(deps): migrate to the latest nx and angular 13 versions (#7817) * chore(ci): migrate to the latest nx and angular 13 versions * chore(platform): lint fixing * chore(deps): revert to previous version of @angular/cdk due to a bug * test(platform): fix icon tab bar dnd test cases * chore: bump cdk to latest * chore(core,platform): nx migration file removing Co-authored-by: dmitry-stepanenko <[email protected]> Co-authored-by: Platon Rov <[email protected]> feat(platform): checkbox,checkbox-group - range selection & code enhancements (#7785) chore(release): version 0.33.5-rc.29 build 3047 [ci skip]

Karthickc1994 · 2022-05-10T07:09:56Z

Hello colleague,

Retest has been taken with the below environment and the results are below.

Issue 1: Fixed.
Issue 2: Fixed.
Issue 3: Fixed.
Issue 4: Fixed.
Issue5: Still reproducible

Observed behavior:
when activating the more button the item count for the list item is not read out.
screen shot:

Expected behavior:
When the list item is accessed the item count should be read out.

issue 6 : Fixed
Issue 7: Fixed
Issue8: Partially fixed.

Observed behavior:
when the application is switched into 320 CSS pixel, the text within the groups are truncated not alternative provided for the truncated text.
screen shot:

Expected behavior:
When the application is switched into 320CSS pixel, all the content within the application should be visible clear and accessible.

Issue 9: Fixed.

Issue10: Partially Fixed.

Observed behavior:
when the close button within the message strip is accessed all the content within the group is read out.

Screenshot:

Expected behavior:
When the close button within the message strip is accessed only the information within the message strip should read out.

Retest Environment:
https://deploy-preview-7330--fundamental-ngx.netlify.app/#/core/notification
Browser:Version 101.0.4951.54 (Official Build) (64-bit)
Screen Reader: JAWS 2022.2204.20ILM

Regards,
Karthikeyan.c

dmitry-stepanenko added core labels Dec 7, 2021

dmitry-stepanenko self-assigned this Dec 7, 2021

dmitry-stepanenko requested review from a team December 7, 2021 15:51

InnaAtanasova reviewed Dec 8, 2021

View reviewed changes

dmitry-stepanenko force-pushed the ds/5579-notifications-a11y branch 2 times, most recently from 6dd4e57 to a0899ba Compare December 9, 2021 09:25

genereg1 approved these changes Dec 9, 2021

View reviewed changes

dimamarksman approved these changes Dec 9, 2021

View reviewed changes

dmitry-stepanenko force-pushed the ds/5579-notifications-a11y branch from a0899ba to d51f88f Compare December 9, 2021 14:10

Betrozov approved these changes Dec 10, 2021

View reviewed changes

InnaAtanasova approved these changes Dec 10, 2021

View reviewed changes

dmitry-stepanenko added ATL to verify labels Dec 10, 2021

github-actions bot added the stale label Dec 13, 2021

github-actions bot closed this Dec 17, 2021

dmitry-stepanenko reopened this Dec 17, 2021

InnaAtanasova removed the stale label Dec 17, 2021

github-actions bot added the stale label Dec 20, 2021

dmitry-stepanenko force-pushed the ds/5579-notifications-a11y branch from d51f88f to fb33ff4 Compare December 20, 2021 14:16

Sanjay-1312 added ATL verified and removed ready for qa labels Dec 23, 2021

dmitry-stepanenko added the Rework (QA) label Feb 1, 2022

dmitry-stepanenko mentioned this pull request Feb 4, 2022

Notifications -Core #5579

Closed

dmitry-stepanenko added ATL to verify and removed Rework (QA) labels Feb 4, 2022

fix(core): notification a11y

ed876ff

dmitry-stepanenko force-pushed the ds/5579-notifications-a11y branch from d2f1aff to ed876ff Compare February 4, 2022 16:57

github-actions bot closed this Feb 8, 2022

dmitry-stepanenko reopened this Feb 8, 2022

mikerodonnell89 approved these changes Feb 8, 2022

View reviewed changes

github-actions bot closed this Feb 12, 2022

dmitry-stepanenko reopened this Feb 12, 2022

github-actions bot closed this Feb 16, 2022

dmitry-stepanenko reopened this Feb 16, 2022

github-actions bot closed this Feb 20, 2022

dmitry-stepanenko reopened this Feb 20, 2022

dmitry-stepanenko removed the stale label Feb 21, 2022

Veerakarthick added the rework required label Feb 23, 2022

github-actions bot added the stale label Feb 26, 2022

github-actions bot closed this Mar 1, 2022

dmitry-stepanenko reopened this Mar 1, 2022

mikerodonnell89 removed the stale label Mar 1, 2022

mikerodonnell89 merged commit a4c352a into main Mar 1, 2022

mikerodonnell89 deleted the ds/5579-notifications-a11y branch March 1, 2022 17:53

mikerodonnell89 mentioned this pull request Mar 1, 2022

Defect Hunting: Notification bugs #7821

Closed

4 tasks

aberikashvili pushed a commit that referenced this pull request Mar 7, 2022

fix(core): notification a11y (#7330)

6198364

fix(core): notification a11y #7330

fix(core): notification a11y #7330

Uh oh!

Conversation

dmitry-stepanenko commented Dec 7, 2021

Related Issue(s)

Description

Screenshots

Before:

After:

Please check whether the PR fulfills the following requirements

During Implementation

PR Quality

Uh oh!

netlify bot commented Dec 7, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

InnaAtanasova left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

dimamarksman left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

InnaAtanasova left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Dec 13, 2021

Uh oh!

github-actions bot commented Dec 20, 2021

Uh oh!

Sanjay-1312 commented Dec 23, 2021

Uh oh!

github-actions bot commented Feb 12, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Veerakarthick commented Feb 23, 2022

Uh oh!

github-actions bot commented Feb 26, 2022

Uh oh!

Karthickc1994 commented May 10, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

10 participants

netlify bot commented Dec 7, 2021 •

edited

Loading

github-actions bot commented Feb 12, 2022 •

edited

Loading