DP-1795 a11y Alert Elements changes #358

ygannett · 2017-03-06T16:54:14Z

DP-1854

Note: Please inquire of @mrossi113 this item. Her change is in my PR because it happened to be in the template I'd been working on.

Add tabindex="0" to .ma__emergency-alert container.

DP-1874

Add semantics to the alert section.

Alert Heading

<div class="ma__emergency-header"> is replaced with <h2> to accommodate the alert type addressed in .ma__emergency-header__label as a part of the header.

Ensure the icon is invisible to AT by wrapping it with <span aria-hidden="true" role="presentation">.

It was suggested to add title to the icon to replace <span>Emergency Alerts</span>, but took this approach to allow the icon for other use just in case if such needs arise in the future.

Alert Message

Create the semantics between the alert message and its contained link by replacing <div> container with <p>.

To maintain valid HTML, all nested <div>s inside the <p class="ma__emergency-alert"> are replaced with <span>s.

CSS changes

To maintain the same visual as the original code's, some adjustment was added to related styles. The affected styles are all emergency alert specific ones, wouldn't affect other part of the page elements.

Outcome with This PR

No visual changes.
HTML output

<section class="ma__emergency-alerts js-accordion js-emergency-alerts" data-id="1488812019">
  <div class="ma__emergency-alerts__header">
    <div class="ma__emergency-alerts__container">
      <h2 class="ma__emergency-header">
        <div class="ma__emergency-header__label">
            <svg aria-hidden="true" id="SvgjsSvg1000" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="48" height="44" viewBox="0 0 48 44"><defs id="SvgjsDefs1001"/><path id="SvgjsPath1007" d="..."/></svg>   
          <span>Emergency Alerts</span>
        </div>
        <div class="ma__emergency-header__title">emergency alert headline 2</div>
      </h2>
      <div class="ma__emergency-alerts__header-interface js-accordion-link">
        <button class="ma__button-alert">
          <span class="ma__button-alert__hide">hide</span>
          <span class="ma__button-alert__show">show</span> alerts
        </button>
      </div>
    </div>
  </div>

  <div class="ma__emergency-alerts__content js-accordion-content" style="display: none;">
    <div class="ma__emergency-alerts__container">
      <p class="ma__emergency-alert" tabindex="0">
        <span class="ma__emergency-alert__message">emergency alert message <span class="ma__emergency-alert__time-stamp">03.06.17, 9:53 am</span></span>
        <span class="ma__emergency-alert__link">
          <a class="ma__content-link ma__content-link--chevron" href="/alerts#13613"><span>more</span></a>
        </span>
      </p>
      <p class="ma__emergency-alert" tabindex="0">
        <span class="ma__emergency-alert__message">emergency alert message2 <span class="ma__emergency-alert__time-stamp">03.06.17, 9:53 am</span></span>
        <span class="ma__emergency-alert__link">
          <a class="ma__content-link ma__content-link--chevron" href="/alerts#13614"><span>see more</span></a>
        </span>
      </p>
    </div>
  </div>
  <div class="ma__emergency-alerts__interface js-accordion-link">
    <button class="ma__button-alert">
      <span class="ma__button-alert__hide">hide</span>
      <span class="ma__button-alert__show">show</span> alerts
    </button>
  </div>
</section>

Testing

Check for above code in HTML
The visual maintains the current one. See the screenshots.
Screen readers should
- announce the alert label text as a part of the alert title, "emergency alerts emergency alert headline 2",
- recognize the link within <p class="ma__emergency-alert"> is associated with the alert message.

mrossi113 · 2017-03-06T17:27:07Z

Testing-DP-1854

Type in URL http://localhost:3000/?p=organisms-emergency-alerts
Than tab until user come to "show alert" click return to show the alerts the focus should stay on "hide alerts"
Next time the user tabs it should go to "MassPort is operating..." and through each message alert.

legostud

This first obvious issue I see is that the styling for this no longer correct. Desktop is too tall, icon has grown in size, and as you shrink the width of the browser the items no longer wrap correctly.

When making changes to html, please, always compare the styling between your local:
localhost:3000/?p=organisms-emergency-alerts
and prod:
http://mayflower.digital.mass.gov/?p=organisms-emergency-alerts

legostud · 2017-03-06T18:12:55Z

styleguide/source/_patterns/02-molecules/emergency-header.twig

  <div class="ma__emergency-header__label">
-    {% include "@atoms/05-icons/svg-alert.twig" %}
+    <span aria-hidden="true" role="presentation">{% include "@atoms/05-icons/svg-alert.twig" %}</span>


this isn't needed. All svg icons already have aria-hidden on the SVG element. We determined this to be the more common use case for icons.

Also adding a layer of nesting broken the CSS on the icon (it's too large)

.ma__emergency-header__label > svg {
height: 32px;
width: 36px;
}

Will remove the span.

legostud · 2017-03-06T18:15:11Z

styleguide/source/_patterns/02-molecules/emergency-alert.twig

-  <div class="ma__emergency-alert__link">
+<p class="ma__emergency-alert" tabindex="0">
+  <span class="ma__emergency-alert__message">{{ emergencyAlert.message }} <span class="ma__emergency-alert__time-stamp">{{ emergencyAlert.timeStamp }}</span></span>
+  <span class="ma__emergency-alert__link">


This is technically correct in that you are just replacing the div with a span. Looking beyond that, it appears that the if statement was placed in the wrong spot originally. The "ma__emergency-alert__link" span tags should be inside the if statement to prevent rendering and empty span tag.

The if statement for the link has been moved outside to wrap <span class="ma__emergency-alert__link"> to prevent empty <span>.

legostud · 2017-03-06T18:40:09Z

styleguide/source/assets/scss/02-molecules/_emergency-header.scss

@@ -1,3 +1,8 @@
+h2.ma__emergency-header {


using h2. isn't necessary or desired. This adds an extra layer of specificity that doesn't appear to be needed.

Will remove this section.

legostud · 2017-03-06T18:44:32Z

styleguide/source/assets/scss/02-molecules/_emergency-header.scss

+  font-size: 1.375rem;
+  line-height: 1.5em;
+}
+


Using inherit would probably be better than setting this, but I could go either way.
font-size: inherit;
line-height: inherit;

you also need to add margin: 0; to this to correct the styling.

These styles are added to .ma__emergency-header.

There are still styling issues. Maybe I confused things with the above comment "correct the styling" that was just to fix the header. let me know if you would like some help fixing the other styling issues.

powpow12 · 2017-03-08T14:12:13Z

@ygannett I am running into a local bug with my mayflower implementation so I cannot troubleshoot the code well but I do see some visual differences.

Align to the left
Missing button
Alerts accordion starts opened

isaacchansky · 2017-03-08T20:34:16Z

I'm not seeing any visual difference between the local build & the mayflower.digital.mass version (see gif of me switching between local & mayflower.digital.mass version)

@legostud are you still noticing differences?

legostud · 2017-03-09T14:03:19Z

It looks fine to me now.

legostud · 2017-03-09T14:04:21Z

This Pull Request still says WIP, but I think it's okay to merge.

ygannett · 2017-03-09T14:39:07Z

Thank you all for your help. I just removed the WIP label.

ygannett added 3 commits February 21, 2017 15:28

change for DP-1874 Item2

13807ca

change for DP-1874 Item 1

8b0ac4f

change for DP-1854

5dac5b0

ygannett added enhancement WIP - Do Not Merge labels Mar 6, 2017

ygannett assigned mrossi113 Mar 6, 2017

mrossi113 assigned powpow12 and unassigned mrossi113 Mar 6, 2017

legostud suggested changes Mar 6, 2017

View reviewed changes

modifications for the alert title, the condition for the link.

46bd7d0

isaacchansky self-requested a review March 8, 2017 20:28

isaacchansky approved these changes Mar 8, 2017

View reviewed changes

legostud approved these changes Mar 9, 2017

View reviewed changes

ygannett removed the WIP - Do Not Merge label Mar 9, 2017

legostud merged commit cfbe068 into dev Mar 9, 2017

ygannett deleted the a11y_alert_changes branch April 7, 2017 16:45

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

DP-1795 a11y Alert Elements changes #358

DP-1795 a11y Alert Elements changes #358

ygannett commented Mar 6, 2017 •

edited

Loading

mrossi113 commented Mar 6, 2017

legostud left a comment

legostud Mar 6, 2017

legostud Mar 6, 2017

ygannett Mar 7, 2017

legostud Mar 6, 2017

ygannett Mar 7, 2017

legostud Mar 6, 2017

ygannett Mar 7, 2017

legostud Mar 6, 2017

ygannett Mar 7, 2017

legostud Mar 7, 2017 •

edited

Loading

powpow12 commented Mar 8, 2017 •

edited

Loading

isaacchansky commented Mar 8, 2017 •

edited

Loading

legostud commented Mar 9, 2017

legostud commented Mar 9, 2017

ygannett commented Mar 9, 2017

DP-1795 a11y Alert Elements changes #358

DP-1795 a11y Alert Elements changes #358

Conversation

ygannett commented Mar 6, 2017 • edited Loading

DP-1854

DP-1874

Alert Heading

Alert Message

CSS changes

Outcome with This PR

Testing

mrossi113 commented Mar 6, 2017

Testing-DP-1854

legostud left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

legostud Mar 7, 2017 • edited Loading

Choose a reason for hiding this comment

powpow12 commented Mar 8, 2017 • edited Loading

isaacchansky commented Mar 8, 2017 • edited Loading

legostud commented Mar 9, 2017

legostud commented Mar 9, 2017

ygannett commented Mar 9, 2017

ygannett commented Mar 6, 2017 •

edited

Loading

legostud Mar 7, 2017 •

edited

Loading

powpow12 commented Mar 8, 2017 •

edited

Loading

isaacchansky commented Mar 8, 2017 •

edited

Loading