Lab 17 - Git Revert Undo

Learning Objectives

• pronounce “awry” as “uh-rye”
• executing the WAVE tool
• reading and understanding the WAVE tool output
• correcting issues identified by the WAVE tool
• committing changes to a git repository
• using git revert to undo a commit

Introduction

The WAVE tool is designed to facilitate the evaluation of web content for accessibility issues. It is a browser extension that can be used to identify potential issues in a web page. The tool provides a visual representation of the page with icons that indicate potential issues. Clicking on an icon will provide more information about the issue and suggestions for how to correct it.

Gitting Started

In this week’s prep you already checked that you have a few global git configuration options set (i.e. user.name and user.email), but it’s possible you’d enjoy having a few more in place. Here’s an excerpt from mine in case you’d like to have any of those options as well.

1. Begin with the starting code provided by your instructor (e.g. from an assignment in your learning management system) or else in the these go to eleven repo (the best way to begin with such code is to clone it to your computer using the steps below).
   1. open a terminal window
   2. navigate to a place where you’d like to work,
      • e.g. cd $HOME/Desktop
        • if you’re on Windows and that failed, try this instead cd $HOME/OneDrive/Desktop
      • it doesn’t matter exactly where you work as long as you know where it is.
   3. clone the git repository (if you first created a repository on github via github classroom assignment or instantiating the linked template repository, get the URL for cloning from that git repo you newly created and use it in place of the git@github... part in the following command), e.g. git clone git@github.com:hcientist/these-go-to-eleven.git
   4. if you now ls you should see that you have a directory named these-go-to-eleven
   5. navigate into this cloned repo by doing cd these-go-to-eleven
   6. open the cloned repo in VS Code by typing code .
2. add your name to the Contributors section of the README.md file.
   1. open the README.md file
   2. notice that even though the existing entries both begin with 1., they are rendered in the browser as consecutive increasing numbers. This is because the README file is written in a syntax called markdown. That markdown is being rendered as HTML, and the browser is interpreting the numbers as an ordered list.
   3. add your name to the list, following the existing pattern
   4. save the file
3. create a “restore point” including your changes by committing them to the local git repository
   1. in the terminal window, type git status to see what files have been changed
   2. type git add README.md to stage the changes to the README file
   3. type git commit -m "added my name to the contributors list" to commit the changes
4. backup your changes by pushing them to the remote git repository
   1. type git push to push the changes to the remote repository

WAVE Evaluation

1. Launch the VSCode Live Server and view the provided index.html file in your browser.
2. enjoy your new drumkit
3. open the WAVE tool by clicking on the WAVE icon in the browser toolbar
4. click on the icons in the WAVE tool to view the issues identified by the tool

Correcting Document Structure Issues

1. You should see 0 errors if you run the WAVE tool against the provided index.html file.
2. However you should see several alerts, including these two:
   1. No heading structure
   2. No page regions
3. Correct the first issue by adding an h1 element to the page.
   1. open the index.html file
   2. add an h1 element to the page as the first child of the body, give the element some text, you can choose what you want, but I chose These go to 11...
   3. save the file
   4. refresh the page in the browser
   5. Confirm that the No heading structure alert is no longer present.
      • (optionally, you could create a “restore point” at this stage by committing your changes to the local git repository)
4. Correct the second issue by adding a main element to the page.
   1. wrap the current contents of the html body element in a main element.
   2. save the file
   3. refresh the page in the browser
   4. Confirm that the No page regions alert is no longer present.
5. Create a “restore point” at this stage by committing your changes to the local git repository
   1. in the terminal window, type git status to see what files have been changed (it should only list the index.html file)
   2. type git add index.html to stage the changes to the index.html file
   3. type git commit -m "fixed 2 WAVE alerts related to document structure" to commit the changes

Correcting(?) Issues Related to Audio

1. In the WAVE tool, you still see no errors, and should now only see the 9 alerts related to HTML5 audio elements.
2. improve the accessibility of the page by adding transcripts to the audio elements.
   1. open the index.html file
   2. in the content of each of the (9) audio elements, add 2 links: one to the transcript of the audio, and one to the audio itself (the transcript files do not actually exist yet).
      • e.g. change

        <audio data-key="65" src="sounds/clap.wav"></audio>
        

        to

        <audio data-key="65" src="sounds/clap.wav">
          <a href="sounds/clap.wav" download>Download the clap sound effect</a>
           or <a href="clap.txt" download="clap.txt">its transcript</a>
        </audio>
        

   3. save the file
3. Create a “restore point” at this stage by committing your changes to the local git repository
   1. in the terminal window, type git status to see what files have been changed (it should only list the index.html file)
   2. type git add index.html to stage the changes to the index.html file
   3. type git commit -m "added transcripts to audio elements" to commit the changes

Correcting “Corrections” 😒

1. In the WAVE tool, what was the impact of adding the transcripts to the audio elements?
   1. not much. The alerts are still there. This doesn’t necessarily mean you failed, but in this case, it seems a bit unclear that the general recommendation applies to our scenario. as these audio files are only sound effects and as each is already labeled with a textual description, it’s not clear that a transcript is helping very much.
      • that being said, the inner content of elements like audio and video can be used to provide fallback content for browsers that don’t support the media type or for users who can’t access the media for some reason. So, it’s not a bad idea to provide a link to a transcript/the audio file to download, but it’s not clear that it’s necessary in this case.
2. Undo the changes you made to the index.html file related to the audio elements.
   1. in the command line, type git log to see the commit history. this history is displayed in reverse chronological order, with the most recent commit at the top.
      • the git log is typically displayed in program called a pager
      • the default pager is not well documented, it’s often less, but it could be one called more on some systems.
      • when viewing the commit log in either less or more you can scroll through the log by using the arrow keys. to exit the pager, type q. (many other vi keybindings would also work)
   2. notice that the most recent commit is the one that you’d like to undo
   3. notice also that this most recent commit has the label HEAD next to it.
   4. press q to exit the pager
   5. type git revert HEAD to undo the most recent commit
      1. it’s possible that you’ll be prompted to enter a commit message. if so type one and save the file.
         • if you see something like the screenshot below, you’re now in a text editor called vim.
         • to enter text in vim, press i to enter insert mode. you should see -- INSERT -- at the bottom of the screen. type your commit message. when you’re done, press esc to exit insert mode. then type :wq to write the file and quit the editor.
         • 
3. Submit the current state of your code according to your instructor’s instructions (e.g. by pushing to the github classroom repo).