Skip to content

Commit

Permalink
Merge branch 'main' into a11y/disclosure-menu-pattern
Browse files Browse the repository at this point in the history
  • Loading branch information
@whabanks
whabanks authored Apr 30, 2024
2 parents 8ab6caa + 1eec27f commit 211c569
Show file tree
Hide file tree
Showing 10 changed files with 146 additions and 164 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/test_endpoints.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ jobs:
echo "PYTHONPATH=/github/workspace/env/site-packages:${{ env.PYTHONPATH}}" >> $GITHUB_ENV
- name: Checks for new endpoints against AWS WAF rules
uses: cds-snc/notification-utils/.github/actions/waffles@2da74685e0ffb220f0403e1f2584e783be99bbad # 52.1.0
uses: cds-snc/notification-utils/.github/actions/waffles@0146718a423b0144566392ab3082d15779f4a73f # 52.5.0
with:
app-loc: '/github/workspace'
app-libs: '/github/workspace/env/site-packages'
Expand Down
2 changes: 1 addition & 1 deletion app/assets/stylesheets/index.css
View file

Large diffs are not rendered by default.

117 changes: 33 additions & 84 deletions app/assets/stylesheets/tailwind/components/placeholder.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,37 +2,53 @@
/*! purgecss start ignore */
.placeholder,
.placeholder-no-brackets,
.placeholder-conditional .condition {
.placeholder-conditional {
word-wrap: break-word;
border-radius: 20px;
box-shadow:
inset 0.47em 0 0 0 var(--message-wrapper-bg, #fff),
inset var(--right-offset, -0.47em) 0 0 0 var(--message-wrapper-bg, #fff),
inset 0 -0.15em 0 0 var(--message-wrapper-bg, #fff),
inset 0 0.15em 0 0 var(--message-wrapper-bg, #fff);
inset 0.47em 0 0 0 #fff,
inset -0.47em 0 0 0 #fff,
inset 0 -0.15em 0 0 #fff,
inset 0 0.15em 0 0 #fff;
@apply inline bg-yellow text-black break-words;
}
.sms-message-wrapper {
.sms-message-wrapper .placeholder,
.sms-message-wrapper .placeholder-no-brackets {
/* theme gray.button */
--message-wrapper-bg: #dee0e2;
box-shadow:
inset 0.47em 0 0 0 #dee0e2,
inset -0.47em 0 0 0 #dee0e2,
inset 0 -0.18em 0 0 #dee0e2,
inset 0 0.18em 0 0 #dee0e2;
}

.placeholder-no-brackets {
padding-left: 3px;
padding-right: 3px;
border-radius: 1px;
box-shadow:
inset 0 -0.1em 0 0 var(--message-wrapper-bg, #fff),
inset 0 0.1em 0 0 var(--message-wrapper-bg, #fff);
inset 0 -0.1em 0 0 #fff,
inset 0 0.1em 0 0 #fff;
}

.placeholder-conditional .condition {
.placeholder-conditional {
@apply rounded-none;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
--right-offset: -0.89em;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
box-shadow:
inset 0.47em 0 0 0 #fff,
inset -0.89em 0 0 0 #fff,
inset 0 -0.16em 0 0 #fff,
inset 0 0.16em 0 0 #fff;
}
.sms-message-wrapper .placeholder-conditional {
box-shadow:
inset 0.47em 0 0 0 #dee0e2,
inset -0.89em 0 0 0 #dee0e2,
inset 0 -0.18em 0 0 #dee0e2,
inset 0 0.18em 0 0 #dee0e2;
}

.placeholder-redacted {
Expand All @@ -41,85 +57,18 @@
opacity: 0.8;
top: 0.1em;
background-color: currentColor;
box-shadow: inset 0 -0.35em 0 0 var(--message-wrapper-bg, #fff);
box-shadow: inset 0 -0.35em 0 0 #fff;
@apply py-0 relative;
}
.sms-message-wrapper .placeholder-redacted {
box-shadow: inset 0 -0.35em 0 0 #dee0e2;
}

*:focus + p .sms-message-wrapper .placeholder-redacted {
/* theme yellow */
box-shadow: inset 0 -0.35em 0 0 #ffbf47;
}

/* Makes the content before and after MARK only audible to screen readers */
mark {
/* remove default styles for MARK element */
background: none;
}
mark::before,
mark::after,
mark .condition::before,
mark .condition::after {
clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}

/* PLACEHOLDER TYPES */
[lang*="en"] mark.placeholder {
--name: "custom content";
}
[lang*="en"] mark.placeholder-conditional {
--name: "filtered content";
}
[lang*="en"] mark.placeholder-redacted {
--name: "redacted content";
}

[lang="fr"] mark.placeholder {
--name: "contenu personnalisé";
}
[lang="fr"] mark.placeholder-conditional {
--name: "contenu filtré";
}
[lang="fr"] mark.placeholder-redacted {
--name: "contenu rédigé";
}

/* BEGINS or ENDS */
/* the `;` Ensures a pause on JAWS, NVDA and VO */
[lang*="en"] mark[class*="placeholder"]::before {
content: "; " var(--name) " begins; ";
}
[lang*="en"] mark[class*="placeholder"]::after {
content: "; " var(--name) " ends; ";
}

[lang="fr"] mark[class*="placeholder"]::before {
content: "; début du " var(--name) "; ";
}
[lang="fr"] mark[class*="placeholder"]::after {
content: "; fin du " var(--name) "; ";
}

/* IF...THEN */
[lang*="en"] mark.placeholder-conditional .condition::before {
content: "; if; ";
}
[lang*="en"] mark.placeholder-conditional .condition::after {
content: "; then; ";
}

[lang="fr"] mark.placeholder-conditional .condition::before {
content: "; si; ";
}
[lang="fr"] mark.placeholder-conditional .condition::after {
content: "; alors; ";
}

.autocomplete__input {
z-index: 5;
}
Expand Down
44 changes: 27 additions & 17 deletions app/templates/components/table.html
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
{% from "components/big-number.html" import big_number %}

{% macro mapping_table(caption='', field_headings=[], field_headings_visible=True, caption_visible=True, equal_length=False) -%}
{% macro mapping_table(caption='', field_headings=[], field_headings_visible=True, caption_visible=True, equal_length=False, font_size="table-font-xsmall") -%}
<section class="scrollable-table" tabindex="0">
<table class="table table-font-xsmall">
<caption class="heading-medium table-heading{{ ' visuallyhidden' if not caption_visible}}">
{{ caption }}
</caption>
<table class="table {{fontsize}}">
<caption class="heading-medium table-heading{{ ' visuallyhidden' if not caption_visible }}">
{{ caption }}
</caption>
{% if field_headings | length > 0 %}
<thead class="table-field-headings{% if field_headings_visible %}-visible{% endif %}">
<tr>
{% for field_heading in field_headings %}
{% if field_heading == '' %}
{% if field_heading == '' %}
<td class="table-field-index"></td>
{% else %}
{% else %}
<th scope="col" class="table-field-heading{% if loop.first and not equal_length %}-first{% endif %}{% if not field_headings_visible %} border-0{% endif %}" {% if equal_length %}{{ 'style=\"width: {0}%\"'.format((100 / field_headings|length)|int)|safe }}{% endif %}>
{% if field_headings_visible %}
{{ field_heading }}
Expand All @@ -23,6 +24,7 @@
{% endfor %}
</tr>
</thead>
{% endif %}
<tbody>
{{ caller() }}
</tbody>
Expand Down Expand Up @@ -50,8 +52,8 @@

{%- endmacro %}

{% macro row(id=None) -%}
<tr class="table-row" {% if id and id is string %}id="cds{{id}}"{% endif %}>
{% macro row(id=None, classes=None) -%}
<tr class="table-row {{ classes if classes }}" {% if id and id is string %}id="cds{{id}}"{% endif %}>
{{ caller() }}
</tr>
{%- endmacro %}
Expand All @@ -71,12 +73,12 @@
{% endif %}
{%- endmacro %}

{% macro field(align='left', status='', border=True) -%}
{% macro field(align='left', status='', cell_width=None, border=True) -%}

{% set field_alignment = 'table-field-right-aligned' if align == 'right' else 'table-field-left-aligned' %}
{% set border = '' if border else 'table-field-noborder' %}

<td class="{{ [field_alignment, border]|join(' ') }}">
<td class="{{ [field_alignment, border]|join(' ')}}{{ cell_width if cell_width }}">
{% if status %}
<div class="{{ 'table-field-status-' + status }}">{{ caller() }}</div>
{% else %}
Expand All @@ -85,8 +87,8 @@
</td>
{%- endmacro %}

{% macro row_heading() -%}
<th class="table-field" scope="row">
{% macro row_heading(cell_width=None) -%}
<th class="table-field {{ cell_width if cell_width}}" scope="row">
{{ caller() }}
</th>
{%- endmacro %}
Expand All @@ -97,8 +99,8 @@
</td>
{%- endmacro %}

{% macro text_field(text, status='', truncate=false) -%}
{% call field(status=status) %}
{% macro text_field(text, status='', truncate=false, date_format=None, cell_width=None) -%}
{% call field(status=status, cell_width=cell_width) %}
{% if text is iterable and text is not string %}
<ul>
{% for item in text %}
Expand All @@ -109,9 +111,17 @@
</ul>
{% else %}
{% if truncate %}
<div class="truncate-text">{{text}}</div>
{% if date_format %}
<time class="truncate-text {{date_format if date_format}}">{{text}}</time>
{% else %}
<div class="truncate-text {{date_format if date_format}}">{{text}}</div>
{% endif %}
{% else %}
<div class="do-not-truncate-text">{{text}}</div>
{% if date_format %}
<time class="do-not-truncate-text {{date_format}}">{{text}}</time>
{% else %}
<div class="do-not-truncate-text">{{text}}</div>
{% endif %}
{% endif %}
{% endif %}
{% endcall %}
Expand Down
Loading

0 comments on commit 211c569

Please sign in to comment.