Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixes #2483. Markup fixes (SVG alternatives, invalid code, unnecessary role="button", account dropdown trigger) #2484

Merged
merged 4 commits into from
Jun 6, 2018

Conversation

patrickhlauke
Copy link
Contributor

@patrickhlauke patrickhlauke commented Jun 6, 2018

Issue #2483 - fixes incorrect/unnecessary SVG alternative text, removes invalid aria-role="hide", removes unnecessary role="button" on <button> elements, fixes up the currently broken aria on the account dropdown trigger

r? @miketaylr

…="button"

- `aria-role="hide"` is invalid/non-existent markup
- if a control already has text, it's redundant to have `<title>` and extra text for an SVG - just set it to `aria-hidden="true"` and remove any text in it
- `aria-label` on the focusable control is generally easier/better if providing a name/label to a control, rather than `<title>` inside the SVG, in cases no other text content is present
- *never* ever `aria-hidden="true"` a focusable element (as was the case with the "Close search" button)
- having `role="button"` on a `<button>` is unnecessary
- `aria-expanded` is probably more appropriate than `aria-pressed`
- make sure the aria attribute is changed on the actual `<button>`, not on the `<li>` (this could likely also be fixed by changing the `var navDropDown = ...` but I wasn't sure if there were perhaps other dependencies on that being the `<li>`
@patrickhlauke
Copy link
Contributor Author

worth noting: i did not try to compile/run the site locally, just edited the files "dry"

@TravisBuddy
Copy link

TravisBuddy commented Jun 6, 2018

Travis tests have failed

Hey @patrickhlauke,
Please read the following log in order to understand the failure reason.
It'll be awesome if you fix what's wrong and commit the changes.

1st Build

nosetests
Milestones are not initialized. Check logs.

travis_time:end:2ac19c68:start=1528280266118711862,finish=1528280266984126877,duration=865415015
npm run test:js -- --reporters="runner" --firefoxBinary=`which firefox`
> webcompat@ test:js /home/travis/build/webcompat/webcompat.com
> node ./tests/functional/_intern.js "--reporters=runner" "--firefoxBinary=/home/travis/firefox-58.0/firefox/firefox"

Error: 
        ======================================================
        Oops, something went wrong. Try restarting the server.
        Open another terminal and window type:
        npm run start:test
        or
        python run.py -t
        ======================================================
        
  at ClientRequest.<anonymous>  <tests/functional/lib/setup.js:55:9>
  at emitOne  <events.js:116:13>
  at ClientRequest.emit  <events.js:211:7>
  at Socket.socketErrorListener  <_http_client.js:387:9>
  at emitOne  <events.js:116:13>
  at Socket.emit  <events.js:211:7>
  at emitErrorNT  <internal/streams/destroy.js:64:8>
{ Error: 
        ======================================================
        Oops, something went wrong. Try restarting the server.
        Open another terminal and window type:
        npm run start:test
        or
        python run.py -t
        ======================================================
        
    at ClientRequest.<anonymous> (/home/travis/build/webcompat/webcompat.com/tests/functional/lib/setup.js:55:9)
    at emitOne (events.js:116:13)
    at ClientRequest.emit (events.js:211:7)
    at Socket.socketErrorListener (_http_client.js:387:9)
    at emitOne (events.js:116:13)
    at Socket.emit (events.js:211:7)
    at emitErrorNT (internal/streams/destroy.js:64:8)
    at _combinedTickCallback (internal/process/next_tick.js:138:11)
    at process._tickCallback (internal/process/next_tick.js:180:9) reported: true }
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! webcompat@ test:js: `node ./tests/functional/_intern.js "--reporters=runner" "--firefoxBinary=/home/travis/firefox-58.0/firefox/firefox"`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the webcompat@ test:js script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/travis/.npm/_logs/2018-06-06T10_17_47_937Z-debug.log

travis_time:end:18c92ed2:start=1528280266989096368,finish=1528280267945871463,duration=956775095

@zoepage
Copy link
Member

zoepage commented Jun 6, 2018

Thanks @patrickhlauke for your work <3

Just to give some context, the SVG title were added due to a SVG bug in Firefox nightly 59 (AFAIR).
On hover the SVG disappeared. I might be worth checking, just to be sure if this still happens.

@patrickhlauke
Copy link
Contributor Author

patrickhlauke commented Jun 6, 2018

@zoepage worst case, <title> can be kept, as it would be neutralised by the aria-hidden="true" on the <svg> itself.

not sure about the failure @TravisBuddy is reporting there. is the test that fails looking for specific html that was optimized away? (i'm a bit of a dope when it comes to all this hip technology like CI etc...)

@patrickhlauke
Copy link
Contributor Author

worked out what the deal was with the failing unit test, i think...

(missed this in the previous commit)
to reflect the changes made to the SVG alternative text
@karlcow
Copy link
Member

karlcow commented Jun 6, 2018

Ah cool! This replicates part of the pull request in #2473.
Let's get rid of mine and take @patrickhlauke 's one.
@patrickhlauke long time no see. ❤️

@patrickhlauke
Copy link
Contributor Author

👍 ❤️

@miketaylr miketaylr self-requested a review June 6, 2018 14:42
@miketaylr
Copy link
Member

h cool! This replicates part of the pull request in #2473.
Let's get rid of mine and take @patrickhlauke 's one.

Cool, I'll do that.

@miketaylr miketaylr changed the title webcompat.com fixes (SVG alternatives, invalid code, unnecessary role="button", account dropdown trigger) Fixes #2473. Markup fixes (SVG alternatives, invalid code, unnecessary role="button", account dropdown trigger) Jun 6, 2018
@miketaylr
Copy link
Member

might be worth checking, just to be sure if this still happens.

I don't see this bug.

Copy link
Member

@miketaylr miketaylr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks Patrick!

@miketaylr miketaylr merged commit 958bac4 into webcompat:master Jun 6, 2018
@miketaylr
Copy link
Member

Oops, I linked the wrong issue. :P

@miketaylr miketaylr changed the title Fixes #2473. Markup fixes (SVG alternatives, invalid code, unnecessary role="button", account dropdown trigger) Fixes #2483. Markup fixes (SVG alternatives, invalid code, unnecessary role="button", account dropdown trigger) Jun 6, 2018
@patrickhlauke patrickhlauke deleted the phl-site-fixes branch June 6, 2018 14:58
patrickhlauke added a commit to patrickhlauke/webcompat.com that referenced this pull request Jun 6, 2018
Follow-up to webcompat#2484 due to a silly typo...

r? @miketaylr
miketaylr pushed a commit that referenced this pull request Jun 7, 2018
No issue. Fix typo in footer SVG markup

Follow-up to #2484.
miketaylr pushed a commit that referenced this pull request Jun 7, 2018
Follow-up to #2484 due to a silly typo...

r? @miketaylr
miketaylr pushed a commit to patrickhlauke/webcompat.com that referenced this pull request Jun 7, 2018
Follow-up to webcompat#2484 due to a silly typo...

r? @miketaylr
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.

5 participants