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

Fix A11Y violation in card basic #375

Closed
Elohina opened this issue Jan 7, 2020 · 1 comment
Closed

Fix A11Y violation in card basic #375

Elohina opened this issue Jan 7, 2020 · 1 comment
Assignees
Labels
infrastructure CATEGORY: Infrastructure related - e.g. updates to build process, tests, tooling, etc.

Comments

@Elohina
Copy link
Collaborator

Elohina commented Jan 7, 2020

Describe the bug
The card-basic component is generating an accessibility violation since aria-labelledby is not being referenced correctly.

I think this can be solved by working in the inline-svg-symbol component because what it is causing the error is the __title added at the end of the aria-labelledby property.

To Reproduce
Steps to reproduce the behavior:

  1. Go to /gravity-ui-nunjucks.
  2. Run npm run test:a11y.
  3. See the card-basic violation in the list of a11y violations.

Expected behavior

 Ensures all ARIA attributes have valid values
 ARIA attributes must conform to valid values
 Help: https://dequeuniversity.com/rules/axe/3.4/aria-valid-attr-value?application=axe-puppeteer
@Elohina Elohina self-assigned this Jan 7, 2020
@Elohina Elohina added the infrastructure CATEGORY: Infrastructure related - e.g. updates to build process, tests, tooling, etc. label Jan 8, 2020
@Elohina Elohina changed the title A11Y violation in card basic Fix A11Y violation in card basic Jan 8, 2020
Elohina added a commit that referenced this issue Jan 8, 2020
affects: @buildit/gravity-ui-nunjucks, @buildit/gravity-ui-web

Fix aria-labelledby error in svg images

ISSUES CLOSED: #375
@Elohina Elohina closed this as completed Jan 9, 2020
buildit-dev pushed a commit that referenced this issue Mar 24, 2020
# [3.0.0](gravity-ui-web-v2.2.4...gravity-ui-web-v3.0.0) (2020-03-24)

### Bug Fixes

* **a11y:** fix article's a11y violation ([743c605](743c605))
* **a11y:** fix card violations ([3f4cba1](3f4cba1)), closes [#375](#375)
* **a11y:** update gravity-particles version ([b864736](b864736)), closes [#387](#387)
* **basic card list:** changed breakpoint for two column layout ([acbe86d](acbe86d))
* **basic card list:** only set required margins ([62cb841](62cb841))
* **basic cards list:** remove whitespace on list sides ([d9e4b2a](d9e4b2a))
* **callout:** remove margin from list when in columns ([5d7587d](5d7587d))
* **callout:** tweaks layout ([af320c1](af320c1))
* **card-basic:** fixes size of picture elements ([e44da69](e44da69))
* **cite:** move cite to inline text ([8d347d3](8d347d3))
* **container:** undoes layout regression caused by previous "fix" ([d5c86ad](d5c86ad))
* **hero:** makes container overlap banner ([aef22c2](aef22c2))
* **layout:** fixes broken container max-width value ([cc4f453](cc4f453))
* **layouts:** n-column layouts no longer cause horizontal scrolling ([4c18a3c](4c18a3c))
* **package.json:** web package no longer fails on test ([d8edea6](d8edea6))
* **pre elements:** ensured pre elements with lots of text can scroll ([f52b60f](f52b60f))
* **related items:** used breakpoint code from typography changes ([0bbddb1](0bbddb1))
* **spacing:** added incomplete xxl spacing unit ([4c3295b](4c3295b))
* **svg symbols:** fixes missing title IDs ([256a828](256a828)), closes [#369](#369)
* **typography:** fixes text scaling behaviour ([6ee3f92](6ee3f92))

### Code Refactoring

* removed job list component ([b1a972f](b1a972f))
* **column layout:** refactored layouts to use new column layout ([c3bcfe8](c3bcfe8))
* removes clear() SASS mixin ([6df5c7f](6df5c7f))
* removes list-image-links and logo-image components ([274cf6e](274cf6e)), closes [#275](#275)
* removes redundant `grav-o-section` class ([027782c](027782c))

### Features

* **3 column class list:** add 3 column class ([58d1294](58d1294))
* **3col-list-justified:** new 3 column list with justified text ([0d345df](0d345df))
* **a11y:** add a11y tests to Travis CI ([85778f2](85778f2))
* **articles:** new related items component ([4735694](4735694))
* **basic card:** added hover colour and svg icon treatment ([cbe7ed6](cbe7ed6))
* **basic card:** adjusted font size for copy section ([3072504](3072504))
* **basic card component:** add notch to image when card is a link ([149e539](149e539))
* **basic card component:** added basic card component ([a183257](a183257))
* **basic cards list:** ensured top margin is applied consistently ([e179a88](e179a88)), closes [#174](#174)
* **callout:** new callout organism component ([c8a23db](c8a23db))
* **colors:** adds dark-mode support to color system ([5d07454](5d07454))
* **colors:** adds SASS vars for Wipro brand colors ([434663e](434663e))
* **colors:** updates mark element styling to use Gravity's color system ([d8d1d40](d8d1d40))
* **colors:** updates to latest Gravity particles color schemes ([db8e888](db8e888))
* **column layout:** adds mixin for full-width items ([da9506c](da9506c))
* **debug.css:** adds warning about invisible first-children ([3ea62ae](3ea62ae)), closes [#200](#200)
* **eslint:** moved eslint settings to a shareable config ([51339e2](51339e2))
* **hero:** new hero component ([32c6870](32c6870))
* **layout:** adds list reset mixin and classes ([7335c63](7335c63))
* **layout:** adds sticky-footer mixin and object class ([4dcefe1](4dcefe1))
* **layout:** makes full-bleed page layout opt-in ([a807722](a807722))
* **layout:** makes sticky footer default configurable ([f7276b3](f7276b3))
* **layout:** standardises gap after page header ([c55d85c](c55d85c))
* **links:** adjusts styling of link components ([4b36fca](4b36fca))
* **linting:** updates stylelint rules ([f126ab2](f126ab2)), closes [#245](#245)
* adds margin utility classes ([f8c4b9c](f8c4b9c))
* **logotype:** changes SVG colouring and adds new logotype component ([7a2728f](7a2728f))
* **typography:** implements fluid modular scale ([c122fbf](c122fbf))
* adds optional classes for page header and footer ([e481709](e481709)), closes [#280](#280)
* **ostentatious copy:** added ostentatious copy component ([9c3d60c](9c3d60c))
* **page heading:** added page heading component ([b75fca9](b75fca9))
* **page-footer:** adds smart border to top of footer ([ff2e5ab](ff2e5ab))
* **spacing settings, new padding utils:** adds padding util classes ([9cb0e94](9cb0e94))
* **svg:** improves colouring of inlined SVGs ([e04da74](e04da74))
* **svg:** replaces old SVG symbols with ones from gravity-particles ([49eb3b4](49eb3b4))
* **transitions:** added transition mixin and updated throughout ([0d0da87](0d0da87))
* **two column list:** added simple two column list component ([77e41eb](77e41eb))
* **typography:** changes fonts to Wipro Akkurat TT family ([9fca955](9fca955))
* adds SASS mixins for smart borders ([603ff6c](603ff6c))
* bundles external SASS libs ([bb07594](bb07594))
* improves picture element layout ([31bd6bc](31bd6bc))
* splits templates & PL setup into own NPM package ([949ca01](949ca01)), closes [#241](#241)

### BREAKING CHANGES

* **logotype:** Page header and footer components should now use grav-c-logotype class on logotype SVG.
* **typography:** - The 'secondary' entry has been removed from Gravy's typefaces config. Any references to the
'secondary' typeface should therefore be replace with 'primary' instead.
- All fonts have changed, so the visual appearance will be different. You should probably visually
inspect your layouts to ensure nothing has broken.
* **svg:** All symbol IDs have changed. The social media, "hollow b", Designit and Wipro Digital logos have
been removed.
* **layout:** grav-l-column-list mixin and grav-o-column-list class have been removed. Use grav-reset-list and
grav-o-reset-list instead.
* `grav-o-section` class is no longer available. Consider altering your designs or using the padding
utility classes instead.
* **layout:** - `<body>` now has horizontal margins, vertical padding and max-width by default. Add the `grav-o-full-bleed` class to it to restore the old behaviour.
- `.grav-o-container` class has been removed. Use `.grav-o-full-bleed__content` class instead (within a container that has the `.grav-o-full-bleed__content` class on it).
* **svg:** grav-c-icon class has been removed. Inlined SVGs now automatically get filled with the currentColor.
* **column layout:** removed `two-column-text` and `two-column-block` components
* Job List component has been removed
* The styles for the \`.grav-c-list-image-links\` and \`.grav-c-logo-image\` classes no longer exist.
* **typography:** Gravy and normaliz-scss libs have been removed, so all associated functions and mixins are no longer
available
* The clear() SASS mixin has been removed. Replace any usage of it with your own CSS clearfix.
@buildit-dev
Copy link

🎉 This issue has been resolved in version 3.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
infrastructure CATEGORY: Infrastructure related - e.g. updates to build process, tests, tooling, etc.
Projects
None yet
Development

No branches or pull requests

2 participants