From f722b72bac18c64f658c3e938f1393fcf68af102 Mon Sep 17 00:00:00 2001 From: Paul Clue <67766160+Paul-Clue@users.noreply.github.com> Date: Fri, 12 Apr 2024 13:03:32 -0500 Subject: [PATCH 1/6] redesign warning --- server/handlebars/embed/public/style.css | 267 ++++++++++++++--------- server/handlebars/embed/views/main.hbs | 2 +- 2 files changed, 159 insertions(+), 110 deletions(-) diff --git a/server/handlebars/embed/public/style.css b/server/handlebars/embed/public/style.css index 9778cd559..b72c85ce0 100644 --- a/server/handlebars/embed/public/style.css +++ b/server/handlebars/embed/public/style.css @@ -2,36 +2,36 @@ body { margin: 0; /* Parent should use the posted message and set an explicit height */ overflow: hidden; -} - -#main { + } + + #main { width: 100%; -} - -a { + } + + a { color: #036; -} -a:focus-visible { + } + a:focus-visible { outline: 2px solid #3a86d1; -} - -h3#report-title { + } + + h3#report-title { margin-top: 0; margin-bottom: 0.5rem; - + font-family: Arial, Helvetica, sans-serif; font-size: 18px; -} - -#copied-message { + } + + #copied-message { align-self: center; -} - -#at-version { + } + + #at-version { font-weight: lighter; -} - -#no-data-content-container { + } + + #no-data-content-container { border-left: 1.5px solid #c0c0c0; border-right: 1.5px solid #c0c0c0; border-bottom: 1.5px solid #c0c0c0; @@ -41,45 +41,77 @@ h3#report-title { font-size: 14px; margin-bottom: 1em; text-align: center; -} - -#embed-report-phase-container { + } + + #embed-report-phase-container { margin-bottom: 1em; -} -#embed-report-phase-container summary:focus-visible { + } + #embed-report-phase-container summary:focus-visible { outline-offset: -2px; outline: 2px solid #3a86d1; -} - -#candidate-title { - border: 1.5px solid #ffc4a2; + } + + #embed-report-phase-container summary::after { + width: 30px; + height: 30px; + border-radius: 3px; + display: block; + content: ''; + background-position: center center; + background-repeat: no-repeat; + position: absolute; + right: 0.5em; + top: 0.5em; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6.861' viewBox='0 0 12 6.861'%3E%3Cpath id='Icon_ionic-ios-arrow-down' data-name='Icon ionic-ios-arrow-down' d='M12.19,16.039,16.727,11.5a.854.854,0,0,1,1.211,0,.865.865,0,0,1,0,1.215L12.8,17.858a.856.856,0,0,1-1.183.025L6.438,12.717A.858.858,0,1,1,7.649,11.5Z' transform='translate(18.188 18.108) rotate(180)' fill='%2360470c'/%3E%3C/svg%3E%0A"); + background-color: #fce1a4; + transform: rotate(180deg); + } + + #embed-report-phase-container[open] summary::after { + transform: rotate(0deg); + } + + /* section: CANDIDATE WARNING STYLING */ + summary { + display: block; + } + + #candidate-title { + background-color: #fdefce; + border: 1.5px solid #fce1a4; border-top-left-radius: 3px; border-top-right-radius: 3px; - background-color: #ffd8c1; padding: 0.5em 0.5em 0.5em 1em; cursor: pointer; -} - -#candidate-title > span { + --space-between-elements: 1em; + --left-right-padding: 55px; + } + + #candidate-title > * { + padding-left: var(--left-right-padding); + padding-right: var(--left-right-padding); + } + + #candidate-title > span > span { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: white; - background-color: #c25401; + background-color: #d9ae4e; padding: 8px 14px; border-radius: 15px; display: inline-block; -} - -#candidate-title.recommended { + } + + #candidate-title.recommended { border: 1.5px solid #7ac498; background-color: #e9fbe9; -} -#candidate-title.recommended > span { + } + #candidate-title.recommended > span { background-color: #115b11; -} - -#candidate-content-container { + } + + #candidate-content-container { border-left: 1.5px solid #c0c0c0; border-right: 1.5px solid #c0c0c0; border-bottom: 1.5px solid #c0c0c0; @@ -88,58 +120,74 @@ h3#report-title { padding: 1em 0.5em 0.5em 1em; font-family: Arial, Helvetica, sans-serif; font-size: 14px; -} - -#candidate-content-container > ol > li:not(:last-child) { + color: #60470d; + background-color: #fdefce; + border: 1.5px solid #fce1a4; + } + + #candidate-content-container > ol > li:not(:last-child) { margin-bottom: 3px; -} - -.no-data-cell { + } + + #candidate-title > ::before { + width: 32px; + height: 32px; + display: block; + content: ''; + background-position: center center; + background-repeat: no-repeat; + position: absolute; + left: 1em; + top: 0.5em; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='31' viewBox='0 0 30 31'%3E%3Cg id='Group_1' data-name='Group 1' transform='translate(-11 -292)'%3E%3Cellipse id='Ellipse_1' data-name='Ellipse 1' cx='15' cy='15.5' rx='15' ry='15.5' transform='translate(11 292)' fill='%23d9ae4d'/%3E%3Cpath id='Path_3' data-name='Path 3' d='M4.524-17.368a4.507,4.507,0,0,0-1.56.312.278.278,0,0,0-.13.286V-14.9c0,2.184.416,8.294.468,9.022a.172.172,0,0,0,.182.156h2.08c.156,0,.182-.078.182-.156.078-.78.52-6.916.52-9.1v-1.872a.326.326,0,0,0-.156-.286A5.112,5.112,0,0,0,4.524-17.368Zm0,17.576A1.7,1.7,0,0,0,6.4-1.534,1.741,1.741,0,0,0,4.524-3.328,1.77,1.77,0,0,0,2.652-1.534,1.7,1.7,0,0,0,4.524.208Z' transform='translate(22 316)' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A"); + } + + .no-data-cell { display: block; color: #72777f; font-style: italic; text-align: center; -} - -.responsive-table { + } + + .responsive-table { overflow-x: auto; width: 100%; margin-bottom: 1em; -} - -table { + } + + table { border-collapse: collapse; border-top: 1.5px solid #c0c0c0; width: 100%; -} - -table td, -th { + } + + table td, + th { padding: 1rem; border: 1.5px solid #c0c0c0; -} - -th, -td { + } + + th, + td { font-family: Arial, Helvetica, sans-serif; padding: 15px; border: 1.5px solid #c0c0c0; -} - -th { + } + + th { background-color: #f2f2f2; -} - -table tbody tr th { + } + + table tbody tr th { text-align: left; -} - -table tbody tr td { + } + + table tbody tr td { padding: 20px; text-align: center; -} - -.meter { + } + + .meter { box-sizing: content-box; height: 15px; /* Can be anything */ position: relative; @@ -147,18 +195,18 @@ table tbody tr td { border-radius: 25px; margin-bottom: 10px; overflow: hidden; -} - -.meter > span { + } + + .meter > span { display: block; height: 100%; float: left; background-color: #175a6a; border-radius: 25px; position: relative; -} - -.button { + } + + .button { border: none; padding: 10px 20px; font-family: Arial, Helvetica, sans-serif; @@ -167,56 +215,57 @@ table tbody tr td { cursor: pointer; border-radius: 3px; border: 3px solid #175a6a; -} - -#view-report-button { + } + + #view-report-button { color: white; background-color: #175a6a; margin-right: 6px; -} -#view-report-button:hover { + } + #view-report-button:hover { background-color: #024e5c; border-color: #024e5c; -} -#view-report-button:focus-visible { + } + #view-report-button:focus-visible { margin-left: 4px; padding: 0 8px 0 12px; -} -#embed-button { + } + #embed-button { color: #175a6a; background-color: white; margin-left: 4px; -} -#embed-button:hover { + } + #embed-button:hover { background-color: #f4f4f4; -} - -#view-report-button, -#embed-button { + } + + #view-report-button, + #embed-button { margin-bottom: 1em; padding: 0 12px; line-height: 36px; -} -#view-report-button:focus-visible, -#embed-button:focus-visible { + } + #view-report-button:focus-visible, + #embed-button:focus-visible { outline-offset: 2px; outline: 2px solid #3a86d1; -} -#view-report-button svg, -#embed-button svg { + } + #view-report-button svg, + #embed-button svg { width: 24px; margin-right: 8px; float: left; position: relative; top: 6px; -} - -#embed-button-wrap { + } + + #embed-button-wrap { display: inline-block; -} - -#copied-message { + } + + #copied-message { font-family: Arial, Helvetica, sans-serif; margin: 5px; display: inline-block; -} + } + \ No newline at end of file diff --git a/server/handlebars/embed/views/main.hbs b/server/handlebars/embed/views/main.hbs index ca8459d4c..53d66b361 100644 --- a/server/handlebars/embed/views/main.hbs +++ b/server/handlebars/embed/views/main.hbs @@ -9,7 +9,7 @@ {{#unless dataEmpty}} {{#if (isCandidate phase)}}
- Warning! Unapproved Report + Warning! Unapproved Report
The information in this report is generated from candidate tests developed and run by the ARIA-AT Project. Candidate ARIA-AT tests are in review by assistive technology developers and lack consensus regarding: From 629f7e3852e6d0839e03ff2c9a86808bf7b5fb36 Mon Sep 17 00:00:00 2001 From: Paul Clue <67766160+Paul-Clue@users.noreply.github.com> Date: Thu, 25 Apr 2024 11:10:57 -0500 Subject: [PATCH 2/6] Fix position and semantics --- server/handlebars/embed/public/style.css | 12 ++++++++---- server/handlebars/embed/views/main.hbs | 2 +- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/server/handlebars/embed/public/style.css b/server/handlebars/embed/public/style.css index b72c85ce0..df3b7ecb3 100644 --- a/server/handlebars/embed/public/style.css +++ b/server/handlebars/embed/public/style.css @@ -87,12 +87,16 @@ body { --left-right-padding: 55px; } - #candidate-title > * { + /* #candidate-title > * { + padding-left: var(--left-right-padding); + padding-right: var(--left-right-padding); + } */ + #candidate-title > span { padding-left: var(--left-right-padding); padding-right: var(--left-right-padding); } - #candidate-title > span > span { + #candidate-title > span > h1 { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; @@ -137,8 +141,8 @@ body { background-position: center center; background-repeat: no-repeat; position: absolute; - left: 1em; - top: 0.5em; + left: 2em; + top: 1em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='31' viewBox='0 0 30 31'%3E%3Cg id='Group_1' data-name='Group 1' transform='translate(-11 -292)'%3E%3Cellipse id='Ellipse_1' data-name='Ellipse 1' cx='15' cy='15.5' rx='15' ry='15.5' transform='translate(11 292)' fill='%23d9ae4d'/%3E%3Cpath id='Path_3' data-name='Path 3' d='M4.524-17.368a4.507,4.507,0,0,0-1.56.312.278.278,0,0,0-.13.286V-14.9c0,2.184.416,8.294.468,9.022a.172.172,0,0,0,.182.156h2.08c.156,0,.182-.078.182-.156.078-.78.52-6.916.52-9.1v-1.872a.326.326,0,0,0-.156-.286A5.112,5.112,0,0,0,4.524-17.368Zm0,17.576A1.7,1.7,0,0,0,6.4-1.534,1.741,1.741,0,0,0,4.524-3.328,1.77,1.77,0,0,0,2.652-1.534,1.7,1.7,0,0,0,4.524.208Z' transform='translate(22 316)' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A"); } diff --git a/server/handlebars/embed/views/main.hbs b/server/handlebars/embed/views/main.hbs index 53d66b361..7483f7270 100644 --- a/server/handlebars/embed/views/main.hbs +++ b/server/handlebars/embed/views/main.hbs @@ -9,7 +9,7 @@ {{#unless dataEmpty}} {{#if (isCandidate phase)}}
- Warning! Unapproved Report +

Warning! Unapproved Report
The information in this report is generated from candidate tests developed and run by the ARIA-AT Project. Candidate ARIA-AT tests are in review by assistive technology developers and lack consensus regarding: From df1e9bccba2fa669b18cab2144c36e454fc56202 Mon Sep 17 00:00:00 2001 From: Paul Clue <67766160+Paul-Clue@users.noreply.github.com> Date: Thu, 25 Apr 2024 16:23:20 -0500 Subject: [PATCH 3/6] FIx header level --- server/handlebars/embed/public/style.css | 2 +- server/handlebars/embed/views/main.hbs | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/server/handlebars/embed/public/style.css b/server/handlebars/embed/public/style.css index df3b7ecb3..25e0ea19a 100644 --- a/server/handlebars/embed/public/style.css +++ b/server/handlebars/embed/public/style.css @@ -96,7 +96,7 @@ body { padding-right: var(--left-right-padding); } - #candidate-title > span > h1 { + #candidate-title > span > h4 { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; diff --git a/server/handlebars/embed/views/main.hbs b/server/handlebars/embed/views/main.hbs index 7483f7270..932bb6ba2 100644 --- a/server/handlebars/embed/views/main.hbs +++ b/server/handlebars/embed/views/main.hbs @@ -9,7 +9,7 @@ {{#unless dataEmpty}} {{#if (isCandidate phase)}}
-

Warning! Unapproved Report

 +

Warning! Unapproved Report
The information in this report is generated from candidate tests developed and run by the ARIA-AT Project. Candidate ARIA-AT tests are in review by assistive technology developers and lack consensus regarding: From 836cce802d580b00a85be292f58830275d4ed76f Mon Sep 17 00:00:00 2001 From: Paul Clue <67766160+Paul-Clue@users.noreply.github.com> Date: Mon, 29 Apr 2024 10:37:34 -0500 Subject: [PATCH 4/6] Fix position and heading level --- server/handlebars/embed/public/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/server/handlebars/embed/public/style.css b/server/handlebars/embed/public/style.css index 25e0ea19a..d657ae552 100644 --- a/server/handlebars/embed/public/style.css +++ b/server/handlebars/embed/public/style.css @@ -142,7 +142,7 @@ body { background-repeat: no-repeat; position: absolute; left: 2em; - top: 1em; + top: 1.5em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='31' viewBox='0 0 30 31'%3E%3Cg id='Group_1' data-name='Group 1' transform='translate(-11 -292)'%3E%3Cellipse id='Ellipse_1' data-name='Ellipse 1' cx='15' cy='15.5' rx='15' ry='15.5' transform='translate(11 292)' fill='%23d9ae4d'/%3E%3Cpath id='Path_3' data-name='Path 3' d='M4.524-17.368a4.507,4.507,0,0,0-1.56.312.278.278,0,0,0-.13.286V-14.9c0,2.184.416,8.294.468,9.022a.172.172,0,0,0,.182.156h2.08c.156,0,.182-.078.182-.156.078-.78.52-6.916.52-9.1v-1.872a.326.326,0,0,0-.156-.286A5.112,5.112,0,0,0,4.524-17.368Zm0,17.576A1.7,1.7,0,0,0,6.4-1.534,1.741,1.741,0,0,0,4.524-3.328,1.77,1.77,0,0,0,2.652-1.534,1.7,1.7,0,0,0,4.524.208Z' transform='translate(22 316)' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A"); } From f781b6f2e27e853d95b92e2e33ce1012cfd60188 Mon Sep 17 00:00:00 2001 From: Paul Clue <67766160+Paul-Clue@users.noreply.github.com> Date: Wed, 1 May 2024 09:13:37 -0500 Subject: [PATCH 5/6] Align warning arrow --- server/handlebars/embed/public/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/server/handlebars/embed/public/style.css b/server/handlebars/embed/public/style.css index d657ae552..258d8167b 100644 --- a/server/handlebars/embed/public/style.css +++ b/server/handlebars/embed/public/style.css @@ -61,7 +61,7 @@ body { background-repeat: no-repeat; position: absolute; right: 0.5em; - top: 0.5em; + top: 1.5em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6.861' viewBox='0 0 12 6.861'%3E%3Cpath id='Icon_ionic-ios-arrow-down' data-name='Icon ionic-ios-arrow-down' d='M12.19,16.039,16.727,11.5a.854.854,0,0,1,1.211,0,.865.865,0,0,1,0,1.215L12.8,17.858a.856.856,0,0,1-1.183.025L6.438,12.717A.858.858,0,1,1,7.649,11.5Z' transform='translate(18.188 18.108) rotate(180)' fill='%2360470c'/%3E%3C/svg%3E%0A"); background-color: #fce1a4; transform: rotate(180deg); From 7586e1af07c2af18ee4f497750631b37d321c966 Mon Sep 17 00:00:00 2001 From: Paul Clue <67766160+Paul-Clue@users.noreply.github.com> Date: Thu, 2 May 2024 14:20:07 -0500 Subject: [PATCH 6/6] Fix warning positioning, font, and color --- server/handlebars/embed/public/style.css | 35 ++++++++++-------------- 1 file changed, 14 insertions(+), 21 deletions(-) diff --git a/server/handlebars/embed/public/style.css b/server/handlebars/embed/public/style.css index 258d8167b..02117c5b6 100644 --- a/server/handlebars/embed/public/style.css +++ b/server/handlebars/embed/public/style.css @@ -1,3 +1,5 @@ +@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,300;0,600;0,800;1,700&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Roboto:wght@100;400&display=swap'); + body { margin: 0; /* Parent should use the posted message and set an explicit height */ @@ -77,7 +79,7 @@ body { } #candidate-title { - background-color: #fdefce; + background-color:#fcebc3; border: 1.5px solid #fce1a4; border-top-left-radius: 3px; border-top-right-radius: 3px; @@ -87,23 +89,16 @@ body { --left-right-padding: 55px; } - /* #candidate-title > * { - padding-left: var(--left-right-padding); - padding-right: var(--left-right-padding); - } */ #candidate-title > span { + position: relative; padding-left: var(--left-right-padding); padding-right: var(--left-right-padding); } #candidate-title > span > h4 { font-family: Arial, Helvetica, sans-serif; - font-size: 12px; - font-weight: bold; - color: white; - background-color: #d9ae4e; - padding: 8px 14px; - border-radius: 15px; + font-size: 1em; + color: #60470C; display: inline-block; } @@ -116,17 +111,16 @@ body { } #candidate-content-container { - border-left: 1.5px solid #c0c0c0; - border-right: 1.5px solid #c0c0c0; - border-bottom: 1.5px solid #c0c0c0; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; padding: 1em 0.5em 0.5em 1em; - font-family: Arial, Helvetica, sans-serif; - font-size: 14px; - color: #60470d; + font-family: Noto Sans, Trebuchet MS, Helvetica Neue, Arial, sans-serif; + font-size: 1rem; + color: #60470C; background-color: #fdefce; - border: 1.5px solid #fce1a4; + border-left: 1px solid #fce1a4; + border-right: 1px solid #fce1a4; + border-bottom: 1px solid #fce1a4; } #candidate-content-container > ol > li:not(:last-child) { @@ -138,11 +132,10 @@ body { height: 32px; display: block; content: ''; - background-position: center center; background-repeat: no-repeat; position: absolute; - left: 2em; - top: 1.5em; + left: 5px; + top: -7px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='31' viewBox='0 0 30 31'%3E%3Cg id='Group_1' data-name='Group 1' transform='translate(-11 -292)'%3E%3Cellipse id='Ellipse_1' data-name='Ellipse 1' cx='15' cy='15.5' rx='15' ry='15.5' transform='translate(11 292)' fill='%23d9ae4d'/%3E%3Cpath id='Path_3' data-name='Path 3' d='M4.524-17.368a4.507,4.507,0,0,0-1.56.312.278.278,0,0,0-.13.286V-14.9c0,2.184.416,8.294.468,9.022a.172.172,0,0,0,.182.156h2.08c.156,0,.182-.078.182-.156.078-.78.52-6.916.52-9.1v-1.872a.326.326,0,0,0-.156-.286A5.112,5.112,0,0,0,4.524-17.368Zm0,17.576A1.7,1.7,0,0,0,6.4-1.534,1.741,1.741,0,0,0,4.524-3.328,1.77,1.77,0,0,0,2.652-1.534,1.7,1.7,0,0,0,4.524.208Z' transform='translate(22 316)' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A"); }