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.

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

Added Keyboard Navigation #152

Merged
merged 10 commits into from
Aug 17, 2023
Merged

Conversation

s-ddavydenko
Copy link

@s-ddavydenko s-ddavydenko commented Jul 12, 2023

What did you do?
Improved accessibility by adding keyboard navigation. Features added:

  • keyboard navigation (feature)
    
  • focus outline (styles)
    
  • aria roles (aria-selected, aria-label, tabindex, listbox, option) on elements
    

Why did you do it this way?
The appropriate aria roles and labels make the visual more understandable to screen readers which makes the sankey chart viewable to blind users and more. Keyboard navigation allows these users to actually use the sankey chart.

Anything else I should know?
Updated dependencies and added unit tests

Screenshots
Before:
image

After:
SankeyKeyboardNavigation

Applied styles for focus outlines
@s-ddavydenko
Copy link
Author

@microsoft-github-policy-service agree

@zBritva
Copy link
Contributor

zBritva commented Jul 13, 2023

Could you add unit tests for the new feature?

aria selected attribute added to selectable elements in the visual, unit tests added for aria selected and keyboard navigation
@zBritva
Copy link
Contributor

zBritva commented Jul 31, 2023

image

The screen reader output in not descriptive.
And outline is not prefect for this links example. Did you consider to use custom outline? (border or custom path element to highlight the current link)

src/sankeyDiagram.ts Outdated Show resolved Hide resolved
src/sankeyDiagram.ts Outdated Show resolved Hide resolved
test/visualTest.ts Outdated Show resolved Hide resolved
src/behavior.ts Outdated Show resolved Hide resolved
capabilities.json Outdated Show resolved Hide resolved
src/behavior.ts Outdated Show resolved Hide resolved
@MulyukovAidar
Copy link
Contributor

Please check if npm audit fix helps resolving audit issues (see npm audit). Also increase the visual version in pbiviz.json, package.json and add a release note in changelog.md

@FirzinatKhuzeev
Copy link

Add description with screenshots

@s-ddavydenko
Copy link
Author

The screen reader output in not descriptive.
And outline is not prefect for this links example. Did you consider to use custom outline? (border or custom path element to highlight the current link)

@zBritva for now, this would be too difficult to implement

@s-ddavydenko
Copy link
Author

Could you add unit tests for the new feature?

Added

@s-ddavydenko s-ddavydenko changed the base branch from main to dev August 2, 2023 22:00
@s-ddavydenko
Copy link
Author

Please check if npm audit fix helps resolving audit issues (see npm audit). Also increase the visual version in pbiviz.json, package.json and add a release note in changelog.md

changed 4 packages, and audited 782 packages in 2s

109 packages are looking for funding
  run `npm fund` for details

# npm audit report

request  *
Severity: moderate
Server-Side Request Forgery in Request - https://github.com/advisories/GHSA-p8p7-x288-28g6
Depends on vulnerable versions of tough-cookie
No fix available
node_modules/request
  coveralls  *
  Depends on vulnerable versions of request
  node_modules/coveralls

tough-cookie  <4.1.3
Severity: moderate
tough-cookie Prototype Pollution vulnerability - https://github.com/advisories/GHSA-72xf-g2v4-qvf3
No fix available
node_modules/tough-cookie

3 moderate severity vulnerabilities

Some issues need review, and may require choosing
a different dependency.

Ran npm audit fix, this was the output

@s-ddavydenko
Copy link
Author

Add description with screenshots

added

@AleksSavelev
Copy link

Looks good to me, but please, resolve conflicts.

@FirzinatKhuzeev
Copy link

Looks good to me, but please, resolve conflicts.

done

package.json Outdated
@@ -1,6 +1,6 @@
{
"name": "powerbi-visuals-sankey",
"version": "3.1.3.0",
"version": "3.2.0",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Return 4 digit version. It's mandatory for all CVs

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

pbiviz.json Outdated
@@ -1,10 +1,10 @@
{
"visual": {
"name": "SankeyDiagram",
"displayName": "Sankey 3.1.3.0",
"displayName": "Sankey 3.2.0",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

change to 3.2.0.0

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fixed

@uve uve merged commit bfdb018 into microsoft:dev Aug 17, 2023
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants