Skip to content

Conversation

@Ibabalola
Copy link
Contributor

When rendering the form input I noticed the empty error div was still rendered on page load

<div class="dcx-form-input govuk-form-group">
   <label for="userReference">some label</label>
   <div class="dcx-error-message"></div> <!-- this container div is not required -->
   <div class="dcx-hint govuk-hint">some hint</div>
   <input name="userReference" type="text" class="govuk-input" tabindex="0" id="userReference" value="">
</div>

Screenshot 2024-04-19 at 13 53 38

This PR remove this such that the error div containing the error message is rendered only when needed

@codecov-commenter
Copy link

codecov-commenter commented Apr 19, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (9f532f2) to head (5abe53a).

❗ Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files
@@               Coverage Diff               @@
##           release/1.0.0      #636   +/-   ##
===============================================
  Coverage         100.00%   100.00%           
===============================================
  Files                 85        85           
  Lines               1549      1554    +5     
  Branches             544       547    +3     
===============================================
+ Hits                1549      1554    +5     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

alexwbbr
alexwbbr previously approved these changes Apr 19, 2024
daniele-zurico
daniele-zurico previously approved these changes Apr 19, 2024
@Ibabalola Ibabalola changed the base branch from epic/accessibility-isssue-rc5 to release/1.0.0 April 19, 2024 14:46
@Ibabalola Ibabalola dismissed stale reviews from daniele-zurico and alexwbbr April 19, 2024 14:46

The base branch was changed.

daniele-zurico
daniele-zurico previously approved these changes Apr 19, 2024
@daniele-zurico daniele-zurico self-requested a review April 19, 2024 15:11
@Ibabalola Ibabalola linked an issue Apr 23, 2024 that may be closed by this pull request
@Ibabalola Ibabalola merged commit 6b034de into release/1.0.0 Apr 23, 2024
@daniele-zurico daniele-zurico deleted the 631-forminput-an-aria-attribute-has-been-given-an-invalid-value-2 branch April 23, 2024 10:32
daniele-zurico pushed a commit that referenced this pull request May 24, 2024
* fix: removing unnecessary div from error message

* feat: adding visually span for screen readers

* feat: adding visually span for screen readers - unit test update

* fix: using p for visually hidden text only

* fix: resolving PR comments

* fix: adding hiddenTextError
daniele-zurico added a commit that referenced this pull request May 24, 2024
* feat(storybook): add tokens documentation viewer (#537)

* feat: highlight design system

#539

* fix: replaced empty jsx with react fragment (#540)

Co-authored-by: awebber <awebber@awebbers-mbp.home>

* feat: add design system for keyboard input

Closes #546

* fix: missing components (#557)

* Feature/storybook layout (#561)

* Story book layout change

* feat: update order

---------

Co-authored-by: Zurico.Daniele_DEFRA <daniele.zurico@gmail.com>

* feat: add design system for link element

Closes #545

---------

Co-authored-by: mmirca <marius.mirca@capgemini.com>

* Paragraph - enable paragraph to have a custom content (#567)

* feat: enable paragraph to have a custom content

* feat: enable typescript safe types

* improves tab documentation to display correct properties (#569)

Co-authored-by: El Moudden <alaa.elmoudden@capgemini.com>

* adds supported engine versions for node, npm & yarn (#570)

* fixes select defaultValue onChange (#573)

* fixes select defaultValue onChange

* code refactor & restored deleted test

* code refactor formSelect logic

* fixes previous commit which remove a test

* adds meta description for SEO (#574)

* feat: add abbreviate design system

Closes #530

* Code snippet - design system (#543)

* style: code snippet design system added

* style: class name updated

* style: classname fixed

* style:dark theme added

* chore: deleted unused code

---------

Co-authored-by: ybayrakt <ybayrakt@adcs-MBP.cust.communityfibre.co.uk>
Co-authored-by: Daniele Zurico <daniele.zurico@gmail.com>

* feat: preformatted text (#575)

Closes 536

* DescriptionList (#522)

* feat: rebase to one commit

* added preview

* comments resolved

* added PreformattedText in preview.js

---------

Co-authored-by: Zurico.Daniele_DEFRA <daniele.zurico@gmail.com>
Co-authored-by: Jeet Jadhav <jeet.d.jadhav@capgemini.com>

* adds blockquote design-system (#571)

* adds blockquote design-system

* adds requested changes in PR: reuse existing token

* adds requested changes in PR: reuse existing token 2.0

* adds reusable tokens

* removes unnecessary tokens and reuses existing tokens

* Button - enhancement to allow pass extra content (#576)

* adds fix enhancement to allow pass an html content

* adds error handling for props and testing error handling

* feat: add test

* feat: add further fixes

* adds custom-content stories

---------

Co-authored-by: Zurico.Daniele_DEFRA <daniele.zurico@gmail.com>

* Accordion component funtionality (#544)

* Accordion component 
---------

Co-authored-by: Berhane Yohannes <berhane.yohannes@capgemini.com>
Co-authored-by: Zurico.Daniele_DEFRA <daniele.zurico@gmail.com>

* feat: fix minor bug on the accordion (#589)

* Form Input - Design System (#586)

* Adding isError property in Checkbox (#585)

* button group component (#541)

* feat: button group component

* fix: linting

* fix: linting

* feat: coverage 100% forminput (#591)

* Description list design system (#597)


* Description list design system

* Card component (#593)

Create a card component
---------
Co-authored-by: Alaa Eddine <alaa.elmoudden@capgemini.com>
Co-authored-by: Zurico.Daniele_DEFRA <daniele.zurico@gmail.com>
Co-authored-by: U01A6369 <javier.gonzalez-moya@capgemini.com>

* feat: bump a new version

* Switched from CRA to Vite in the Example folder (#603)

* feat: {{ Switched to Vite from CRA }}

* fix: removed unecesarry dulicate dependancy react / react dom

* fix: removed type: module as it is not required for projects without the use of exported ECMAScript modules.

* link back to Github from Storybook (#607)

* feat: radio-button-group desing-system (#609)

* feat: add class host element radio-button-group

* feat: update stories archives

* feat: add styles radio styles

* feat: update stories themes css

* fix: tokens class stories

---------

Co-authored-by: U01A6369 <javier.gonzalez-moya@capgemini.com>

* Form CheckBox design-system (#604)

* Form CheckBox design-system

* MaterialTheme Checkbox

* added display property

* feat: refactor styles

---------

Co-authored-by: U01A6369 <javier.gonzalez-moya@capgemini.com>

* Feature/upgrade sb deps (#614)

* feat: upgrade storybook

* feat: add babel

* feat: upgrade other libraries

* feat: upgrade sb

* feat: create file structure and host clases names (#605)

* feat: expose clip-path proertie in checkbox (#615)

* fix: adding fileList to onChange for multi file uploads (#613)

* fix: missing exports (#559)

* fix: adding fileList to onChange for multi file uploads

---------

Co-authored-by: Daniele Zurico <daniele.zurico@gmail.com>

* feat: upgrade all the deps (#616)

* feat: upgrade all the deps

* feat: upgrade all the deps

* feat: upgrade all the deps

* fix: adding css style heading (#620)

* fix: change typed wrong and create safe placeholder-css (#627)

* fix: fixed test forminput and expose select ref (#628)

* accessibility issues (#634)

* fix: missing exports (#559)

* updated the button component to better render aria-label (#619)

* fix: missing exports (#559)

* updated the buttom component to better render aria-label

* added missing test

* split test into two

* fixed typo

---------

Co-authored-by: Daniele Zurico <daniele.zurico@gmail.com>
Co-authored-by: awebber <awebber@awebbers-mbp.home>

* fix: accessbility removing tabIndex (#630)

* fix: accessbility removing tabIndex

* chore: adding associated unit test

* fix: removing name as default on aria-label (#622)

* fix: removing name as default on aria-label

* fix: removing name as default on aria-label

* fix: removing empty alert / error div for a formInput without an error (#632)

* fix: removing empty alert / error div for a formInput without an error

* chore: clean up

* chore: removing aria lable

* Feature/update autocomplete for accessibility (#633)

* Adds accessibility functionality to the autocomplete and updated the docs and tests

---------

Co-authored-by: awebber <awebber@awebbers-mbp.home>

* fix: removing console to resolve eslint:no-console

---------

Co-authored-by: Daniele Zurico <daniele.zurico@gmail.com>
Co-authored-by: alexwbbr <alexwbbr@gmail.com>
Co-authored-by: awebber <awebber@awebbers-mbp.home>

* feat: add design system documentation (#625)

* feat: add design system documentation

* docs: merge design system into introduction

---------

Co-authored-by: mmirca <marius.mirca@capgemini.com>

* fix: removing unnecessary div from error message (#636)

* fix: removing unnecessary div from error message

* feat: adding visually span for screen readers

* feat: adding visually span for screen readers - unit test update

* fix: using p for visually hidden text only

* fix: resolving PR comments

* fix: adding hiddenTextError

* fix: removing the default 0 tabIndex (#641)

* Prepare documentation and contribution for v.1.0.0 (#642)

* feat: update changelog and contrib
---------

Co-authored-by: Isaac Babalola <info@isaacbabalola.co.uk>

* adds close on blur and moves position of hidden hint text (#643)

* adds close on blur and moves position of hidden hint text

---------

Co-authored-by: awebber <awebber@awebbers-mbp.home>

* updates changelog links (#645)

Co-authored-by: awebber <awebber@awebbers-mbp.home>

* Feature/revert close on blur (#647)

* reverts the autocomplete close on blur

---------

Co-authored-by: awebber <awebber@awebbers-mbp.home>

* fix: removing name as a substitute aria label (#651)

* fix: removing name as a substitute aria label

* chore: updating changelog

* adds better checks to close the options on blur (#648)

* adds better checks to close the options on blur

---------

Co-authored-by: awebber <awebber@awebbers-mbp.home>

* feat: adding visually hidden text to button for screen readers (#653)

* feat: adding visually hidden text to button for screen readers

* chore: amending change log

* feat: add video on storybook doc (#654)

* feat: upgrade storybook

---------

Co-authored-by: cg-mmirca <92944005+cg-mmirca@users.noreply.github.com>
Co-authored-by: Yasemin <74928622+ybayraktutan@users.noreply.github.com>
Co-authored-by: alexwbbr <alexwbbr@gmail.com>
Co-authored-by: awebber <awebber@awebbers-mbp.home>
Co-authored-by: shivammuttoo <shivammuttoo@yahoo.co.in>
Co-authored-by: JadhavJeet <100856152+JadhavJeet@users.noreply.github.com>
Co-authored-by: mmirca <marius.mirca@capgemini.com>
Co-authored-by: jgonza16 <93665374+jgonza16@users.noreply.github.com>
Co-authored-by: Alaa Eddine <70238665+AlaaEddine20@users.noreply.github.com>
Co-authored-by: El Moudden <alaa.elmoudden@capgemini.com>
Co-authored-by: ybayrakt <ybayrakt@adcs-MBP.cust.communityfibre.co.uk>
Co-authored-by: SOUNDAR-A <138137507+SOUNDAR-A@users.noreply.github.com>
Co-authored-by: Jeet Jadhav <jeet.d.jadhav@capgemini.com>
Co-authored-by: Berhane Yohannes <42332389+byohannes@users.noreply.github.com>
Co-authored-by: Berhane Yohannes <berhane.yohannes@capgemini.com>
Co-authored-by: Ahmet <45479018+Ahmet-K@users.noreply.github.com>
Co-authored-by: Joseph Oldfield <48091537+josepholdfield@users.noreply.github.com>
Co-authored-by: Malcolm Young <428782+malcomio@users.noreply.github.com>
Co-authored-by: Aranzazu Vázquez Moreno <148540415+AranzazuVM@users.noreply.github.com>
Co-authored-by: U01A6369 <javier.gonzalez-moya@capgemini.com>
Co-authored-by: Isaac Babalola <Ibabalola@users.noreply.github.com>
Co-authored-by: mmirca <39212297+mmirca@users.noreply.github.com>
Co-authored-by: Isaac Babalola <info@isaacbabalola.co.uk>
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.

Error <div /> rendered in formInput without no error

6 participants