Styling refactor for links on hover for Assets Page of Profile Section #3934
Description
Increasing Access
This could continue to make the editor comply to WCAG accessibility guidelines, ensuring that the editor stays accessible to as much users as possible.
Feature enhancement details
Issue Description
This specific subissue requests to add an underline for all hyperlinked elements, and a thicker underline for hyperlinks on hover.
Accessibility guidelines indicate that link texts need to be indicated with more than just color difference, and the most common best practice is to underline them.
Location of the requested changes on the editor: https://editor.p5js.org/{username}/assets
Change Requested
- Add an underline text decoration for all hyperlinks
- set the underline thickness to 0.1 em for hyperlinks on hover.
Visuals
Files to change
-
client/styles/components/_asset-list.scss - In the class
.asset-table__row, specify an underline text decoration - Add a class called
.asset-table__row a: hoverand increase the underline thickness on hover. See the class .sketches-table__row a:hoverinsketch-list.scssfor reference.
PR Criteria
- Provide screenshots in ur PR of the visual changes implemented
- Provide QA steps for how reviewers can ensure your changes are made properly
- Test out by uploading assets in your local environment. You'll need to set up an AWS s3 configuration by creating an AWS s3 bucket. This is the main doc dedicated to it outlining the steps, which came from the Configuration section of the Installation doc.
Additional Resources:
- Color Combinations for Accessibility – tool developed by @izzy-synder that generates custom color palettes for components while adhering to WCAG guidelines and p5.js styling standardizations.
- Zeplin Style Link – the p5.js editor’s styling standardizations
- Preparing a Pull Request – how-to guide on creating a Pull Request
- Style Guide Documentation (WIP), best-practices guide on implementing styling changes to the codebase.