microsoft / webtemplatestudio Goto Github PK

Issue: Images must have alternate text (image-alt)

Target application: Project Acorn
All Icons do this
Element path: .styles_icon__lZfWw

Snippet:

<img src="./static/media/fullstackwhite.4a51bb13.svg" class="styles_icon__lZfWw">

How to fix:

Fix any of the following:
  Element does not have an alt attribute
  aria-label attribute does not exist or is empty
  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  Element has no title attribute or the title attribute is empty
  Element's default semantics were not overridden with role="presentation"
  Element's default semantics were not overridden with role="none"

Environment:
Chrome version 72.0.3626.121

====

This accessibility issue was found using Accessibility Insights for Web 2.0.4 (axe-core 3.1.1), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.

Replace "any" types on client with strict typing.

SubscriptionClient and ResourceManagementClient are imported from a relative path right now. These need to be imported from 'azure-arm-resource'

When a long description is used the spacing between the svg and the title has no spacing.

The styling of the x that exists on top of the selected pages is off. this can be fixed in DraggableSideBarItem component

modal initialstate shouldn't be in its own file. because the state is set during the running of the modal, the initialstate doesn't have to be set initially, but the component needs to be refactored as a result.

need to have CI/CD system on it for status

AzureAuth currently assumes the user is logged in. We should be able to detect if the user is not logged in and throw an error or a promise rejection accordingly.

Wizard should be able to log into Azure and retrieve profile data information through VSCode. Also allow sign out functionality.

AB#23369

We need a directory for templates because its path is going to be sent to the CoreTemplateStudio API from the extension as a parameter

Set up localization for wizard using react-intl

Query to mongo needs to sort by date.

Adding in Django support would be a great additional framewoork

This happens in controller.ts before calling update Connection String function

We need to use destructured variables where possible so that our code is cleaner.

To replicate, bring up console on bottom half of screen, when project details list is long enough it will persist vertical resolution/length. Resizing the console upwards, and then back downwards persists the nav bar.
Chrome:

VSCode:

We need frameworks to be updated through the engine to allow the engine to be less error prone.

Right now we are using a string for the port number, we should instead use number.

Issue: id attribute value must be unique (duplicate-id)

Target application: Project Acorn

Element path: div:nth-child(2) > .styles_sidebarItem__y8q7s > .css-10nd86i > .css-1d2yego > .css-1wy0on6 > .css-1ep9fjw[aria-hidden="true"] > svg

Snippet:

<svg id="Layer_1" data-name="Layer 1" viewBox="0 0 36 36" class="styles_icon__1un-U"><defs><style>.cls-1{fill:#FFFFFF;}</style></defs><title>Chevron Up</title><path class="cls-1" d="M34.36,27,18,10.6,1.63,27,.05,25.37l18-18,18,18Z"></path></svg>

How to fix:

Fix any of the following:
  Document has multiple static elements with the same id attribute

Environment:
Chrome version 72.0.3626.121

====

This accessibility issue was found using Accessibility Insights for Web 2.0.4 (axe-core 3.1.1), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.

Items to validate:

• Only allow dropdowns to be "clickable" if data is loaded into it
• Notify developers of improper input with feedback
• Allow unmodified input from developer

in AzureAuth.ts, had to import SubscriptionClient et. al directly from node-modules to get the correct types. Fix this import to support TS correctly

Issue: Form elements must have labels (label)

Target application: Project Acorn
All sidebar inputs need this
Element path: #react-select-5-input

Snippet:

<input id="react-select-5-input" readonly="" tabindex="0" class="css-14uuagi" value="">

How to fix:

Fix any of the following:
  aria-label attribute does not exist or is empty
  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  Form element does not have an implicit (wrapped) <label>
  Form element does not have an explicit <label>
  Element has no title attribute or the title attribute is empty

Environment:
Chrome version 72.0.3626.121

====

This accessibility issue was found using Accessibility Insights for Web 2.0.4 (axe-core 3.1.1), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.

centralize app state in the redux store.
frontend and backend selections on the wizard appear on the same page
updating frontend/backend selections should update the dropdown menus and vice/versa

In order to show the progress a developer has made while using the wizard, the results need to show up on the right-hand sidebar.

This means that the view to selection different options must be converted to redux containers so that it can share the application state with the right-hand sidebar.

Acceptance Criteria:
As a selection is chosen on each wizard view, the resulting selection appears on the right-hand sidebar as per wireframes. Works for the following components:

• App Selection Page
• Front-end framework
• Back-end framework
• Pages

Currently, we only show one error in the summary page even if there are two errors

We should display as many errors as there are and we should follow visual studio code's error handling

Map functions need keys for all components generated.

Ensure they are unique or else it adversely affects rendering.

Issue: Page must have means to bypass repeated blocks (bypass)

Target application: Project Acorn
Happens with All endpoints

Element path: html

Snippet:

<html lang="en">

How to fix:

Fix any of the following:
  No valid skip link found
  Page does not have a header
  Page does not have a landmark region

Environment:
Chrome version 72.0.3626.121

====

This accessibility issue was found using Accessibility Insights for Web 2.0.4 (axe-core 3.1.1), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.

Right now, we are keeping the wizard running in the background when the user switches tabs to store the progress in the wizard.

This is expensive but it's not a small fix.

The solution is to store the state of the wizard in the vscode state after every change

• Change createSignalR.. method to establishSignalR..
• Call postConnectionHandler in the establishSignalR... method rather than the current method
• Clean up sync api.
• Figure out a better way to do retries or consider sending a message to the extension to initiate connection.
  Use https No longer being considered since always local host and would create bad UX since the user would have to trust the cert manually.

Adding this in would be a good idea.

Readme.md and install.md should be broken apart. It needs to be crisp, clean and upfront for what is happening.

Issue: ARIA roles used must conform to valid values (aria-roles)
Details button
Target application: Project Acorn

Element path: .styles_subscriptionCardContainer__32zVX:nth-child(1) > .styles_loginContainer__2_W3f > .styles_selectionContainer__2T7Sk > .styles_details__3DvFP[role="Button"]

Snippet:

<div class="styles_details__3DvFP" role="Button">Details</div>

How to fix:

Fix all of the following:
  Role must be one of the valid ARIA roles
  The role used is not widely supported in assistive technologies

Environment:
Chrome version 72.0.3626.121

====

This accessibility issue was found using Accessibility Insights for Web 2.0.4 (axe-core 3.1.1), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.

I suggest passing theme from extension to client via onDidMessageReceiver via webview

(node:22872) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.

Right now we are using mock data for pages. When we ship this shouldn't be the case, since users may want to add new pages.

Create controller for VSCode commands on Wizard (client), which is created for VSCode extension on #63.

Related to #92

https://github.com/Microsoft/WindowsTemplateStudio/blob/dev/CONTRIBUTING.md