fix(ally): Ensure buttons have discernible text (#430)

* fix(ally): Ensure buttons have discernible text * Remove margin on icon variation of input-group --------- Co-authored-by: Lauren Hitchon <[email protected]>
digitalnsw · Jul 16, 2024 · 9392c4e · 9392c4e
1 parent 5ac6951
commit 9392c4e
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/src/components/form/_form.scss b/src/components/form/_form.scss
@@ -193,6 +193,10 @@ $nsw-form-tick: '<svg fill="#ffffff" version="1.1" xmlns="http://www.w3.org/2000
         border-color: var(--nsw-grey-01);
         border-left-width: 0;
 
+        .nsw-material-icons:first-child {
+          margin-right: 0;
+        }
+
         .nsw-section--invert & {  
           color: var(--nsw-white);
           border-color: var(--nsw-white);

diff --git a/src/components/form/partials/_input-group.hbs b/src/components/form/partials/_input-group.hbs
@@ -1,5 +1,5 @@
 <div class="nsw-form__input-group{{#if icon}} nsw-form__input-group--icon{{/if}}{{#if large}} nsw-form__input-group--large{{/if}}">
   <label class="sr-only" for="{{id}}">{{label}}</label>
   <input class="nsw-form__input" type="text" id="{{id}}" name="{{id}}" value="{{value}}"{{#if predictive}} aria-autocomplete="list" autocomplete="off"{{/if}}>
-  <button class="nsw-button {{#if white}}nsw-button--white{{else}}nsw-button--dark{{/if}} nsw-button--flex" type="submit">{{#if icon}}<span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">{{icon}}</span>{{else}}{{label}}{{/if}}</button>
+  <button class="nsw-button {{#if white}}nsw-button--white{{else}}nsw-button--dark{{/if}} nsw-button--flex" type="submit">{{#if icon}}<span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">{{icon}}</span><span class="sr-only">{{label}}</span>{{else}}{{label}}{{/if}}</button>
 </div>